2.2　常用的内置模板指令

顾名思义，内置指令就是Vue内置的一些指令，它针对一些常用的页面功能提供了以指令来封装的使用形式，以HTML属性的方式使用。例如前面章节讲述的v-bind和v-html指令，本节将继续讲解其他的内置指令。

2.2.1　v-on

v-on指令用于监听DOM事件，当触发时运行一些JavaScript代码。v-on指令的表达式可以是一般的JavaScript代码，也可以是一个方法的名字或者方法调用语句。

在使用v-on指令对事件进行绑定时，需要在v-on指令后面接上事件名称，例如click、mousedown、mouseup等事件。

【例2.4】　v-on指令（源代码\ch02\2.4.html）。

在Chrome浏览器中运行程序，单击“+1”按钮或“-1”按钮，即可实现数字的递增和递减；单击“古诗”按钮，触发click事件，调用say（）函数，页面效果如图2-4所示。

在Vue应用中许多事件处理逻辑会很复杂，所以直接把JavaScript代码写在v-on指令中是不可行的，此时就可以使用v-on接收一个方法，把复杂的逻辑放到这个方法中。

2.2.2　v-text

v-text指令用来更新元素的文本内容。如果只需要更新部分文本内容，那么可使用插值来完成。

【例2.5】　v-text指令（源代码\ch02\2.5.html）。

在Chrome浏览器中运行程序，结果如图2-5所示。

2.2.3　v-once

v-once指令不需要表达式。v-once指令只渲染元素和组件一次，随后的渲染，使用了此指令的元素、组件及其所有的子节点，都会当作静态内容并跳过，这可以用于优化更新性能。

例如，在下面的示例中，当修改input输入框的值时，使用了v-once指令的p元素，不会随之改变，而第二个p元素随着输入框的内容而改变。

【例2.6】　v-once指令（源代码\ch02\2.6.html）。

在Chrome浏览器中运行程序，然后在输入框中输入“香蕉”，可以看到，添加v-once指令的p标签并没有任何变化，效果如图2-6所示。

2.2.4　v-pre

v-pre指令不需要表达式，用于跳过这个元素和它的子元素的编译过程。可以使用v-pre指令来显示原始Mustache标签。

【例2.7】　v-pre指令（源代码\ch02\2.7.html）。

在Chrome浏览器中运行程序，结果如图2-7所示。

2.2.5　v-cloak

v-cloak指令不需要表达式。这个指令保持在元素上直到关联实例结束编译。与CSS规则（如[v-cloak]{display:none}）一起使用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。

【例2.8】　v-cloak指令（源代码\ch02\2.8.html）。

在Chrome浏览器中运行程序，结果如图2-8所示。