首页 > 编程笔记 > JavaScript笔记 阅读：79

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 指令的相关知识。

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！”。

相关文章