Vue内置指令

Vue的内置指令是带有v-前缀的特殊属性，它的作用是当表达式的值改变时将其一系列连带影响，响应地作用于DOM元素。

1、v-text指令

v-text指令作用是用于向其所在的节点标签渲染文本内容，它与差值语法的区别在于，v-text会将节点中的内容全部替换,而差值语法可以进行拼接

<!-- 差值语法 -->
<div>Vue——{{ name }}</div>
<!-- 内置指令 -->
<div v-text="name">Vue——</div>

/

2、v-html指令

v-html指令用于将html结构进行渲染，使用上述的v-text以及差值语法是不支持的，它只会将其通过字符的方式进行解析展示

<div>{{ htmlStr }}</div>
<!-- 内置指令 -->
<div v-html="htmlStr"></div>

3、v-cloak指令

v-cloak指令没有特定的值,不用给它指定等于号以及后面的数据,它只是一个特殊属性,等vue实例加载创建完成并接管指定的容器后,该属性会自动被剔除
类似于当页面因为网速过慢或页面加载内容过多等原因导致Vue实例无法迅速将节点内容渲染，那么页面上就会直接显示双括弧等标签，这种情况是不友好的，v-cloak属性即可解决这种问题，等渲染加载完成后再将其进行展示

<!-- 内置指令 -->
<div v-cloak>{{ name }}</div>
<div v-cloak>{{ htmlStr }}</div>

4、v-once指令

v-once指令用于对该属性所在的标签节点在vue实例进行初次渲染后，就将其标记为静态内容，屏蔽双向绑定及其效果；后续一系列对该数据的操作都不会更新，常用于优化性能或数据标记

<!-- 内置指令 -->
<div v-once>初始值{{ number }}</div>
<div>变动值{{ number }}</div>
<button @click="number++">点击增加</button>

添加前

添加后

5、v-pre指令

v-pre指令会直接跳过带有该指令的节点标签，直接忽视，拿来就用。可以在没有使用差值语法的标签使用该指令，用于提升页面编译渲染速度，Vue在渲染时会直接忽略带有此指令的标签

<!-- 内置指令 -->
<h2 v-pre>{{ name }}</h2>
<h2 v-pre>初始值{{ number }}</h2>