Vue 教程：理解指令系统与模板语法的核心用法

快速概述

Vue 的指令系统与模板语法解决的核心问题是：如何以声明式的方式将数据渲染到 DOM，并高效处理用户交互。它适用于从简单页面到复杂单页应用的所有前端场景。前置环境要求：Node.js（建议 16+ 版本）与 Vue CLI 或 Vite 构建工具。

核心概念与原理

Vue 模板基于 HTML 扩展，通过指令（Directives）为 DOM 元素附加响应式行为。其核心机制是响应式数据绑定：当 data 中的数据变化时，视图自动更新。常用指令包括：v-bind（属性绑定）、v-model（双向绑定）、v-if/v-show（条件渲染）、v-for（列表渲染）、v-on（事件监听）。选项式 API 中，data 定义响应式数据，methods 定义方法，computed 定义计算属性，watch 监听数据变化。

实战步骤与代码

第一步：创建项目

vue create vue-demo
cd vue-demo
npm run serve

第二步：基础插值与属性绑定

<template>
  <div>
    <!-- 插值表达式 -->
    <p>{{ message }}</p>
    <!-- v-bind 绑定属性，可简写为 : -->
    <img :src="imageUrl" alt="示例">
  </div>
</template>
<script> export default { data() { return { message: 'Hello Vue', imageUrl: 'https://example.com/img.png' } } } </script>

第三步：双向绑定与事件处理

<input v-model="inputText" placeholder="输入内容">
<button @click="handleClick">点击</button>
<script> export default { data() { return { inputText: '' } }, methods: { handleClick() { console.log(this.inputText) } } } </script>

第四步：条件与列表渲染

<!-- v-if 条件渲染 -->
<p v-if="isVisible">可见内容</p>
<!-- v-for 列表渲染，:key 必须绑定唯一值 --> <ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li> </ul>

第五步：计算属性与侦听器

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName
  }
},
watch: {
  message(newVal, oldVal) {
    console.log(`消息从 ${oldVal} 变为 ${newVal}`)
  }
}

常见坑点与优化

• v-for 缺少 :key：会导致列表更新异常，务必绑定唯一标识。
• v-if 与 v-for 同元素使用：v-for 优先级更高，建议用计算属性过滤后再渲染，避免性能浪费。
• v-model 默认绑定 value 与 input 事件：自定义组件需显式声明 model 选项或使用 update:modelValue。
• 大数据列表性能：使用 v-show 代替频繁切换的 v-if，减少 DOM 重建开销。
• computed 与 watch 的选择：能使用 computed 时优先使用，它具备缓存机制，避免重复计算。