首页 > 编程笔记 > JavaScript笔记
阅读:3
Vue内置指令(v-text、v-html、v-pre、v-once、v-memo、v-cloak)
指令调用是 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-text、v-html、v-pre、v-once、v-memo、v-cloak 指令的相关知识。
v-html 指令和 v-text 指令类似,如果想对渲染内容进行 HTML 解析,就可以通过 v-html 指令实现。值得一提的是,该指令内部会用 innerHTML 的方式进行内容插入和显示,而 v-text 指令内部会用 innerText 的方式进行内容插入和显示。
下面在一个文件中分别使用 v-html 和 v-text 指令实现带链接的跳转功能,实现代码如下:
假如定义了一个 message 响应式数据,我们想将插值表达式中的 message 字符串内容渲染在页面上,就可以利用 v-pre 指令实现,页面不会将 message 的结果值进行渲染、显示,而仅仅将 message 插值表达式的内容进行输出。
请思考下面代码的运行效果:
如果想要在首次渲染后修改 v-once 指令中的响应式数据内容,则会发现其不会出现任何改变。简单地说,在动态显示时,使用该指令后不会再更新对应的 data 数据。
请思考下面代码的运行效果:
假如当前有两个响应式数据 count 和 update,但 v-memo 指令限制的数据是 count,那么只有在“count++”按钮被点击的情况下,v-memo 指令包含的内容才会实时更新渲染,而在“update++”按钮被点击的情况下,v-memo 指令包含的内容并不会发生响应式变化。
值得一提的是,如果 v-memo 指令设置的是 [](空数组),v-memo 指令就相当于 v-once 指令的作用,即只进行一次渲染处理。
上面描述过程的实现代码如下:

图 2 初始页面效果
当首次点击“count++”按钮时,count 值会实时更新渲染,如下图所示:

图 3 初次点击“count++”按钮后count值发生改变
当首次点击“update++”按钮时,update 值不会实时更新渲染,如下图所示:

图 4 初次点击“update++”按钮后update值未发生改变
再次点击“count++”按钮后 count 值和 update 值被统一渲染,如下图所示:

图 5 再次点击“count++”按钮后count值和update值发生改变
有时会出现网络延迟或异步操作的情况,导致模板中的插值表达式内容并不一定能够及时被编译解析,网页中则会出现一部分未被解析的插值表达式,我们可以理解为花屏状态。此时就可以利用 v-cloak 指令,将指令中包含的内容先进行隐藏,当全部内容被解析编译完以后再显示,这样可以提升用户体验。
需要注意的是,v-cloak 指令不能单独使用,需要配合样式来实现。
请思考下面代码的运行效果:
本节主要讲解 v-text、v-html、v-pre、v-once、v-memo、v-cloak 指令的相关知识。
Vue v-text和v-html指令
v-text 指令会渲染指令中的 value 属性,不管渲染的是什么内容,该指令都会将其渲染为纯文本后输出。如果 value 属性中带有 HTML 标签内容,那么页面中仍旧会显示带有标签的文本结果。v-html 指令和 v-text 指令类似,如果想对渲染内容进行 HTML 解析,就可以通过 v-html 指令实现。值得一提的是,该指令内部会用 innerHTML 的方式进行内容插入和显示,而 v-text 指令内部会用 innerText 的方式进行内容插入和显示。
下面在一个文件中分别使用 v-html 和 v-text 指令实现带链接的跳转功能,实现代码如下:
<span v-text="<a href=https://c.biancheng.net>点击链接跳转</a>"></span> <span v-html="<a href=https://c.biancheng.net>点击链接跳转</a>"></span>页面效果如下图所示。

