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

本文链接：https://blog.csdn.net/zimin1985/article/details/148106885

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 开发。