第2章 Vue内置指令

2.1　基本指令

2.1.1　v-text与v-html

v-text与v-html指令都可以用来更新页面元素的内容，但是二者也有不同点，v-text输出的数据是以字符串形式显示的，而v-html不仅可以输出字符串形式的数据，而且可以渲染字符串中的HTML标签。

index.html文件代码如下：

在浏览器中运行的效果如图2.1所示。

2.1.2　v-bind

v-bind可以用来绑定标签的属性，例如：<img>标签的srcs属性，<a>标签的title属性等。使用v-bind绑定的属性值应该为一个JavaScript的变量，或者是JavaScript表达式。

index.html文件代码如下：

在浏览器中运行的效果如图2.2所示。

上面的代码示例中，对<a>标签的title属性使用v-bind进行绑定，title的值为Vue实例中的titleText变量，当鼠标指针悬停在<a>标签渲染的元素上时，会显示动态的titleText属性的值。

2.1.3　v-once

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

index.html文件代码如下：

在浏览器中运行的效果如图2.3所示。

运行上面的示例代码，当打开浏览器页面时，DOM元素中的{{message}}渲染了message属性的值，当使用v-model绑定的输入框再次改变message属性的值时，添加了v-once指令的标签则没有发生任何变化。

2.1.4　v-cloak

v-cloak指令将会保持在DOM元素上，直到关联实例结束编译后自动移除。v-cloak指令的使用场景非常有限，常用于解决网络较慢时数据的加载问题。用户在访问Vue.js实现的网站时，如果网络延迟，网页还在加载Vue.js，便会导致Vue来不及渲染，这时页面就会显示出Vue源代码，我们就可以使用v-cloak指令来解决这一问题。

index.html文件代码如下：

当网络较慢时，在浏览器中打开页面，此时会在页面中出现Vue源码，直到Vue.js加载完成并编译之后，才会显示正常的数据内容，如图2.4所示。

为了解决上面代码运行的问题，我们可以为DOM元素添加v-cloak指令，并使用属性选择器为指定的DOM元素设置隐藏样式。v-cloak指令可以保持在DOM元素上，直到编译结束才自动移除，这样就可以在Vue完成编译之前使指定的DOM元素处于隐藏状态，等编译完成后，CSS样式就对该DOM元素无效了。

index.html文件代码如下：

2.1.5　v-pre

v-pre指令会跳过这个元素和它的子元素的编译过程，所以可以用来显示原始Mustache标签。跳过大量没有指令的节点会加快编译，代码如下：

在浏览器中运行的效果如图2.5所示。