1.5 Vue基础指令
经过前面几节内容的学习，相信大家已经初识Vue，本节讲解的是Vue基础指令，通过基础指令可以掌握更多渲染数据的方法，实现数据的双向绑定。
1.5.1 v-cloak指令
v-cloak指令的作用是在Vue数据渲染完成之前，隐藏源代码，当快速刷新页面或者网速较慢时，Vue不能立即渲染数据，此时看到的页面如图1-3所示。
图1-3 Vue数据渲染之前
当网速过慢时，浏览器显示的是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-4 插值表达式渲染和v-text指令渲染的运行结果
1.5.3 v-html指令
作用：渲染富文本。
1.5.2节讲解的v-text指令只能渲染普通的字符串，而不能渲染复杂数据（如富文本）。本节讲解用v-html指令渲染富文本，代码如下。
M层代码如下。
视图层代码如下。
运行代码，发现M层中msg属性的h1标签会被解析，如图1-5所示。
图1-5 v-html渲染结果
下面总结一下插值表达式、v-text、v-html的相同点和不同点。
相同点：都可以渲染M层中的数据。
不同点：（1）插值表达式和v-text不能渲染富文本。
（2）v-text和v-html在视图层不能继续添加文本内容，而插值表达式可以继续添加文本。
下面通过插值表达式、v-text、v-html进行渲染，代码如下。
运行结果如图1-6所示。
图1-6 插值表达式、v-text、v-html渲染结果
结论：只有插值表达式中的文本可以正常显示，使用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所示。
图1-7 title属性渲染结果1
正确的做法应该是使用v-bind指令绑定属性，代码如下。
运行结果如图1-8所示。
图1-8 title属性渲染结果2
注意：
当元素中的属性使用了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指令可以简写成“@”。