2.1　Vue.js基础指令

学习Vue必然要了解这个框架的常用指令，它们可以大大提升前端开发人员的开发效率。

1．v-pre跳过编译

当开发者希望在HTML中为用户显示出{{}}时，就需要用v-pre来通知Vue.js跳过当前这个标签的编译，代码如下：

<div v-pre>{{123}}</div>

以上代码可以让网页直接显示{{123}}，而非123。

2．v-html标签解析

除了可以使用Mustache语法渲染文本，Vue.js也可以使用v-html来渲染，同时要强调一下，v-html不仅可以渲染文本，还可以解析标签，代码如下：

以上代码会将标签一起解析出来，打开网页可以看到文字是加粗的。

3．v-text文本解析

从初学者的角度而言，基本可以认为v-text和Mustache语法的作用相同。v-text与v-html最大的不同在于：v-html可以解析html，而v-text只能原封不动地把标签显示在页面中，无法解析成标签对应的格式，代码如下：

以上代码最终显示出来的将是<p><strong>你好世界</strong></p>。明显可以看出，无法解析标签。

4．v-cloak斗篷

当使用{{}}这样的Mustache语法来将数据渲染到HTML中时，由于网络请求等原因造成卡顿，偶尔会导致用户先看到{{}}符号，过一会才能显示出来对应的数据。如果想要避免这种样式出现，则可以使用v-cloak，代码如下：

将这份代码在浏览器打开，打开后在浏览器控制台中找到Network，如图2-1所示，将其中的No throttling改为slow 3G，这样就能看到效果了。

图2-1　控制台Network

5．v-show显示

当开发者需要通过某个条件决定元素的显示或隐藏时，可以使用v-show，这个属性的值可以直接填写表达式。当这个值的判断结果为true时，显示元素，否则无法显示元素，代码如下：

以上代码可以通过修改status的值，决定显示哪个h2标签。

6．v-if条件判断与显示

v-if也可以用来控制元素的显示与隐藏，代码如下：

通过一个flag，开发者就可以控制一个元素是否显示。那么v-if与v-show有什么区别呢？答案是：v-if可根据条件渲染或者销毁元素，而v-show只会控制元素的显示和隐藏，相当于改变display值。

7．v-for循环

Vue.js文件中的循环使用v-for指令实现。假如现在有一个记录人物名称的数组，想要渲染在页面中，以列表的形式存在。实现的代码如下：

其中，item指数组中的每项，index指每项的索引值。

8．v-bind:key唯一标识符

实际上，在循环的过程中需要给元素的标签添加上key属性。如果没有key属性，当每次数据有局部更新时就需要整个数组重新渲染，对性能很不友好。给元素添加了key属性后，当数组有更改时，虚拟DOM会与真实DOM上的key值进行比较，如果真实DOM元素上的key值与虚拟DOM上的key值相同，则忽略该DOM元素的更新，从而提升渲染性能。

key值作为唯一标识符，建议如果数组项中有id，则优先考虑id作为key值。因为id是唯一的，当数组更新时，元素上的key就不会随之而变化。如果以index作为key，当数组的增删导致元素重排时，key值就会混乱，因此建议key值优先考虑id。若已知数组是不会更新的，则可采用index等字段作为key值。

通过介绍key属性的作用，开发者需要知道，Vue真正的for循环格式如下：

Vue.js的指令能为开发提升效率，是Vue.js学习路线中非常重要的一个概念。本节主要讲解了Vue.js的基础指令，也是部分常用的指令，如v-html、v-show、v-if和v-for等。后文还会继续讲述更多常用指令。 K9Q6cS359wCTx0o0AUuLALvClyPusv9GKeD47F5VAGDTo+kh8WUvZJn9pKuq6kue