1.5　Vue基础指令

经过前面几节内容的学习，相信大家已经初识Vue，本节讲解的是Vue基础指令，通过基础指令可以掌握更多渲染数据的方法，实现数据的双向绑定。

1.5.1　v-cloak指令

v-cloak指令的作用是在Vue数据渲染完成之前，隐藏源代码，当快速刷新页面或者网速较慢时，Vue不能立即渲染数据，此时看到的页面如图1-3所示。

当网速过慢时，浏览器显示的是Vue的源代码，对于用户来说，这是一种不友好的展现形式。所以在实现Vue项目之前，我们需要使用v-cloak指令，代码如下。

上述代码有两处注释。

（1）注释一表示在Vue控制的根节点使用v-cloak指令。

（2）注释二表示使用CSS样式控制Vue源码的隐藏。

v-cloak原理：由于快速刷新页面或者网速原因，导致Vue.js没有生效，在生效之前，只要是添加了v-cloak指令的元素，都会隐藏（样式设置），当Vue.js加载完毕，所做的第一件事就是将页面中的v-cloak指令删掉，所以数据又可以正常显示了。

1.5.2　v-text指令

作用：渲染data中的属性值。

前文讲过使用插值表达式渲染data中的属性值，本节讲解渲染数据的另外一种方式，即使用v-text指令。渲染msg属性的代码如下。

M层代码如下。

视图层代码如下。

运行代码，发现用两种方式渲染数据的运行结果相同，如图1-4所示。

1.5.3　v-html指令

作用：渲染富文本。

1.5.2节讲解的v-text指令只能渲染普通的字符串，而不能渲染复杂数据（如富文本）。本节讲解用v-html指令渲染富文本，代码如下。

M层代码如下。

视图层代码如下。

运行代码，发现M层中msg属性的h1标签会被解析，如图1-5所示。

下面总结一下插值表达式、v-text、v-html的相同点和不同点。

相同点：都可以渲染M层中的数据。

不同点：（1）插值表达式和v-text不能渲染富文本。

（2）v-text和v-html在视图层不能继续添加文本内容，而插值表达式可以继续添加文本。

下面通过插值表达式、v-text、v-html进行渲染，代码如下。

运行结果如图1-6所示。

结论：只有插值表达式中的文本可以正常显示，使用v-text和v-html渲染的数据会覆盖原标签中的内容。

1.5.4　v-bind指令

作用：元素属性绑定。

v-bind是比较重要的一个指令，用于元素的属性绑定。以上几节中M层的数据直接渲染到元素中，本节讲解的是把M层的数据渲染到元素的属性中，例如div有title属性，把M层数据渲染到title属性中，代码如下。

M层代码如下。

视图层代码如下。

此时当鼠标移动到div元素，title属性显示的是字符串“msg”，并不能渲染M层的“Hello World”，运行结果如图1-7所示。

正确的做法应该是使用v-bind指令绑定属性，代码如下。

运行结果如图1-8所示。

注意：

当元素中的属性使用了v-bind指令时，后面的值就是变量，Vue会到M层中找这个变量，若找到了就渲染内容，若找不到就会报错。

常用的属性绑定还有img标签中的src属性、a标签中的href属性等，代码如下。

M层代码如下。

视图层代码如下。

注意：

v-bind可以简写成“:”，所以上述代码中的src属性和href属性可以分别简写为“:src”和“:href”，代码如下。

1.5.5　v-on指令

作用：元素事件绑定。

v-on指令同样是Vue中的重要指令，用于元素事件的绑定，现在有一个简单的需求，单击“单击”按钮时，控制台输出“Hello World”，原生的JS代码如下。

视图层代码如下。

JS代码如下。

当单击“单击”按钮时，控制台可正常输出“Hello World”，但是上述代码有个缺点，即其功能是通过操作DOM元素实现的，这和Vue的理念冲突，Vue不建议操作DOM元素，所以应该使用v-on事件绑定指令，代码如下。

视图层代码如下。

JS代码如下。

单击“单击”按钮时，控制台同样会输出“Hello World”，这一次我们并没有操作DOM元素。分析上述代码，发现在配置对象中新增了methods属性，methods属性用来存放方法。

视图层中，通过v-on指令给按钮绑定了单击事件。当单击按钮时，会到methods属性中找show方法，若找到show方法就执行，若找不到show方法就报错。

本节的重点是要理解methods属性是用来存放方法的，v-on是用来绑定事件的。

除了单击事件，常见的事件还有鼠标移动事件，下面将上述案例的需求修改成：当鼠标经过按钮时，控制台输出“Hello World”，代码如下。

视图层代码如下。

JS代码如下。

注意：

从上述代码可以看出，v-on指令可以简写成“@”。