指令是Vue模板中最常用的一项功能，它带有前缀v-，主要职责是当其表达式的值改变时，相应的将某些行为应用在 DOM 上

一、v-if/v-else/v-else-if

v-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果v-if表达式赋值为false，那么对应的元素就会从DOM中移除；否则，对应元素的一个克隆将被重新插入DOM中，代码如下：

<div id="example-2">
   <p v-if="greeting">Hello!</p>
</div>
<script type="text/javascript">
   var exampleVM2 = new Vue({
   el: '#example-2',
   data: {
   greeting: true
   }
 })
</script>

v-else,必须跟着v-if或者v-show后面，当前者为false时，只有v-lese显示，当前者为true时，则都显示。

<div id="app">
  <p v-if="ok">A</p>
  <p else>B</p>	 
   </div> 
</body>
<script>
  var exampleVM2 = new Vue({
  el: '#app',
  data: {
  ok:false,
  }
})
</script>

v-else-if是在vue.js2.1.0中新增的，用作v-if的else-if块，可以链式的多次使用

  <div id="app">
    <p v-if="type === 'A'">A</p>
    <p v-else-if="type === 'B'">B</p>
    <p v-else-if="type === 'C'">C</p>
    <p v-else>Not A/B/C</p>
  </div> 
</body>
<script>
  var exampleVM2 = new Vue({
  el: '#app',
  data: {
  type:'C',
  }
  })
</script>

v-show与v-if用法相似，也可以与v-else一起用

  <p id="app">
    <h1 v-show="ok">Hello!</h1>
  </p>
<script>
  new Vue({
    el: '#app',
    data: {
    ok: true
    }
  })
</script>

v-show与v-if的使用比较：

1.v-show根据值的真假，切换元素的display属性；v-show的元素会始终渲染并保持在DOM中，v-show不支持template语法。

2.v-if是真实的条件渲染，因为他会确保条件块在切换中适当的销毁与重建条件块内的事件监听器和子组件。 

3.v-if有更高的切换消耗，而v-show有更高的初始渲染消耗。如果需要频繁切换使用v-show更好，如果在运行时条件不大可能改变，使用v-if比较好

二、v-model

 v-model指令用来在input、select、text、checkbox、radio等表单控件元素上创建双向数据绑定的。根据控件类型v-model自动选取正确的方法更新元素。

<div id="example">
        <form>
                        姓名：
            <input type="text" v-model="data.name" placeholder="姓名"/>
            <br />
            性别：
            <input type="radio" id="one" value="One" v-model="data.sex"/>
            <label for="man">男</label>
            <input type="radio" id="two" value="Two" v-model="data.sex"/>
            <label for="male">女</label>
            <br />
            <input type="checkbox" id="jack" value="book" v-model="data.interest"/>
            <label for="jack">阅读</label>
            <input type="checkbox" id="john" value="swim" v-model="data.interest"/>
            <label for="john">游泳</label>
            <input type="checkbox" id="move" value="game" v-model="data.interest"/>
            <label for="move">游戏</label>
            <input type="checkbox" id="mike" value="song" v-model="data.interest"/>
            <label for="mike">唱歌</label>
            <br />
             身份：
            <select v-model="data.identity">
                <option value="teacher" selected>教师</option>
                <option value="doctor">医生</option>
                <option value="lawyer">律师</option>
            </select>          
        </form>
    </div>
    <script type="text/javascript">
        new Vue({
            el: '#example',
            data: {
                data:{
                    name:'',
                   sex:'',
                   interest:[],
                   identity:''
                }
            }
        })
    </script>

v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后做了两个操作：1、v-bind绑定一个value属性，2、v-on指令给当前元素绑定input事件；自定义组件使用v-model，应该有以下操作：1、接收一个value prop，2、触发input事件，并传入新值。代码如下：

<!--在原生接受到的值为： -->
<input v-model="inputValue"/>
<!--相当于 -->
<input v-bind:value='inputValue' v-on:'inputValue=$event.target.value'/>

<!--在自定义组件中 -->
<my-component v-model='inputValue'></my-component>
<!--相当于 -->
<my-component v-bind:value='inputValue' v-on:input="inputValue = argument[0]"></my-component>

这个时候，inputValue接受的值就是input回调函数的第一个参数，所以在自定义组件中，要实现数据绑定，还需要$emit去触发input的事件。

this.$emit('input',value)

v-model修饰符

 v-model也可以和.lazy、.trim和.number这些修饰符一起使用。

<!-- 在每次 input 事件触发后将输入框的值与数据进行同步，添加 lazy 修饰符，从而转变为使用 change 事件进行同步 -->
<input v-model.lazy="msg" >
<!--去除字符串首尾的空格-->
<input v-model.trim="msg">
<!--将数据转化为值类型-->
<input v-model.number="age" type="number">

.lazy相当于一个延迟加载的过程。在上面我们讲过<input v-model="test">相当于一个语法糖<input :value="test" @input="test = $event.target.value">，而<input v-model.lazy="msg" >则相当将input的实时更新改为一个change事件，v-model.lazy只有当焦点移除input时才会触发事件。

三、v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始Mustache标签。跳过大量没有指令的节点会加快编译。

<span v-pre>{{msg}}此处Mustache会显示为原始‘{{}}’标签</span>

 四、v-cloak

 作用是取消数据绑定时出现的代码闪烁

//example1:
<span>{{price}}</span>
//example2: 
<span v-bind="price"></span>
//example3: 
<span v-cloak>{{price}}</span>

上面代码中例子2和例子3实现的效果是一样的，而例子1在vuejs解析{{price}}之前，用户是可以看到"{{price}}"这个字符串的。而例子2和例子3不会有这种闪烁的情况。

五、v-once

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

通过v-once创建低开销静态组件

渲染普通的 HTML 元素在 Vue 中是非常快速的，但有的时候你可能有一个组件，这个组件包含了大量静态内容。在这种情况下，你可以在根元素上添加 v-once 特性以确保这些内容只计算一次然后缓存起来，就像这样：

Vue.component('terms-of-service', {
  template: `
    <div v-once>
      <h1>Terms of Service</h1>
      ... a lot of static content ...
    </div>
  `
})

官方不推荐过度使用这个模式。当你需要渲染大量静态时，极少数的情况下会带来便利。