Vue.js 模板语法（保姆级教程）

Vue.js 模板语法：从零开始掌握前端视图层的核心

Vue.js 作为目前最流行的前端框架之一，其核心优势之一就是强大的模板语法。它让开发者能够以声明式的方式编写界面，而无需手动操作 DOM。对于初学者来说，理解 Vue.js 模板语法是进入 Vue 生态的第一步。它不仅直观易懂，而且功能强大，能高效地实现数据与视图的同步更新。

想象一下，你正在设计一个待办事项列表。传统方式需要你手动写 document.getElementById 去获取元素，再通过 innerHTML 设置内容。而使用 Vue.js 模板语法，你只需在模板中写 {{ todo.title }}，数据变了，页面自动更新。这种“所见即所得”的体验，正是 Vue.js 模板语法的魅力所在。

在接下来的内容中，我们将从基础语法开始，逐步深入到条件渲染、列表渲染、事件处理等核心功能，帮助你真正掌握 Vue.js 模板语法的精髓。

插值表达式：让数据“活”在页面上

Vue.js 模板语法最基础也最常用的功能就是插值表达式，用双大括号 {{ }} 包裹表达式。它能将 Vue 实例中的数据动态地渲染到页面上。

<div id="app">
  <p>{{ message }}</p>
</div>

// Vue 3.0 的创建方式
import { createApp } from 'vue'

const app = createApp({
  data() {
    return {
      message: 'Hello Vue.js!'
    }
  }
})

app.mount('#app')

注释说明：

{{ message }} 是一个插值表达式，它会将 data 中 message 的值渲染到页面上。

当 message 的值改变时，页面会自动更新，无需手动操作 DOM。

插值表达式支持基本的 JavaScript 表达式，如 {{ message.split('').reverse().join('') }}，但不建议在模板中写复杂逻辑，应尽量在 computed 或 methods 中处理。

这种“数据驱动视图”的模式，让开发效率大幅提升。你只需关心数据本身，Vue 会自动处理视图的更新。

条件渲染：根据数据控制元素的显示与隐藏

在实际开发中，我们经常需要根据某些条件来决定某个元素是否显示。Vue 提供了 v-if、v-else 和 v-show 指令来实现条件渲染。

使用 v-if 控制元素的创建与销毁

<div id="app">
  <p v-if="isLoggedIn">欢迎回来，用户！</p>
  <p v-else>请先登录。</p>
</div>

const app = createApp({
  data() {
    return {
      isLoggedIn: false // 初始状态为未登录
    }
  }
})

app.mount('#app')

注释说明：

v-if="isLoggedIn" 会根据 isLoggedIn 的布尔值决定是否渲染该元素。

如果为 true，则渲染 <p> 标签；如果为 false，则完全不渲染。

v-else 必须紧跟在 v-if 后面，表示“否则”的情况。

v-if 是“真正”的条件渲染，元素在条件为假时根本不会出现在 DOM 中。

使用 v-show 控制元素的显示与隐藏

<div id="app">
  <p v-show="isVisible">这个段落会显示或隐藏，但不会被移除。</p>
</div>

const app = createApp({
  data() {
    return {
      isVisible: true
    }
  }
})

app.mount('#app')

注释说明：

v-show 通过修改 display: none 样式来控制显示与隐藏。

即使条件为 false，元素依然存在于 DOM 中，只是不可见。

适合频繁切换的场景，性能优于 v-if，因为避免了 DOM 的创建与销毁。

小贴士：

用 v-if 处理“是否需要显示”的场景，如登录状态判断。

用 v-show 处理“频繁切换”的场景，如模态框、选项卡等。

列表渲染：用 v-for 遍历数据并生成 DOM

在展示列表数据时，v-for 指令是必备工具。它能根据数组或对象生成一组元素。

遍历数组：创建待办事项列表

<div id="app">
  <ul>
    <li v-for="item in todos" :key="item.id">
      {{ item.text }}
    </li>
  </ul>
</div>

const app = createApp({
  data() {
    return {
      todos: [
        { id: 1, text: '学习 Vue.js' },
        { id: 2, text: '完成项目需求' },
        { id: 3, text: '写博客文章' }
      ]
    }
  }
})

app.mount('#app')

注释说明：

v-for="item in todos" 表示遍历 todos 数组，item 是当前项。

