今天我来总结一下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>