vue 指令和模板

今天我来总结一下vue的指令和模板。指令和模板是vue比较基础的东西，也是vue中很重要的东西。

一、vue指令

vue指令有很多，比如：
v-bind,
v-click,
v-style,
v-class,
v-once,
v-if,
v-else-if,
v-model 等等。
这些指令我就不一一讲解用法了。具体用法可以去看vue 官网的APIhttps://cn.vuejs.org/v2/api/这里写链接内容

二、vue模板

vue的模板是vue很重要的部分。下面我来讲一些vue创建模板的几种方法。

1. 使用 v-html

    <div id="dome">      <p v-html="divWarp"></p>    </div>    <script type="text/javascript">      const data = '<span>I am new elemenp</span>';      var vm = new Vue({        el:'#dome',        data:{          divWarp:data,        }      })    </script>

重点内容 这里有个知识点我们写的data 数据中间不能断开，象这样，
'<span>I am new elemenp
</span>' 否则会报错。
但是ES6为我们提供了一个方法可以这样做，那就是用 ``反引号。这样我们在给它换行时，js就不会报错。

2.使用template

  <div id="dome">  </div>    <script type="text/javascript">      const data = "<ul><li>我是 template 模板</li></ul>"      var vm = new Vue({        el:'#dome',        template:data,      })    </script>

重点内容
① 这时会出现一种现象，我们写的模板data会替换掉 <div id="dome"></div> 它，展示为 <ul><li>我是 template 模板</li></ul>，也就时说template 权级是比较高一些。
② 我们写的字符串data 中 只能有一个根源素，后面不能出现第二个，否则vue 会报错。例如<ul><li>我是 template 模板</li></ul><div>我是DIV</div> 这样是不对的，ul后面不能够在有元素存在，以后所有元素都要写在ul里面（这里只为说明道理，元素包含规则要这注意）

3.使用 <script> 标签

 <div id="dome"></div   <script type="x-template" id="temp"> // type 和 id 是重点       <div>我是 script 模板</div>   </script>   <script type="text/javascript">     new Vue({        el:'#dome',        template:temp,     })   </script>

重点内容 <script> 的type 是重点，当我们更改script的 type 为 x-template 并且要给 <script> 添加一个ID, 在构造vue,中用template 去引入对应id 即可

4.使用render 函数

我这里简单的总结一下render 函数，以后单独写文章详细总结render.
render函数是很接近原声编译的。

rander(createElement){   return createElement(标签名，{数据对象}，子元素)   // 第一个参数 标签名是必要的   // 第二个参数 数据对象 是不必须的   // 第三个参数 子元素是不必须的}

数据对象又包含以下（部分）属性：

class:{} 绑定class，和v-bind:class 一样的API
style:{} 绑定样式，和v-bind:style 一样的API
attrs:{} 添加行间属性 domProps:{} DOM元素属性
on:{} 绑定事件
nativeOn:{} 监听原生事件
directive:{} 自定义指令
scopedSlots:{} slot 作用域
key:”key” 给元素添加唯一的标示
ref:”ref” 引用信息

例如

<style> .color{color:red;}  // 我这里定义了一个类名，下面会绑定 color 类名</style>

<div id="dome"></div><script type="text/javascript">   new Vue({    el:'#dome',    render(createElement){        return createElement(                 "ul", //标签名                 {                    class:{color:true},                    style:{                        fontSize:"26px"                    },                    attrs:{                        newAttr:"111"                    }                 },  // 数据对象，包含一些属性，id ，class，事件的添加                 [                    createElement("li","1"),                    createElement("li","2"),                    createElement("li","3"),                    createElement("li","4"),                 ] // 子元素对象            )    }   })   </script>

以上代码渲染成的DOM 就是

  <ul newAttr="111" class="color" style="font-size:26px">     <li>1</li>     <li>2</li>     <li>3</li>     <li>4</li>  </ul>