Vue的模板语法是连接组件数据与DOM的桥梁，核心是声明式绑定——让开发者专注于“数据与视图如何关联”，而非手动操作DOM。
文本插值：最基础的数据绑定
文本插值是Vue中最直观的数据绑定方式，使用Mustache语法（双大括号{{ }}） 将组件数据插入到DOM中。
- 基本用法：
- <span>Message: {{ msg }}</span>
- 这里的{{ msg }}会被组件实例中msg属性的值替换，且当msg变化时，页面会自动更新。
- 特性：
- 双大括号会将数据解析为纯文本，即使数据包含HTML标签，也会被当作字符串显示（例如msg: '<strong>hello</strong>'会显示为<strong>hello</strong>，而非加粗文本）。
- 支持简单的JavaScript表达式，如{{ count + 1 }}、{{ isActive ? 'active' : 'inactive' }}，但不支持复杂语句（如if判断、循环）。
原始HTML：插入HTML片段的风险与用法
若需要将数据作为HTML片段插入（而非纯文本），需使用v-html指令，但需警惕安全风险。
方式 | 语法 | 效果 | 适用场景 |
文本插值 | {{ rawHtml }} | 解析为纯文本，HTML标签被转义 | 显示普通文本，避免XSS风险 |
v-html指令 | <span v-html="rawHtml"></span> | 解析为HTML，直接插入DOM | 渲染可信的HTML片段（如后台返回的富文本） |
- 关键警告：
- 动态渲染HTML可能导致XSS攻击（恶意脚本注入），因此：
- 仅对安全可信的内容使用v-html；
- 绝对禁止将用户输入的内容直接通过v-html渲染。
- Vue不支持用v-html拼接模板，组件才是UI复用的正确方式（模板需要编译优化，字符串拼接无法享受编译时检查）。
指令：赋予DOM响应式行为的特殊属性
指令是Vue提供的特殊属性（以v-为前缀），用于为DOM元素绑定响应式行为。例如v-html、v-bind等，核心作用是“让元素行为随数据变化而自动更新”。
- 指令的本质：是Vue编译器识别的“特殊标记”，告诉Vue“这个元素的某部分需要与数据建立关联，并在数据变化时执行特定操作”。
- 通用格式：v-指令名:参数="表达式"（如v-bind:id="dynamicId"中，id是参数，dynamicId是组件数据）。
Attribute绑定：v-bind的全面解析
双大括号无法用于HTML属性（attributes）中，此时需用v-bind指令建立属性与数据的响应式关联。
基础用法与简写
- 完整语法：v-bind:属性名="数据"，例如绑定元素的id：
- <div v-bind:id="dynamicId"></div>
- 当dynamicId变化时，元素的id会自动更新；若dynamicId为null或undefined，id属性会从元素中移除。
- 简写语法：:（冒号）替代v-bind:，这是开发中最常用的形式：
- <div :id="dynamicId"></div>
- 简写的优势是减少冗余代码，尤其在多个属性绑定时更清晰（如:class="cls" :style="sty"）。
同名简写（Vue 3.4+）
若属性名与绑定的数据名相同，可直接省略表达式，仅写属性名：
<!-- 等价于 :id="id" -->
<div :id></div>这与JavaScript对象的属性简写（{ id }等价于{ id: id }）逻辑一致，进一步简化代码。
布尔型Attribute绑定
布尔型属性（如disabled、checked）的特性是：存在即生效（值为true时显示属性，false时移除）。v-bind对这类属性有特殊处理：
<button :disabled="isButtonDisabled">Button</button>- 当isButtonDisabled为真值（true、非空字符串等）时，按钮会带disabled属性（禁用状态）；
- 当isButtonDisabled为假值（false、null等）时，disabled属性会被移除（按钮可用）。
动态绑定多个属性
若需绑定多个属性，可将属性名和值封装为一个对象，通过v-bind（不带参数）一次性绑定：
// 组件数据
const objectOfAttrs = {
id: 'container',
class: 'wrapper',
style: 'background-color: green'
} <!-- 等价于同时绑定id、class、style -->
<div v-bind="objectOfAttrs"></div>这种方式适合属性较多的场景，避免重复书写v-bind，提高代码可维护性。
核心对比：不同绑定方式的适用场景
绑定类型 | 语法 | 作用 | 注意事项 |
文本插值 | {{ data }} | 插入纯文本到DOM内容中 | 自动转义HTML，避免XSS |
原始HTML | v-html="html" | 插入HTML到DOM内容中 | 仅用于可信内容，禁止用户输入 |
Attribute绑定 | :attr="data" | 绑定HTML属性与数据 | 支持简写、布尔型属性特殊处理 |
总结：Vue模板语法的核心逻辑
Vue模板语法的设计围绕“响应式”和“简洁性”展开：
- 用{{ }}实现文本的简单绑定，用v-html处理HTML片段（需警惕安全风险）；
- 用v-bind（及简写:）实现属性绑定，通过灵活的语法（同名简写、多属性绑定）减少冗余；
- 所有绑定都是“响应式”的——数据变化时，DOM会自动更新，无需手动操作。
掌握这些基础后，后续学习指令（如v-if、v-for）和事件绑定（v-on）会更轻松。记住：模板语法的核心是“数据驱动视图”，让开发者从DOM操作中解放出来，专注于业务逻辑。