vue开发教程09：v-pre、v-cloak、v-once指令

扫描下面的二维码，“关注”我的头条号，我会每天更新免费视频课程。

前面我们介绍了几种常用的几个vue指令：v-if、v-else、v-show、v-bind、v-text、v-html等指令。本章我们再来介绍几个指令：v-pre指令、v-cloak指令、v-once指令。

1：v-pre指令。

该指令不会解析vue语法，在模板中跳过vue的编译，而是直接把vue代码输出页面。如：

list:"高时银博客"

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

本来{{list}}是应该输出list属性的值 “高时银博客”，而使用了 v-pre 指令后，就直接输出源代码{{list}}。

2：v-cloak指令。

这个指令使用机率非常少。vue绑定数据时，渲染时会出现变量闪烁，例如

<div class="#app">
<p>{{value.name}}</p>
</div>

在加载时会看到{{value.name}}在页面出现，过几秒才会渲染数据。而v-cloak就是用来解决这个问题的，如：

<div class="#app" v-cloak>
<p>{{value.name}}</p>
</div>

在css里面要添加：

[v-cloak] {
display: none;
}

这样就可以防止页面闪烁了。不过，实际使用中，我很少看到变量闪烁的情况，也许是数据量太小的缘故吧。

3：v-once指令。

这个指令表示，只渲染一次。

<div v-once>{{massage}}</div>
<input v-model="massage" type="text">
<div>{{massage}}</div>

上面代码中，第一个div中的{{massage}}只渲染一次，当我们在input输入框中修改massge值时，第一个div因使用了v-once指令而不会再发生变化，而第二个div的内容会跟input内容变化而变化，如下图：