Vue 的模板语法不仅是"语法糖"，它是一整套声明式编程语言 ，能让你用 HTML 写出拥有响应式能力的页面。 这篇文章将在官方文档的基础上更进一步：不遗漏任何知识点，同时结合开发经验讲清楚每一个语法点"是什么"、"怎么用"、"有什么坑"。
一、基础插值语法：Vue 最核心的语法形式
📍
{{ }}
插值表达式
最基础的模板语法，展示变量值：
js
<span>{{ message }}</span>你可以在其中使用任意合法的 JavaScript 表达式：
js
<p>{{ count + 1 }}</p>
<p>{{ user.name.toUpperCase() }}</p>
<p>{{ items.length > 0 ? '有数据' : '空' }}</p>⚠️ 不能使用语句（如 if、for、赋值等）：
js
<!-- ❌ 错误 -->
{{ let a = 1 }}📍 HTML 插值：
v-html
用于将 HTML 字符串插入页面：
js
<p v-html="htmlContent"></p>
js
data() {
return {
htmlContent: '<strong style="color: red">红字</strong>'
}
}⚠️ 安全提醒：谨慎使用 v-html！不要渲染任何用户输入或外部内容，避免 XSS 攻击。
二、属性绑定语法：v-bind 的各种妙用
双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用
v-bind指令：
📍 动态绑定属性
js
<img v-bind:src="imgUrl" />
<!-- 简写 -->
<img :src="imgUrl" />支持任意属性名：href、id、class、style、disabled......
📍 绑定布尔值
Vue 会根据布尔值自动添加或移除该属性：
js
<button :disabled="isDisabled">提交</button>📍 动态绑定 class
js
<div :class="{ active: isActive, error: hasError }"></div>也可以使用数组形式：
ruby
<div :class="['base', dynamicClass]"></div>📍 绑定内联样式
ruby
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>也支持绑定 style 对象：
css
styleObject: {
color: 'red',
backgroundColor: 'black'
}三、指令系统：Vue 模板语法的核心机制
所有指令都以 v- 开头，告诉 Vue 这个属性是 Vue 的语法，而不是 HTML 标准。
📍 v-if / v-else-if / v-else：条件渲染
xml
<p v-if="score > 90">优秀</p>
<p v-else-if="score > 60">及格</p>
<p v-else>不及格</p>⚠️ Vue 会彻底"移除"不满足条件的元素，而不是隐藏它。
📍 v-show：显示/隐藏元素
ini
<p v-show="isVisible">我可以显示或隐藏</p>和 v-if 不同的是：
✅ v-show 是通过设置 display: none 来隐藏元素
✅ 元素始终存在于 DOM 中，适用于频繁切换场景
📍 v-for：列表渲染
css
<ul>
<li v-for="(item, index) in items" :key="item.id">{{ index }} - {{ item.name }}</li>
</ul>可遍历：
-
数组
-
字符串
-
对象（使用 Object.entries）
-
数字（生成范围）
🔑 建议始终写 :key，提高性能 & 避免渲染异常。
📍 v-on：事件监听
xml
<button v-on:click="handleClick">点击</button>
<!-- 简写 -->
<button @click="handleClick">点击</button>可以传参：
ini
<button @click="addToCart(product.id)">添加</button>📍 v-model：表单双向绑定
ini
<input v-model="searchText" />支持多种表单控件：
-
<input type="text"> -
<textarea> -
<select> -
<input type="checkbox"> -
<input type="radio">
📌 可用修饰符：
| 修饰符 | 含义 |
|---|---|
| .lazy | 在 blur 时更新数据（不是每次输入） |
| .number | 自动转为数字 |
| .trim | 去除首尾空格 |
四、动态参数 & 动态事件名
xml
<!-- 动态绑定属性名 -->
<a v-bind:[attrName]="value">链接</a>
<!-- 动态事件名 -->
<button v-on:[eventName]="handler">点击</button>⚠️ 规则限制：
-
\] 中必须是字符串或能返回字符串的表达式
五、修饰符机制：让模板行为更"贴合业务"
📍 v-on 事件修饰符
xml
<!-- 阻止默认事件 -->
<form @submit.prevent="submitForm"></form>
<!-- 阻止事件冒泡 -->
<button @click.stop="onClick"></button>
<!-- 只触发一次 -->
<button @click.once="onClick"></button>常用修饰符：
| 修饰符 | 含义 |
|---|---|
| .stop | 阻止事件冒泡 |
| .prevent | 阻止默认行为 |
| .self | 只响应自身事件 |
| .once | 只触发一次 |
| .capture | 捕获阶段触发 |
📍 v-model 修饰符
ini
<input v-model.trim="name" />
<input v-model.number="age" />六、模板中使用 JavaScript 表达式的限制与建议
✅ 支持的表达式类型：
-
变量引用
-
方法调用
-
三元表达式
-
数组、对象访问
-
算术 & 逻辑运算
❌ 不支持的语法：
- 变量声明 (let a = 1)
- 流程控制（if, for）
- 多条语句
七、最佳实践 & 常见错误汇总
| 场景 | 推荐写法 | 常见错误 |
|---|---|---|
| 条件渲染 | v-if="isOk" | 不加 v-else 顺序错误 |
| 表单绑定 | v-model.number="age" | 忘了加 .number 导致类型不对 |
| 动态 class | :class="{ active: isActive }" | 写成字符串拼接 |
| DOM 操作 | 尽量用 Vue 控制 DOM | 不建议直接操作 DOM 元素 |
🧭 最后总结：Vue 模板语法的六大核心能力
- 插值表达式：展示数据 {{ msg }}
- 属性绑定：:href="url" / :style="..."
- 指令系统：v-if, v-for, v-model
- 事件监听：@click="doSomething"
- 动态参数：:['href'] / @['click']
- 修饰符机制：.prevent .trim .once
🧑💻 写给开发者的几句话：
- 模板语法不只是"语法糖"，而是 Vue 响应式系统的"语言接口"
- 模板中逻辑越少越好，建议将复杂表达式抽到 computed 或 methods
- 不管多复杂，最终都要回到"数据驱动视图"的核心理念
❤️ 如果你喜欢这样的讲解风格
欢迎关注我，持续输出 Vue相关的文章