:key="item.id" 是必需的，Vue 需要通过 key 来追踪每个节点的身份，提升渲染效率。

key 必须是唯一值，推荐使用数据本身的唯一标识（如 ID），避免使用索引。

遍历对象：显示用户信息

<div id="app">
  <div v-for="(value, key, index) in user" :key="key">
    <span>{{ key }}: {{ value }}</span>
  </div>
</div>

const app = createApp({
  data() {
    return {
      user: {
        name: '张三',
        age: 25,
        city: '北京'
      }
    }
  }
})

app.mount('#app')

注释说明：

v-for="(value, key, index) in user" 中，value 是属性值，key 是属性名，index 是索引。

适用于展示对象的键值对信息，如用户资料页。

事件处理：让页面“动”起来

用户与页面的交互离不开事件处理。Vue 提供了 v-on 指令（简写为 @）来绑定事件。

基础事件绑定

<div id="app">
  <button @click="increment">点击加 1</button>
  <p>当前计数：{{ count }}</p>
</div>

const app = createApp({
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      // 点击按钮时，count 增加 1
      this.count++
    }
  }
})

app.mount('#app')

注释说明：

@click="increment" 绑定了点击事件，调用 methods 中定义的 increment 方法。

this.count++ 使用 this 访问当前实例的数据。

methods 中的方法可以访问 data 中的数据，是处理逻辑的核心区域。

传递参数与事件修饰符

<div id="app">
  <!-- 传递参数 -->
  <button @click="greet('你好')">打招呼</button>

  <!-- 使用事件修饰符 -->
  <form @submit.prevent="submitForm">
    <input type="text" v-model="inputText" />
    <button type="submit">提交</button>
  </form>
</div>

const app = createApp({
  data() {
    return {
      inputText: ''
    }
  },
  methods: {
    greet(msg) {
      alert(msg)
    },
    submitForm() {
      alert('表单已提交：' + this.inputText)
    }
  }
})

app.mount('#app')

注释说明：

@click="greet('你好')" 传递参数，调用时会将 '你好' 传入 greet 方法。

@submit.prevent 是事件修饰符，阻止表单默认提交行为，常用于异步提交。

常用修饰符还有 .stop（阻止冒泡）、.once（只触发一次）等。

双向数据绑定：v-model 的妙用

v-model 是 Vue.js 模板语法中最优雅的特性之一，它实现了表单输入与数据的双向绑定。

<div id="app">
  <input v-model="message" placeholder="输入内容" />
  <p>你输入的是：{{ message }}</p>
</div>

const app = createApp({
  data() {
    return {
      message: ''
    }
  }
})

app.mount('#app')

注释说明：

v-model 将输入框的值与 message 数据绑定。

输入时，message 自动更新；message 改变时，输入框内容也同步更新。

v-model 是 v-bind:value 和 v-on:input 的语法糖，底层实现就是这两个指令的组合。

在不同表单元素中使用 v-model

<div id="app">
  <input type="checkbox" v-model="isChecked" /> 是否选中
  <br />
  <select v-model="selectedOption">
    <option value="A">选项 A</option>
    <option value="B">选项 B</option>
  </select>
  <p>选中状态：{{ isChecked }}</p>
  <p>选择的选项：{{ selectedOption }}</p>
</div>

const app = createApp({
  data() {
    return {
      isChecked: false,
      selectedOption: 'A'
    }
  }
})

app.mount('#app')

注释说明：

v-model 会自动适配不同输入类型：

checkbox：绑定布尔值。

select：绑定 value 属性。

这种统一的绑定方式极大简化了表单开发。

实用技巧与最佳实践

掌握 Vue.js 模板语法，不仅要会用，还要用得对。以下是一些关键建议：

避免在模板中写复杂逻辑：如 {{ user.name.split(' ')[0] }}，应提前处理好数据。
始终使用 key 属性：尤其在 v-for 中，防止渲染异常。
优先使用 v-show 而非 v-if：当切换频繁时，性能更优。
合理使用 methods：事件处理逻辑应放在 methods 中，保持模板简洁。

Vue.js 模板语法是连接数据与视图的桥梁，它让前端开发变得简单而高效。当你能熟练使用这些语法时，你已经迈出了成为专业 Vue 开发者的关键一步。