从零基础到最佳实践：Vue.js 系列（2/10）：《模板语法与数据绑定》

Vue.js 模板语法与数据绑定：从基础到实践

• 关键点
  • Vue.js 的模板语法使用 HTML 结合特殊指令（如 v-bind、v-on），实现动态界面。
  • 插值（{{ }}）显示数据，指令控制 DOM 行为，双向绑定简化表单交互。
  • 条件渲染（v-if/v-show）和列表渲染（v-for）是构建动态 UI 的核心工具。
  • 截至 2025 年 5 月，Vue 3 的 Composition API 和 defineModel() 增强了开发体验。

什么是模板语法？

Vue.js 的模板语法基于 HTML，允许开发者通过简单的语法将数据绑定到界面。使用双大括号 {{ }} 显示数据，指令（如 v-bind）动态更新 DOM 属性，事件处理（v-on）响应用户操作。

数据绑定如何工作？

数据绑定让界面与数据保持同步。v-model 实现双向绑定，适合表单输入；v-if 和 v-for 分别控制条件显示和列表渲染。这些功能让开发者无需手动操作 DOM。

实际应用

这些技术可用于搜索框、动态列表、切换显示等场景。例如，显示用户列表或实时更新输入内容。

下一步

通过本文，你将学会使用 Vue.js 的模板语法和数据绑定，构建交互式界面。后续文章将深入探讨组件开发。

---

欢迎继续我们的 Vue.js 学习之旅！在上一篇文章中，我们搭建了开发环境并了解了 Vue.js 的 MVVM 模式和响应式原理。本文是系列的第二篇，将聚焦于 模板语法与数据绑定，这是 Vue.js 构建动态用户界面的核心。通过插值、指令、事件处理、条件渲染、列表渲染和双向绑定，你将学会如何让界面随数据变化而更新。我们将以轻松、易懂的语言，结合详细的代码示例和实际应用场景，带你从零基础迈向熟练开发者。基于 2025 年 5 月的 Vue 3（版本 3.5.13），本文使用 Composition API 和最新特性（如 defineModel()）。

1. 模板语法简介

Vue.js 的模板语法基于标准 HTML，结合特殊的指令和插值语法，让开发者可以声明式地将数据绑定到 DOM。模板会被编译为高效的 JavaScript 代码，与 Vue 的响应式系统结合，实现数据变化时自动更新界面。

核心特性：

• 插值：使用 {{ }} 显示数据。
• 指令：以 v- 开头的属性，如 v-bind、v-on，控制 DOM 行为。
• 响应式：数据变化触发视图更新，无需手动操作 DOM。

2. 插值（Interpolation）

插值是 Vue.js 中最简单的数据绑定方式，用于在模板中显示文本内容。最常用的方法是 Mustache 语法（双大括号 {{ }}）。

<template><div><p>欢迎，{{ userName }}！</p><button @click="changeName">更改名字</button></div>
</template><script setup>
import { ref } from 'vue';const userName = ref('张伟');function changeName() {userName.value = '李娜';
}
</script>

说明：

• {{ userName }} 显示 userName 的值（初始为“张伟”）。
• 点击按钮调用 changeName，更新 userName，界面自动显示“李娜”。
• 插值适用于文本内容，不能用于 HTML 属性（需用 v-bind）。

实际应用：

• 显示用户个人信息，如用户名或欢迎消息。
• 动态更新通知或状态文本。

注意：

• 插值内容会被转义，防止 XSS 攻击。若需渲染 HTML，使用 v-html（仅限可信内容）。

3. 指令（Directives）

指令是 Vue.js 模板中的特殊属性，以 v- 开头，用于动态控制 DOM 行为。常见指令包括：

• v-bind：绑定 HTML 属性。
• v-on：监听事件。
• v-if/v-show：条件渲染。
• v-for：列表渲染。
• v-model：双向绑定。

示例（绑定属性）：

<template><div><img :src="imageUrl" alt="风景"><p :class="{ active: isActive }">动态样式</p></div>
</template><script setup>
import { ref } from 'vue';const imageUrl = ref('https://example.com/image.jpg');
const isActive = ref(true);
</script><style scoped>
.active {color: blue;
}
</style>

说明：

• :src="imageUrl" 是 v-bind:src 的简写，动态绑定图片 URL。
• :class="{ active: isActive }" 根据 isActive 动态应用 CSS 类。
• 指令支持动态参数，如 :attr="value"。

实际应用：

• 动态设置图片、链接或样式。
• 根据用户状态切换 UI 元素。

4. 事件处理（v-on）

v-on 指令用于监听 DOM 事件，如点击、输入或鼠标移动。它的简写是 @。

示例：

<template><div><p>点击次数：{{ count }}</p><button @click="increment">点击我</button></div>
</template><script setup>
import { ref } from 'vue';const count = ref(0);function increment() {count.value++;
}
</script>

说明：

• @click="increment" 绑定点击事件，调用 increment 函数。
• 每次点击，count 增加，界面自动更新。

动态事件：
支持动态事件名，如 @[eventName]="handler"，适用于根据条件切换事件类型。

实际应用：

• 实现按钮点击计数器。
• 触发表单提交或导航。

5. 条件渲染（v-if / v-show）

条件渲染控制元素是否显示，Vue.js 提供 v-if 和 v-show 两种方式：

