Vue3 模板语法
关键要点
- Vue3 模板语法基于 HTML，允许声明式地将数据绑定到 DOM。
- 包括文本插值、指令（如 v-if、v-for）、属性绑定和事件处理。
- 支持 JavaScript 表达式，适合动态渲染。
Vue3 模板语法讲解
什么是模板语法
Vue3 的模板语法让你用简单的 HTML 写法描述 UI 如何基于数据变化。框架会自动更新视图，无需手动操作 DOM，适合初学者和复杂项目。
文本插值
用 {{ }} 显示数据，例如 <p>{{ message }}</p>，message 变化时内容自动更新。支持表达式，如 {{ message.split('').reverse().join('') }}。
常用指令
- 条件渲染：
v-if显示或隐藏元素，如<div v-if="isVisible">显示</div>。 - 列表渲染：
v-for循环数据，如<li v-for="item in items">{{ item }}</li>。 - 事件处理：用
@click="handleClick"绑定点击事件。 - 双向绑定：
v-model让表单输入和数据同步，如<input v-model="message">。
属性绑定
用 :src="imageUrl" 动态绑定属性，imageUrl 变化时自动更新。
这些功能让开发更简单，适合各种场景。更多详情见 Vue.js 官方文档 – 模板语法。
详细报告
Vue3 的模板语法是其核心功能之一，基于 HTML 的声明式语法，允许开发者将数据绑定到 DOM，并通过响应式系统自动更新视图。以下是详细讲解，涵盖所有相关内容。
1. 模板语法概述
Vue3 使用基于 HTML 的模板语法，使开发者能够声明式地将组件实例的数据绑定到呈现的 DOM 上。所有 Vue 模板都是合法的 HTML，可以被浏览器和 HTML 解析器解析。在底层，Vue 会将模板编译成高度优化的 JavaScript 代码，结合响应系统，智能计算最小代价的 DOM 更新。
- 工作原理：Vue3 使用虚拟 DOM 和
Proxy实现的响应式系统，相比 Vue2 性能提升 20-50%，尤其在复杂场景下表现优异。 - 替代方案：除了模板语法，还可以直接使用渲染函数和 JSX，但模板语法提供编译时优化，适合大多数场景。
2. 文本插值
文本插值是模板语法的基础，使用 Mustache 语法（双大括号 {{ }}）来显示数据。例如：
<p>{{ message }}</p>当 message 的值改变时，DOM 会自动更新。支持 JavaScript 表达式，例如：
- 算术运算：
{{ number + 1 }} - 三元运算符：
{{ ok ? 'YES' : 'NO' }} - 方法调用：
{{ getReverseMessage() }}
注意：文本插值仅支持表达式，不支持语句（如 var a = 1），且会自动转义 HTML，避免 XSS 攻击。
3. 指令
指令是带有 v- 前缀的特殊属性，用于在模板中添加响应式行为。以下是常见指令的详细说明：
| 指令 | 功能 | 示例 |
|---|---|---|
v-text | 更新元素的 textContent，覆盖现有内容，适合纯文本显示。 | <span v-text="msg"></span> 等同于 <span>{{ msg }}</span> |
v-html | 更新元素的 innerHTML，支持渲染 HTML 字符串，需注意 XSS 风险。 | <div v-html="rawHtml"></div>，如 <div v-html="'<b>加粗</b>'"></div> |
v-show | 通过 CSS display 控制显示，适合频繁切换。 | <div v-show="isVisible">显示内容</div> |
v-if | 条件渲染，条件为假时销毁元素，适合不频繁切换。 | <div v-if="isVisible">显示内容</div> |
v-else | 与 v-if 配合，表示 v-if 为假时的替代内容，无表达式。 | <div v-else>隐藏内容</div> |
v-else-if | 与 v-if 配合，表示多个条件判断。 | <div v-else-if="type === 'B'">B</div> |
v-for | 循环渲染数组或对象，建议用 :key 优化性能。 | <li v-for="item in items" :key="item.id">{{ item.name }}</li> |
v-on | 绑定事件监听器，简写为 @，支持修饰符（如 .stop、.prevent）。 | <button @click="handleClick">点击</button> |
v-model | 实现表单双向绑定，语法糖为 v-bind:value 和 v-on:input 组合。 | <input v-model="message"> |
v-once | 仅渲染一次，之后不再更新，适合静态内容，优化性能。 | <span v-once>{{ message }}</span> |
v-pre | 跳过编译，保留 Vue 语法，优化性能。 | <span v-pre>{{ message }}</span> |
v-cloak | 在未编译前隐藏，需配合 CSS [v-cloak] { display: none }，避免闪烁。 | <div v-cloak>{{ message }}</div> |
v-memo | 缓存模板子树，需提供依赖数组，优化大型列表性能（Vue3.2+）。 | <div v-memo="[valueA, valueB]">...</div> |
注意：
v-if和v-for优先级：v-for优先于v-if，建议避免在同一元素上同时使用，优先用计算属性过滤。v-model支持修饰符，如.lazy（延迟更新）、.number（转换为数字）、.trim（去除首尾空格）。
4. 属性绑定
使用 v-bind (简写为 :) 动态绑定 HTML 属性。例如：
<img :src="imageUrl" alt="图片">当 imageUrl 变化时，src 属性自动更新。支持以下场景：
- 基本属性：如
src、href。 - 类名绑定：对象语法（如
:class="{ active: isActive }"）或数组语法。 - 样式绑定：对象语法（如
:style="{ color: 'red', fontSize: '30px' }"）或数组语法。 - 动态参数：用方括号绑定动态属性名，如
<a :[attributeName]="url">链接</a>，值必须为字符串或null。
5. 事件处理
使用 v-on (简写为 @) 绑定事件监听器。例如：
<button @click="handleClick">点击</button>支持事件修饰符，如：
.stop：阻止事件冒泡。.prevent：阻止默认行为。.capture：使用事件捕获模式。.self：仅在元素本身触发时调用。.once：只触发一次。.passive：标记为被动监听器（用于滚动事件）。
6. 条件渲染
- v-if：条件渲染，条件为假时元素被销毁。例如：
<div v-if="isVisible">显示内容</div>
<div v-else>隐藏内容</div>- v-else-if：支持多条件判断，如
<div v-else-if="type === 'B'">B</div>。 - v-show：通过 CSS
display控制显示，适合频繁切换。例如<div v-show="isVisible">显示内容</div>。
7. 列表渲染
使用 v-for 循环渲染数据。例如：
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>- 支持类型：数组（如
"item in items"）、对象（如"value in object"）、数字范围（如v-for="n in 10"）。 - key 属性：建议使用
:key优化性能，确保 Vue 高效更新 DOM。 - 更新检测：数组方法如
push()、pop()等会触发更新；filter()、concat()等需重新赋值。
8. 其他特性
- JavaScript 表达式：模板支持表达式，如
{{ number + 1 }}或{{ ok ? 'YES' : 'NO' }}，但仅限单表达式，不支持语句。 - 安全性：
v-html需谨慎使用，避免 XSS 攻击；文本插值{{ }}会自动转义 HTML。 - 性能优化：
v-once和v-memo减少不必要的更新，适合静态内容或大型列表。
9. 最佳实践
- 避免直接 DOM 操作，优先用
:style或:class。 - 使用
template标签包裹v-if或v-for，避免多余的 DOM 元素。 - 自定义指令（如
v-focus）适合复杂 DOM 操作，但优先用内置指令。
10. 学习资源
以下是学习 Vue3 模板语法的推荐资源：
总结
Vue3 的模板语法提供了丰富的功能，涵盖文本插值、指令、属性绑定、事件处理、条件渲染和列表渲染等。通过理解这些语法，开发者可以高效构建动态、响应式的用户界面。