作者：CSDN-PleaSure乐事
欢迎大家阅读我的博客 希望大家喜欢
之前我们已经学习过部分高频内置指令，如下图所示：
今天我们继续扩展一些常用且高频的内置指令，与大家共勉。
目录
1.v-text
1.1原生方式
1.2v-text方式
1.2.1定义
1.2.2特点
1.3区别
2.v-html
2.1使用方式及与v-text的区别
3.v-cloak
3.1定义与本质
3.2实现
4.v-once
4.1定义
4.2实现与效果
4.2.1使用前
4.2.2使用后
5.v-pre
5.1定义
5.2效果
1.v-text
1.1原生方式
首先这个方法是大家都比较熟悉的方法，直接使用插值完成：
<body>
<div id="root">
<div>{{name}}</div>
</div>
<script type="text/javascript">
new Vue({
el:'#root',
data:{
name:'张三'
}
})
</script>
</body>
1.2v-text方式
1.2.1定义
第二个我们使用常用指令v-text方法完成，此时我们仅需要进行一点点修改即可：
我们只需要在div中直接添加v-text就可以达到相同效果：
<body>
<div id="root">
<div>{{name}}</div>
<div v-text="name"></div>
</div>
<script type="text/javascript">
new Vue({
el:'#root',
data:{
name:'张三'
}
})
</script>
</body>
1.2.2特点
会把整个text当中的内容当成一段文本，不会再解析其中的标签等，如下所示：
<body>
<div id="root">
<div v-text="str">啦啦啦</div>
</div>
<script type="text/javascript">
new Vue({
el:'#root',
data:{
name:'张三',
str:'<h3>h3标签</h3>',
}
})
</script>
</body>
1.3区别
但是我们使用原生插值更多，因为插值方法更加灵活。
我们使用原生插值，则会自动完成拼接，但是使用v-text则会替换整个div当中的内容：
<body>
<div id="root">
<div>你好，{{name}}</div>
<div v-text="name">啦啦啦</div>
</div>
<script type="text/javascript">
new Vue({
el:'#root',
data:{
name:'张三'
}
})
</script>
</body>
2.v-html
2.1使用方式及与v-text的区别
我们直接使用v-html即可使用，与v-text的区别于v-html支持结构化语义的解析，而v-text不支持。如下：
<body>
<div id="root">
<div>{{name}}</div>
<div v-html="str">啦啦啦</div>
</div>
<script type="text/javascript">
new Vue({
el:'#root',
data:{
name:'张三',
str:'<h3>h3标签</h3>',
}
})
</script>
</body>
说大白话就是v-html可以直接解析如h3等诸如此类的标签，而v-text不行。
3.v-cloak
3.1定义与本质
v-cloak可以辅助网页的加载，保证网页在因为网速慢等原因导致vue没有被真正导入前不会显示未被解析的vue模版显示在网页上。
v-cloak的本质为一个特殊属性，vue实例创建完成并并接管容器后，cloak则会被删除。
3.2实现
需要注意的是使用cloak时需要配合css样式使用，否则会没有直观显示的效果，代码配合如下：
<head>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="root">
<h2 v-cloak>{{name}}打篮球</h2>
</div>
<script type="text/javascript">
new Vue({
el:'#root',
data:{
name:'张三'
}
})
</script>
</body>此时若网页加载太慢，且未使用v-cloak时，网页会显示{{name}}打篮球，效果如下：
但是在使用之后，则会全部显示，显示“张三打篮球”。
4.v-once
4.1定义
v-once所在节点在初次动态消染后，就视为静态内容了。以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
4.2实现与效果
4.2.1使用前
使用前n会同时变化，不论我按几次都是一样：
<body>
<div id="root">
<h2>当前的n大小为：{{n}}</h2>
<h2>当前的n大小为：{{n}}</h2>
<button @click="n++">点我+1</button>
</div>
<script type="text/javascript">
new Vue({
el:'#root',
data:{
n:1
}
})
</script>
</body>
4.2.2使用后
此时我们在想要维持初始值的n前加上v-once就可以保证维持初始值，而非一起变化：
<body>
<div id="root">
<h2 v-once>当前的n大小为：{{n}}</h2>
<h2>当前的n大小为：{{n}}</h2>
<button @click="n++">点我+1</button>
</div>
<script type="text/javascript">
new Vue({
el:'#root',
data:{
n:1
}
})
</script>
</body>
5.v-pre
5.1定义
v-pre会跳过其所在节点的编译过程。可利用它跳过没有使用指令语法、没有使用插值语法的节点，会加快编译。
5.2效果
当添加pre时，会跳过编译，如下所示：
<body>
<div id="root">
<h2 v-pre>打篮球</h2>
<h2 v-pre>当前的n大小为：{{n}}</h2>
<button @click="n++" v-pre>点我+1</button>
</div>
<script type="text/javascript">
new Vue({
el:'#root',
data:{
n:1
}
})
</script>
</body>
因此有插值语法等涉及到vue实例的代码建议不使用pre，防止插值语法不插值等等情况出现，从而导致网页展示效果出现问题。
作者：CSDN-PleaSure乐事
希望我的博客对您有帮助，也希望在对您有帮助时您可以为我留下点赞收藏与关注，这对我真的很重要，谢谢！
