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

前言第2课已掌握Vue3应用的创建、挂载及单文件组件的基础结构本课将聚焦Vue3中最基础的页面渲染方式——插值表达式与文本指令理解不同文本渲染方式的使用规则与适用场景掌握基础数据到页面的渲染逻辑为后续动态数据展示打下基础。1. 插值表达式{{ }}的核心使用规则插值表达式是Vue3中最基础的文本渲染方式通过双大括号语法将组件数据绑定到页面是数据驱动视图的核心体现。1.1 基础语法template div !-- 基础使用渲染data中的普通数据 -- {{ message }} /div /template script export default { data() { return { message: Vue3插值表达式基础示例 } } } /script1.2 支持的语法类型插值表达式内部支持简单的JavaScript表达式可完成基础的运算、逻辑判断等操作template div !-- 算术运算 -- p1 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(); } } } /script1.3 核心规则与禁用场景仅支持单个表达式不支持语句如if、for循环、变量声明等不能在HTML属性中使用插值表达式需使用v-bind指令后续课程讲解插值表达式具有响应式特性当数据发生变化时页面会自动更新若数据为undefined或null插值表达式会渲染为空字符串。错误示例禁止使用!-- 错误使用语句而非表达式 -- {{ if (isShow) { return 文本 } }} !-- 错误在HTML属性中使用插值 -- div iditem-{{ id }}/div2. 文本渲染指令v-textv-text是Vue提供的文本渲染指令作用是将数据以纯文本形式渲染到指定元素中功能与插值表达式类似但使用方式不同。2.1 基础语法template !-- v-text指令绑定data中的message数据 -- div v-textmessage/div /template script export default { data() { return { message: v-text指令渲染的文本内容 } } } /script2.2 与插值表达式的核心区别特性插值表达式v-text渲染位置元素内容的任意位置覆盖元素的全部内容空白内容处理初始显示{{ }}闪显初始为空无闪显组合使用可与其他文本混合无法混合其他文本示例对比template !-- 插值表达式可混合其他文本 -- div前缀文本 {{ message }} 后缀文本/div !-- v-text覆盖全部内容无法混合 -- div v-textmessage这部分文本会被覆盖/div !-- 解决插值表达式闪显问题使用v-cloak配合样式 -- div v-cloak{{ message }}/div /template style /* 隐藏未编译的插值表达式 */ [v-cloak] { display: none; } /style3. HTML渲染指令v-htmlv-html用于将包含HTML标签的字符串以HTML形式渲染到页面而非纯文本需注意该指令的安全性风险。3.1 基础语法template !-- v-html渲染包含HTML标签的字符串 -- div v-htmlhtmlContent/div /template script export default { data() { return { htmlContent: h3 stylecolor: #42b983;包含HTML标签的内容/h3 } } } /script3.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).innerHTMLh3原生HTML/h3;Vue指令实现更简洁无需操作DOMtemplate div idtext-box v-texttextData/div div idhtml-box v-htmlhtmlData/div /template script export default { data() { return { textData: Vue文本, htmlData: h3Vue HTML/h3 } } } /script5. 综合案例多方式文本渲染对比template div classtext-render-demo h2文本渲染方式对比/h2 !-- 插值表达式 -- div classitem h4插值表达式/h4 p{{ baseText }}/p /div !-- v-text -- div classitem h4v-text/h4 p v-textbaseText/p /div !-- v-html -- div classitem h4v-html/h4 p v-htmlhtmlText/p /div /div /template script export default { data() { return { baseText: 基础文本内容, htmlText: span stylecolor: #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总结插值表达式{{ }}是基础文本渲染方式支持简单JS表达式可与其他文本混合但存在闪显问题v-text以纯文本形式渲染内容覆盖元素全部内容无闪显问题v-html可渲染HTML内容但存在XSS风险禁止渲染用户输入内容Vue指令统一以v-为前缀替代原生DOM操作使数据渲染逻辑更简洁、易维护。