Vue3 系列教程（三）插值表达式与常用文本指令

前言

第2课已掌握Vue3应用的创建、挂载及单文件组件的基础结构，本课将聚焦Vue3中最基础的页面渲染方式——插值表达式与文本指令，理解不同文本渲染方式的使用规则与适用场景，掌握基础数据到页面的渲染逻辑，为后续动态数据展示打下基础。

1. 插值表达式：{{ }}的核心使用规则

插值表达式是Vue3中最基础的文本渲染方式，通过双大括号语法将组件数据绑定到页面，是数据驱动视图的核心体现。

1.1 基础语法

<template> <div> <!-- 基础使用：渲染data中的普通数据 --> {{ message }} </div> </template> <script> export default { data() { return { message: 'Vue3插值表达式基础示例' } } } </script>

1.2 支持的语法类型

插值表达式内部支持简单的JavaScript表达式，可完成基础的运算、逻辑判断等操作：

<template> <div> <!-- 算术运算 --> <p>1 + 2 = {{ 1 + 2 }}</p> <!-- 三元表达式 --> <p>{{ isShow ? '显示文本' : '隐藏文本' }}</p> <!-- 字符串拼接 --> <p>{{ 'Hello ' + name }}</p> <!-- 调用方法（需在methods中定义） --> <p>{{ formatText(message) }}</p> </div> </template> <script> export default { data() { return { isShow: true, name: 'Vue3', message: '原始文本' } }, methods: { formatText(text) { return text.toUpperCase(); } } } </script>

1.3 核心规则与禁用场景

仅支持单个表达式，不支持语句（如if、for循环）、变量声明等；
不能在HTML属性中使用插值表达式，需使用v-bind指令（后续课程讲解）；
插值表达式具有响应式特性：当数据发生变化时，页面会自动更新；
若数据为undefined或null，插值表达式会渲染为空字符串。

错误示例（禁止使用）：

<!-- 错误：使用语句而非表达式 --> {{ if (isShow) { return '文本' } }} <!-- 错误：在HTML属性中使用插值 --> <div id="item-{{ id }}"></div>

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

v-text是Vue提供的文本渲染指令，作用是将数据以纯文本形式渲染到指定元素中，功能与插值表达式类似，但使用方式不同。

2.1 基础语法

<template> <!-- v-text指令绑定data中的message数据 --> <div v-text="message"></div> </template> <script> export default { data() { return { message: 'v-text指令渲染的文本内容' } } } </script>

2.2 与插值表达式的核心区别

特性	插值表达式	v-text
渲染位置	元素内容的任意位置	覆盖元素的全部内容
空白内容处理	初始显示{{ }}（闪显）	初始为空，无闪显
组合使用	可与其他文本混合	无法混合其他文本

示例对比：

<template> <!-- 插值表达式：可混合其他文本 --> <div>前缀文本 {{ message }} 后缀文本</div> <!-- v-text：覆盖全部内容，无法混合 --> <div v-text="message">这部分文本会被覆盖</div> <!-- 解决插值表达式闪显问题：使用v-cloak（配合样式） --> <div v-cloak>{{ message }}</div> </template> <style> /* 隐藏未编译的插值表达式 */ [v-cloak] { display: none; } </style>

3. HTML渲染指令：v-html

v-html用于将包含HTML标签的字符串以HTML形式渲染到页面，而非纯文本，需注意该指令的安全性风险。

3.1 基础语法

<template> <!-- v-html渲染包含HTML标签的字符串 --> <div v-html="htmlContent"></div> </template> <script> export default { data() { return { htmlContent: '<h3 style="color: #42b983;">包含HTML标签的内容</h3>' } } } </script>

3.2 核心注意事项

v-html会覆盖元素的所有内容，且无法与插值表达式混合使用；
安全性风险：绝对不要使用v-html渲染用户输入的内容（如评论、表单输入），否则可能导致XSS攻击；
v-html不支持Vue模板语法：渲染的HTML中不会解析Vue的插值、指令等语法；
性能差异：v-html的渲染性能低于v-text和插值表达式，非必要场景不建议使用。

4. Vue指令的通用规范

Vue指令是带有v-前缀的特殊HTML属性，遵循统一的使用规范，是Vue模板语法的核心组成部分。

4.1 核心规范

指令前缀固定为v-，如v-text、v-html、v-bind；
指令的值为JavaScript表达式，需绑定到组件的响应式数据；
指令可附加修饰符（后续课程讲解），用于扩展指令功能；
指令作用于DOM元素，替代原生DOM操作，无需手动修改innerText、innerHTML。

4.2 与原生DOM操作的对比

原生JS实现文本/HTML渲染：

// 原生JS设置文本document.getElementById('text-box').innerText='原生文本';// 原生JS设置HTMLdocument.getElementById('html-box').innerHTML='<h3>原生HTML</h3>';

Vue指令实现（更简洁，无需操作DOM）：

<template> <div id="text-box" v-text="textData"></div> <div id="html-box" v-html="htmlData"></div> </template> <script> export default { data() { return { textData: 'Vue文本', htmlData: '<h3>Vue HTML</h3>' } } } </script>

5. 综合案例：多方式文本渲染对比

<template> <div class="text-render-demo"> <h2>文本渲染方式对比</h2> <!-- 插值表达式 --> <div class="item"> <h4>插值表达式：</h4> <p>{{ baseText }}</p> </div> <!-- v-text --> <div class="item"> <h4>v-text：</h4> <p v-text="baseText"></p> </div> <!-- v-html --> <div class="item"> <h4>v-html：</h4> <p v-html="htmlText"></p> </div> </div> </template> <script> export default { data() { return { baseText: '基础文本内容', htmlText: '<span style="color: #e63946;">包含HTML标签的文本</span>' } } } </script> <style scoped> .text-render-demo { padding: 20px; border: 1px solid #eee; border-radius: 8px; } .item { margin: 10px 0; padding: 10px; background: #f8f9fa; border-radius: 4px; } </style>