下载掌阅APP，畅读海量书库
立即打开
指令调用是Vue模板编写中应用率非常高的方式之一，Vue为开发者提供了众多的内置指令，主要包括v-text、v-html、v-show、v-if、v-else、v-else-if、v-for、v-on、v-bind、v-model、v-slot、v-pre、v-once、v-memo、v-cloak，其中，v-show、v-if、v-else、v-else-if、v-for、v-on、v-bind、v-model指令在本节之前均有所涉及，这些指令的相关内容都十分简单，这里不多做讲解，v-slot指令在4.10节中专门进行讲解。
本节主要讲解v-text、v-html、v-pre、v-once、v-memo、v-cloak指令的相关知识。
v-text指令会渲染指令中的value属性，不管渲染的是什么内容，该指令都会将其渲染为纯文本后输出。如果value属性中带有HTML标签内容，那么页面中仍旧会显示带有标签的文本结果。
v-html指令和v-text指令类似，如果想对渲染内容进行HTML解析，就可以通过v-html指令实现。值得一提的是，该指令内部会用innerHTML的方式进行内容插入和显示，而v-text指令内部会用innerText的方式进行内容插入和显示。
下面在一个文件中分别使用v-html和v-text指令实现带链接的跳转功能，实现代码如下。
页面效果如图2-60所示。
图2-60 页面效果
v-pre指令会跳过当前所在元素及其所有子元素的编译。假如定义了一个message响应式数据，我们想将插值表达式中的message字符串内容渲染在页面上，就可以利用v-pre指令实现，页面不会将message的结果值进行渲染、显示，而仅仅将message插值表达式的内容进行输出。
请思考下面代码的运行效果。
运行代码后，浏览器不会解析插值表达式，而是直接显示“{{message}}”，效果如图2-61所示。
图2-61 v-pre指令案例运行效果
v-once顾名思义就是只渲染一次。具体地说，由v-once指令包含的解析内容只会解析渲染一次。如果想要在首次渲染后修改v-once指令中的响应式数据内容，则会发现其不会出现任何改变。简单地说，在动态显示时，使用该指令后不会再更新对应的data数据。
请思考下面代码的运行效果。
运行代码后，点击按钮数据不会发生任何改变，初始页面效果如图2-62所示，点击按钮后的页面效果如图2-63所示。
图2-62 初始页面效果
图2-63 点击按钮后的页面效果
v-memo指令可以实现高效缓存，在指定依赖条件下进行模板编译。在非依赖条件下，Vue则对v-memo指令包含的内容进行跳过编译处理。
假如当前有两个响应式数据count和update，但v-memo指令限制的数据是count，那么只有在“count++”按钮被点击的情况下，v-memo指令包含的内容才会实时更新渲染，而在“update++”按钮被点击的情况下，v-memo指令包含的内容并不会发生响应式变化。
值得一提的是，如果v-memo指令设置的是[]（空数组），v-memo指令就相当于v-once指令的作用，即只进行一次渲染处理。
上面描述过程的实现代码如下。
运行代码后，页面出现一个count值、一个update值和对应的两个按钮。初始页面效果如图2-64所示，当初次点击“count++”按钮时，count值会实时更新渲染，如图2-65所示；当初次点击“update++”按钮时，update值不会实时更新渲染，如图2-66所示；再次点击“count++”按钮后count值和update值被统一渲染，如图2-67所示。
图2-64 初始页面效果
图2-65 初次点击“count++”按钮后count值发生改变
图2-66 初次点击“update++”按钮后update值未发生改变
图2-67 再次点击“count++”按钮后count值和update值发生改变
v-cloak指令用于隐藏尚未完成编译的DOM模板。有时会出现网络延迟或异步操作的情况，导致模板中的插值表达式内容并不一定能够及时被编译解析，网页中则会出现一部分未被解析的插值表达式，我们可以理解为花屏状态。此时就可以利用v-cloak指令，将指令中包含的内容先进行隐藏，当全部内容被解析编译完以后再显示，这样可以提升用户体验。需要注意的是，v-cloak指令不能单独使用，需要配合样式来实现。
请思考下面代码的运行效果。
当出现网络延迟或异步操作时，页面会将内容先隐藏，直到编译通过才显示“Hello Vue3！”。