Vue v-pre指令
v-pre 指令会跳过当前所在元素及其所有子元素的编译。假如定义了一个 message 响应式数据,我们想将插值表达式中的 message 字符串内容渲染在页面上,就可以利用 v-pre 指令实现,页面不会将 message 的结果值进行渲染、显示,而仅仅将 message 插值表达式的内容进行输出。
请思考下面代码的运行效果:
<div id="app"> <p v-pre>{{ message }}</p> </div> <script> const { createApp } = Vue createApp({ data() { return { message: 'Hello Vue3!', } }, }).mount('#app') </script>运行代码后,浏览器不会解析插值表达式,而是直接显示“{{message}}”。
Vue v-once指令
v-once 顾名思义就是只渲染一次。具体地说,由 v-once 指令包含的解析内容只会解析渲染一次。如果想要在首次渲染后修改 v-once 指令中的响应式数据内容,则会发现其不会出现任何改变。简单地说,在动态显示时,使用该指令后不会再更新对应的 data 数据。
请思考下面代码的运行效果:
<div id="app"> <p v-once>{{ message }}</p> <!-- 修改 message 后 p 标签的 message 内容不会发生改变 --> <button @click="message = 'hi Vue3!'">修改数据</button> </div> <script> const { createApp } = Vue createApp({ data() { return { message: 'Hello Vue3!', } }, }).mount('#app') </script>运行代码后,点击按钮数据不会发生任何改变。
Vue v-memo指令
v-memo 指令可以实现高效缓存,在指定依赖条件下进行模板编译。在非依赖条件下,Vue 则对 v-memo 指令包含的内容进行跳过编译处理。假如当前有两个响应式数据 count 和 update,但 v-memo 指令限制的数据是 count,那么只有在“count++”按钮被点击的情况下,v-memo 指令包含的内容才会实时更新渲染,而在“update++”按钮被点击的情况下,v-memo 指令包含的内容并不会发生响应式变化。
值得一提的是,如果 v-memo 指令设置的是 [](空数组),v-memo 指令就相当于 v-once 指令的作用,即只进行一次渲染处理。
上面描述过程的实现代码如下:
<div id="app"> <div v-memo="[count]"> <p>count: {{ count }}</p> <p>update: {{ update }}</p> </div> <button @click="count++">count++</button> <button @click="update++">update++</button> </div> <script> const { createApp } = Vue createApp({ data() { return { count: 18, update: 22, } }, }).mount('#app') </script>运行代码后,页面出现一个 count 值、一个 update 值和对应的两个按钮。初始页面效果如下图所示:

图 2 初始页面效果
当首次点击“count++”按钮时,count 值会实时更新渲染,如下图所示:

图 3 初次点击“count++”按钮后count值发生改变
当首次点击“update++”按钮时,update 值不会实时更新渲染,如下图所示:

图 4 初次点击“update++”按钮后update值未发生改变
再次点击“count++”按钮后 count 值和 update 值被统一渲染,如下图所示:

图 5 再次点击“count++”按钮后count值和update值发生改变
Vue v-cloak指令
v-cloak 指令用于隐藏尚未完成编译的 DOM 模板。有时会出现网络延迟或异步操作的情况,导致模板中的插值表达式内容并不一定能够及时被编译解析,网页中则会出现一部分未被解析的插值表达式,我们可以理解为花屏状态。此时就可以利用 v-cloak 指令,将指令中包含的内容先进行隐藏,当全部内容被解析编译完以后再显示,这样可以提升用户体验。
需要注意的是,v-cloak 指令不能单独使用,需要配合样式来实现。
请思考下面代码的运行效果:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>内置指令v-cloak</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script> <style> [v-cloak] { display: none; } </style> </head> <body> <!-- v-cloak 指令包含的内容会先隐藏,直到页面编译通过才显示 --> <div id="app"><div v-cloak>{{message}}</div></div> <script> const { createApp } = Vue createApp({ data() { return { message: 'Hello Vue3!', } }, }).mount('#app') </script> </body> </html>当出现网络延迟或异步操作时,页面会将内容先隐藏,直到编译通过才显示“Hello Vue3!”。