Vue3 模板语法知识点汇总
编程小白也能看懂的Vue3核心语法详解，用大白话解释每个知识点
Vue3的模板语法是构建用户界面的基础，它基于HTML语法扩展，让你可以声明式地将组件实例的数据绑定到呈现的DOM上。
下面将用简单易懂的方式解释Vue3的核心模板语法，每个知识点都配有通俗解释和示例代码。
1 插值语法 (Mustache)
在HTML中直接显示JavaScript数据的最简单方法。
使用双大括号{{ }}包裹变量名，Vue会自动替换为变量的值。
<!– 模板中 –>
<div>Hello, {{ name }}!</div>
// JavaScript中
data() {
return {
name: ‘小明’
}
}
<div>Hello, {{ name }}!</div>
// JavaScript中
data() {
return {
name: ‘小明’
}
}
效果展示
Hello, 小明!
💡 提示： 插值语法中也可以使用简单的JavaScript表达式，例如：{{ age + 1 }} 或 {{ name.split(”).reverse().join(”) }}
2 属性绑定 (v-bind)
用于动态绑定HTML元素的属性（如id, class, src等）。
简写方式是一个冒号:，例如:id="dynamicId"。
<!– 绑定一个属性 –>
<img :src=“imageUrl” />
<!– 动态绑定多个属性 –>
<div v-bind=“objectOfAttrs”></div>
// JavaScript中
data() {
return {
imageUrl: ‘path/to/image.jpg’,
objectOfAttrs: {
id: ‘container’,
class: ‘wrapper’
}
}
}
<img :src=“imageUrl” />
<!– 动态绑定多个属性 –>
<div v-bind=“objectOfAttrs”></div>
// JavaScript中
data() {
return {
imageUrl: ‘path/to/image.jpg’,
objectOfAttrs: {
id: ‘container’,
class: ‘wrapper’
}
}
}
效果展示
3 条件渲染 (v-if, v-else)
根据条件显示或隐藏元素。
v-if是”真实”的条件渲染，它会销毁和重建元素；v-show只是切换CSS的display属性。
<div v-if=“isVisible”>现在你看到我了</div>
<div v-else>现在你看不到我了</div>
<button @click=“isVisible = !isVisible”>切换显示</button>
// JavaScript中
data() {
return {
isVisible: true
}
}
<div v-else>现在你看不到我了</div>
<button @click=“isVisible = !isVisible”>切换显示</button>
// JavaScript中
data() {
return {
isVisible: true
}
}
效果展示
现在你看到我了
现在你看不到我了
4 列表渲染 (v-for)
用于循环渲染一组数据（数组或对象）。
需要为每项提供唯一的key属性，这样Vue才能高效地更新列表。
<!– 遍历数组 –>
<ul>
<li v-for=“(item, index) in items” :key=“index”>
{{ index + 1 }}. {{ item.text }}
</li>
</ul>
// JavaScript中
data() {
return {
items: [
{ id: 1, text: ‘学习Vue3’ },
{ id: 2, text: ‘掌握模板语法’ },
{ id: 3, text: ‘构建项目’ }
]
}
}
<ul>
<li v-for=“(item, index) in items” :key=“index”>
{{ index + 1 }}. {{ item.text }}
</li>
</ul>
// JavaScript中
data() {
return {
items: [
{ id: 1, text: ‘学习Vue3’ },
{ id: 2, text: ‘掌握模板语法’ },
{ id: 3, text: ‘构建项目’ }
]
}
}
效果展示
- 1. 学习Vue3
- 2. 掌握模板语法
- 3. 构建项目
5 事件处理 (v-on)
用于监听DOM事件，并在触发时执行JavaScript代码。
简写方式是一个@符号，例如@click="handleClick"。
<!– 内联事件处理器 –>
<button @click=“count++”>增加 {{ count }}</button>
<!– 方法事件处理器 –>
<button @click=“greet(‘小明’)”>打招呼</button>
// JavaScript中
data() {
return {
count: 0
}
},
methods: {
greet(name) {
alert(`你好, ${name}!`);
}
}
<button @click=“count++”>增加 {{ count }}</button>
<!– 方法事件处理器 –>
<button @click=“greet(‘小明’)”>打招呼</button>
// JavaScript中
data() {
return {
count: 0
}
},
methods: {
greet(name) {
alert(`你好, ${name}!`);
}
}
效果展示
6 表单绑定 (v-model)
在表单输入元素上创建双向数据绑定。
它会根据控件类型自动选取正确的方法来更新元素。
<!– 文本输入 –>
<input v-model=“message” placeholder=“输入内容” />
<p>输入的内容：{{ message }}</p>
<!– 复选框 –>
<input type=“checkbox” v-model=“checked” />
<label>是否选中：{{ checked }}</label>
// JavaScript中
data() {
return {
message: ”,
checked: false
}
}
<input v-model=“message” placeholder=“输入内容” />
<p>输入的内容：{{ message }}</p>
<!– 复选框 –>
<input type=“checkbox” v-model=“checked” />
<label>是否选中：{{ checked }}</label>
// JavaScript中
data() {
return {
message: ”,
checked: false
}
}
效果展示
输入的内容：{{ message }}
太棒了！你已完成Vue3模板语法的学习 👏