• v-if：根据条件添加或移除 DOM 元素，适合不频繁切换的场景。
• v-show：通过 CSS display 属性切换显示，适合频繁切换的场景。

示例：

<template><div><p v-if="isLoggedIn">欢迎回来！</p><p v-else>请登录</p><p v-show="showDetails">详细信息</p><button @click="toggleLogin">切换登录状态</button><button @click="toggleDetails">切换详细信息</button></div>
</template><script setup>
import { ref } from 'vue';const isLoggedIn = ref(false);
const showDetails = ref(true);function toggleLogin() {isLoggedIn.value = !isLoggedIn.value;
}function toggleDetails() {showDetails.value = !showDetails.value;
}
</script>

说明：

• v-if="isLoggedIn" 根据 isLoggedIn 显示不同内容。
• v-show="showDetails" 切换 display 属性，元素始终存在于 DOM。

实际应用：

• 显示登录/未登录状态。
• 切换详细信息面板。

v-if vs v-show：

特性	v-if	v-show
渲染方式	添加/移除 DOM 元素	切换 CSS display 属性
性能	初始渲染慢，切换开销大	初始渲染快，切换开销小
适用场景	不频繁切换	频繁切换

6. 列表渲染（v-for）

v-for 指令用于基于数组或对象渲染列表，是构建动态 UI 的核心工具。

示例（数组渲染）：

<template><ul><li v-for="item in items" :key="item.id">{{ item.name }}</li></ul>
</template><script setup>
import { ref } from 'vue';const items = ref([{ id: 1, name: '苹果' },{ id: 2, name: '香蕉' },{ id: 3, name: '樱桃' }
]);
</script>

说明：

• v-for="item in items" 遍历 items 数组，item 是每个元素的别名。
• :key="item.id" 提供唯一标识，帮助 Vue 优化渲染。

对象渲染：

<template><ul><li v-for="(value, key, index) in user" :key="index">{{ index }}. {{ key }}: {{ value }}</li></ul>
</template><script setup>
import { reactive } from 'vue';const user = reactive({name: '张伟',age: 30,city: '上海'
});
</script>

说明：

• v-for="(value, key, index) in user" 遍历对象属性，value 是值，key 是属性名，index 是索引。
• 顺序基于 Object.keys()，可能因 JavaScript 引擎而异。

实际应用：

• 显示商品列表或用户表格。
• 渲染嵌套菜单或树形结构。

注意：

• 始终提供 :key，优先使用唯一 ID，避免使用索引。
• 不要在同一元素上同时使用 v-if 和 v-for，优先级为 v-if > v-for。

7. 双向绑定（v-model）

v-model 提供双向数据绑定，适合表单输入场景，自动同步输入值和数据。

示例（表单输入）：

<template><div><input v-model="searchText" placeholder="输入搜索内容"><p>搜索内容：{{ searchText }}</p></div>
</template><script setup>
import { ref } from 'vue';const searchText = ref('');
</script>

说明：

• v-model="searchText" 将输入框的值与 searchText 绑定。
• 用户输入会更新 searchText，反之亦然。

组件双向绑定（Vue 3.4+）：

<template><input v-model="model" placeholder="自定义输入">
</template><script setup>
import { defineModel } from 'vue';const model = defineModel();
</script>

<template><div><CustomInput v-model="inputValue" /><p>输入值：{{ inputValue }}</p></div>
</template><script setup>
import { ref } from 'vue';
import CustomInput from './CustomInput.vue';const inputValue = ref('Hello');
</script>

说明：

• defineModel() 创建一个 ref，与父组件的 v-model 同步。
• 适用于自定义表单组件，如输入框或选择器。

实际应用：

• 实时搜索框，输入时动态过滤列表。
• 表单编辑，同步用户输入到数据模型。

8. 实际应用场景

以下是模板语法和数据绑定的实际应用：

• 搜索框：使用 v-model 绑定输入，结合 v-for 动态显示过滤结果。
• 动态导航：用 v-if 和 v-show 根据用户权限显示菜单。
• 商品列表：用 v-for 渲染商品，结合 v-bind 动态设置图片和价格。
• 交互按钮：用 v-on 响应用户点击，更新界面状态。

9. 最佳实践

实践	描述
使用简写语法	使用 : 代替 v-bind，@ 代替 v-on，提高代码简洁性。
提供唯一 key	在 v-for 中始终使用 :key，优先使用唯一 ID。
选择合适的条件渲染	频繁切换用 v-show，不频繁用 v-if。
避免 XSS 风险	仅对可信内容使用 v-html，避免用户输入直接渲染。
优化双向绑定	在组件中使用 defineModel()（Vue 3.4+）简化 v-model 实现。

10. 2025 年趋势

截至 2025 年 5 月，Vue 3 是主流框架，Composition API 成为首选开发方式。defineModel()（Vue 3.4+）简化了组件双向绑定，Vite 逐渐取代 Vue CLI 成为主流构建工具。模板语法和数据绑定仍是 Vue.js 的核心，广泛应用于动态 UI 开发。

11. 总结

本文详细介绍了 Vue.js 的模板语法和数据绑定，包括插值、指令、事件处理、条件渲染、列表渲染和双向绑定。通过这些技术，你可以轻松构建交互式界面。下一篇文章将探讨组件开发，包括定义、注册和通信，带你迈向模块化开发。