3.1.1　指令

指令（directives）是Vue中最常用的功能，以带有v-前缀的特殊属性形式呈现，主要负责当表达式的值改变时，将其产生的连带影响响应式地作用于DOM。

1．v-bind

v-bind：响应并更新DOM特性，例如v-bind:href、v-bind:class、v-bind:title等。

主要用法：绑定属性、动态更新HTML元素上的属性。

代码如下：

运行效果如图3-1所示。

图3-1　v-bind运行效果

2．v-model

v-model：数据双向绑定，用于表单输入，例如<input v-model="message">。

主要用法：用在input、select、text、checkbox、radio等表单控件或者组件上创建双向绑定。它会根据控件类型自动选取正确的方法来更新元素，主要负责监听用户的输入事件以更新数据，并处理一些极端的例子。

代码如下：

运行效果如图3-2所示。

图3-2　v-model运行效果图

3．v-for

v-for：循环指令。例如：

    <li v-for="(item,index) in todos"></li>

主要用法：基于源数据多次渲染元素或模块。此指令的值必须使用特定语法，为当前遍历的元素提供别名。

代码如下：

运行效果如图3-3所示。

图3-3　v-for运行效果图

提示：上述代码中的<li v-for='value in arr'>，如果其值为'value in arr'，则在控制台显示data中arr的内容；如果其值为'value in json'，则显示data中json的内容。

4．v-on

v-on：用于监听DOM事件，例如v-on:click、v-on:keyup等。

主要用法：绑定事件监听器。事件类型由参数指定，表达式可以是一个方法的名称或一个内联语句，如果没有修饰符也可以省略。V-on用在普通元素上时，只能监听原生DOM事件；用在自定义元素组件上时，能监听子组件触发的自定义事件。在监听原生DOM事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个$event**属性：**v-on:click="handle('ok', $event)"。

代码如下：

运行效果如图3-4所示。

图3-4　v-on运行效果图

5．v-html

v-html：更新元素的innerHTML。

提示：按普通HTML插入“-”，不会作为Vue模板进行编译。如果试图使用v-html组合模板，可以重新考虑是否通过使用组件来替代。在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。建议只在可信内容上使用v-html，不在用户提交的内容上使用。

代码如下：

运行效果如图3-5所示。

图3-5　v-html运行效果图

6．v-text

v-text：更新元素的textContent，例如<span v-text="msg"></span>等同于<span>{{msg}}</span>。

主要用法：更新元素的textContent。如果要更新部分的textContent，需要使用{{mustache}}插值。

提示：使用<span v-text="msg"></span>和<span>{{msg}}</span>两种写法都可以。

代码如下：

运行效果如图3-6所示。

图3-6　v-text运行效果图

7．v-cloak

v-cloak：不需要表达式，这个指令保持在元素上，直到关联实例结束编译。

主要用法：当Cloak和CSS规则（如[v-cloak] {display: none}）一起用时，这个指令可以隐藏未编译的<mustache>标签直到实例准备完毕，否则在渲染页面时，有可能用户会先看到<mustache>标签，然后看到编译后的数据。

代码如下：

运行效果如图3-7所示。

图3-7　v-cloak运行效果图

8．v-pre

v-pre：不需要表达式，用于跳过元素及子元素的编译过程，以此来加快整个项目的编译速度。例如：

    <span v-pre>{{ this will not be compiled }}</span>

主要用法：跳过元素和它的子元素的编译过程。此外，它可以用来显示原始<mustache>标签。

代码如下：

运行效果如图3-8所示。

图3-8　v-pre运行效果图

9．v-once

v-once：不需要表达式，只渲染元素或组件一次。以后渲染时，组件/元素及下面的子元素都当成静态页面不再被渲染，这可以用于优化更新性能。

代码如下：

运行效果如图3-9所示。

图3-9　v-once运行效果图