Vue学习笔记集--六大指令

内容渲染指令

内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下2 个：

v-text（类似innerText）

- 使用语法：<p v-text="name">hello</p>，意思是将 name 值渲染到 p 标签中
- 类似 innerText，使用该语法，会覆盖 p 标签原有内容

v-html（类似 innerHTML）

- 使用语法：<p v-html="intro">hello</p>，意思是将 intro 值渲染到 p 标签中
- 类似 innerHTML，使用该语法，会覆盖 p 标签原有内容
- 类似 innerHTML，使用该语法，能够将HTML标签的样式呈现出来。

条件渲染指令

条件判断指令，用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是：

v-show

作用：控制元素显示隐藏
语法： v-show = "表达式" 表达式值为 true 显示， false 隐藏
原理：切换 display:none 控制显示隐藏
场景：频繁切换显示隐藏的场景

v-if

作用：控制元素显示隐藏（条件渲染）
语法： v-if= "表达式" 表达式值 true显示， false 隐藏
原理：基于条件判断，是否创建或移除元素节点
场景：要么显示，要么隐藏，不频繁切换的场景

事件绑定指令

methods

基本定义

methods 是 Vue 实例或组件的一个选项，值为一个对象，对象中定义组件的方法：

javascript 复制代码

export default {
  methods: {
    methodName() {
      // 逻辑代码
    },
    // 其他方法...
  }
}

核心特性

(1) 绑定 `this`

方法中的 this 自动绑定到 Vue 实例 ，可以直接访问 data、props、computed 等属性：
javascript 复制代码
```
methods: {
  increment() {
    this.count++; // 直接操作 data 中的 count
  }
}
```

(2) 模板中调用

在模板中通过 v-on（或 @）绑定事件，或在插值中直接调用：
javascript 复制代码
```
<button @click="increment">点击增加</button>
<p>{{ formatDate() }}</p>
```

(3) 传递参数

支持手动传递参数，包括原生事件对象 $event：

复制代码

<button @click="say('Hello', $event)">传递参数</button>

javascript 复制代码

methods: {
  say(message, event) {
    console.log(message, event.target);
  }
}

与事件处理的结合

methods 常与 v-on 配合，处理用户交互事件：

javascript 复制代码

<template>
  <button @click="handleClick">点击</button>
  <input @input="handleInput">
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert('按钮被点击！');
    },
    handleInput(event) {
      console.log('输入内容：', event.target.value);
    }
  }
}
</script>

与 computed 的区别

`methods`	`computed`
每次调用都会执行	基于依赖缓存，依赖不变时复用
适合处理事件或需要主动触发的逻辑	适合派生数据（如过滤、计算）
可以在模板中调用（如 {``{ method() }}）	在模板中作为属性使用（如 {``{ computedProp }}）

示例对比：

javascript 复制代码

data() {
  return { firstName: 'John', lastName: 'Doe' };
},
methods: {
  fullNameMethod() {
    return this.firstName + ' ' + this.lastName; // 每次调用都重新计算
  }
},
computed: {
  fullNameComputed() {
    return this.firstName + ' ' + this.lastName; // 缓存结果，依赖不变时不重新计算
  }
}

异步操作

methods 中可执行异步操作（如 API 请求）：

javascript 复制代码

methods: {
  async fetchData() {
    try {
      const response = await axios.get('/api/data');
      this.data = response.data;
    } catch (error) {
      console.error('请求失败：', error);
    }
  }
}

避免箭头函数

避免在 methods 中使用箭头函数，否则 this 不会绑定到 Vue 实例：

javascript 复制代码

// ❌ 错误：箭头函数导致 this 指向错误
methods: {
  badMethod: () => {
    console.log(this); // 指向 Window 或 undefined（严格模式）
  }
}

// ✅ 正确：普通函数确保 this 正确
methods: {
  goodMethod() {
    console.log(this); // 指向 Vue 实例
  }
}

在生命周期钩子中调用

可以在生命周期钩子（如 created、mounted）中调用方法：

javascript 复制代码

export default {
  created() {
    this.initData(); // 组件创建时调用方法
  },
  methods: {
    initData() {
      // 初始化逻辑
    }
  }
}

最佳实践

单一职责：每个方法专注于一个任务，提高可维护性。
避免直接操作 DOM：优先通过数据驱动视图，而非直接操作 DOM。
命名清晰 ：使用动词命名方法（如 handleClick、fetchData）。
复用逻辑：复杂逻辑封装为方法，避免在模板中写过多表达式。

完整示例

javascript 复制代码

<template>
  <div>
    <button @click="increment">计数：{{ count }}</button>
    <input 
      type="text" 
      @input="updateValue"
      placeholder="输入内容..."
    >
    <p>输入的内容：{{ inputValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      inputValue: ''
    };
  },
  methods: {
    increment() {
      this.count++;
    },
    updateValue(event) {
      this.inputValue = event.target.value;
    }
  }
}
</script>

computed

在 Vue 中，computed 是用于定义计算属性的核心选项，它基于响应式依赖进行缓存，适合处理需要根据其他数据动态计算的场景。

核心特性

响应式依赖 ：computed 属性会追踪其依赖的响应式数据（如 data、props、其他 computed），当依赖变化时自动重新计算。
缓存机制：只有当依赖变化时才会重新计算，否则直接返回缓存结果，性能高效。
声明式逻辑：将复杂逻辑封装为计算属性，避免模板中写过多表达式。

基本语法

javascript 复制代码

export default {
  computed: {
    属性名() {
      // 基于其他数据计算并返回值
      return this.data1 + this.data2;
    }
  }
}

模板中使用

vue 复制代码

<template>
  <p>总价：{{ totalPrice }}</p>
</template>

适用场景

(1) 数据派生

将多个数据组合成一个新值：

javascript 复制代码

data() {
  return { firstName: '张', lastName: '三' };
},
computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName; // "张 三"
  }
}

(2) 复杂计算

如过滤列表、数学运算等：

javascript 复制代码

data() {
  return { items: [ { price: 10 }, { price: 20 } ] };
},
computed: {
  totalPrice() {
    return this.items.reduce((sum, item) => sum + item.price, 0); // 30
  }
}

(3) 格式化数据

如日期格式化、文本截断：

javascript 复制代码

computed: {
  formattedDate() {
    return new Date(this.rawDate).toLocaleDateString();
  }
}

与 `methods` 的对比

`computed`	`methods`
基于依赖缓存，依赖不变时直接返回结果	每次调用都会重新执行
通过属性名访问（无括号）	通过方法调用（需括号）
适合派生数据（如组合、计算）	适合执行操作（如事件处理）

示例对比

vue 复制代码

<template>
  <!-- computed：高效，依赖不变时不会重复计算 -->
  <p>{{ fullName }}</p>

  <!-- methods：每次渲染都会调用 -->
  <p>{{ getFullName() }}</p>
</template>

计算属性的 Setter

默认只有 getter，但可以手动定义 setter（较少用）：

javascript 复制代码

computed: {
  fullName: {
    get() {
      return this.firstName + ' ' + this.lastName;
    },
    set(newValue) {
      // 当修改 fullName 时，拆解并更新依赖数据
      const names = newValue.split(' ');
      this.firstName = names[0];
      this.lastName = names[1] || '';
    }
  }
}

最佳实践

避免副作用 ：computed 应专注于计算，不要执行异步操作或修改外部状态。
拆分复杂逻辑：若计算逻辑复杂，可拆分为多个计算属性，提高可读性。
依赖明确：确保依赖的响应式数据清晰，避免依赖非响应式数据。

完整示例

vue 复制代码

<template>
  <div>
    <input v-model="price" type="number" placeholder="单价">
    <input v-model="quantity" type="number" placeholder="数量">
    <p>总价：{{ totalPrice }}</p>
    <p>含税价：{{ taxedTotalPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 0,
      quantity: 0,
      taxRate: 0.1
    };
  },
  computed: {
    totalPrice() {
      return this.price * this.quantity;
    },
    taxedTotalPrice() {
      return this.totalPrice * (1 + this.taxRate);
    }
  }
}
</script>

常见问题

Q1: computed 中可以调用异步方法吗？

不建议！computed 设计用于同步计算，异步操作应放在 methods 或 watch 中。

Q2: computed 依赖非响应式数据会怎样？

如果依赖的数据不是响应式的（如未在 data 中定义），计算属性不会自动更新。

Q3: computed 和 watch 的区别？

computed：声明式派生数据，依赖多个值。
watch：监听单个值的变化，执行副作用（如异步请求、复杂逻辑）。

总结：

computed 是 Vue 中处理复杂数据逻辑的利器，通过缓存机制提升性能，保持代码简洁。

优先使用 computed 替代模板内复杂表达式！

v-on

基本语法

javascript 复制代码

<button v-on:事件类型="处理函数或表达式">按钮</button>

事件类型 ：如 click、input、keydown 等。
处理函数 ：在 Vue 实例的 methods 中定义的方法。
简写：为 @，例如 @click="handler"。

常见用法

绑定方法

javascript 复制代码

<button v-on:click="greet">点击</button>

javascript 复制代码

methods: {
  greet() {
    alert('Hello!');
  }
}

内联表达式

javascript 复制代码

<button @click="count += 1">增加计数：{{ count }}</button>

传递参数

javascript 复制代码

<button @click="say('Hi', $event)">传递参数</button>

javascript 复制代码

methods: {
  say(message, event) {
    alert(message);
    console.log(event.target); // 访问原生事件对象
  }
}

事件修饰符

Vue 提供修饰符简化常见事件处理逻辑，通过链式调用：

修饰符	作用
`.stop`	阻止事件冒泡（`event.stopPropagation()`）
`.prevent`	阻止默认行为（`event.preventDefault()`）
`.capture`	使用捕获模式触发事件
`.self`	仅当事件在元素自身（非子元素）触发时执行
`.once`	事件仅触发一次
`.passive`	提升滚动性能（与 `prevent` 冲突）

示例：

javascript 复制代码

<form @submit.prevent="onSubmit"></form>
<a @click.stop.prevent="doSomething"></a>

按键修饰符

用于监听特定键盘按键：

javascript 复制代码

<input @keyup.enter="submit"> <!-- 回车键触发 -->
<input @keyup.esc="clearInput"> <!-- ESC 键触发 --><input @keyup.enter="submit"> <-- 回车键触发 -->
<input @keyup.esc="clearInput"> <-- ESC 键触发 -->

支持按键别名（如 .enter、.tab、.esc）或按键码（如 @keyup.13）。

系统修饰键

监听组合按键（如 Ctrl + Click）：

javascript 复制代码

<button @click.ctrl="doSomething">Ctrl + 点击触发</button>
<input @keyup.ctrl.enter="submit"> <!-- Ctrl + Enter 触发 -->

修饰符包括：.ctrl、.alt、.shift、.meta（Windows 的 Win 键，Mac 的 Command 键）。

动态事件名

通过动态绑定事件类型：

javascript 复制代码

<button v-on:[eventName]="handler">动态事件</button>

eventName 可以是 Vue 实例的数据属性（如 focus、mouseenter）。

对象语法

绑定多个事件：

javascript 复制代码

<button v-on="{ mousedown: start, mouseup: end }">按钮</button>

总结

v-on 是 Vue 事件处理的核心指令，简化了 DOM 事件监听。
通过修饰符（如 .stop、.prevent）和按键处理，避免直接操作 DOM。
结合 methods 中的方法实现逻辑复用，保持代码清晰。

完整示例：

javascript 复制代码

<template>
  <div>
    <button @click="increment">{{ count }}</button>
    <input 
      @keyup.enter="submit"
      @input="onInput"
      @focus.capture="log('聚焦')"
    >
  </div>
</template>

<script>
export default {
  data() {
    return { count: 0, inputValue: '' }
  },
  methods: {
    increment() { this.count++ },
    submit() { alert('提交：' + this.inputValue) },
    onInput(event) { this.inputValue = event.target.value },
    log(msg) { console.log(msg) }
  }
}
</script>

属性绑定指令

v-bind

v-bind 是 Vue.js 中用于动态绑定属性 或组件 Props的指令，它可以将 Vue 实例中的数据与 HTML 属性或组件 Props 进行绑定，实现数据到视图的动态响应。

核心功能

动态绑定 HTML 属性

将 HTML 元素的属性（如 href、src、class、style 等）绑定到 Vue 实例的数据，当数据变化时，属性自动更新。
传递 Props 到子组件

将父组件的数据传递给子组件的 Props，实现父子组件通信。
动态绑定属性名

根据数据动态决定绑定的属性名（如 :[attributeName]="value"）。

基本语法

简写：直接省略v-bind，只保留:

html 复制代码

<!-- 完整语法 -->
<element v-bind:attribute="expression"></element>

<!-- 简写语法（推荐） -->
<element :attribute="expression"></element>

常见用法示例

1. 绑定普通属性

html 复制代码

<!-- 绑定 href -->
<a :href="url">链接</a>

<!-- 绑定图片路径 -->
<img :src="imagePath">

<!-- 动态禁用按钮 -->
<button :disabled="isDisabled">按钮</button>

2. 绑定 `class` 和 `style`

html 复制代码

<!-- 动态 class（对象语法） -->
<div :class="{ active: isActive, error: hasError }"></div>

<!-- 动态 class（数组语法） -->
<div :class="[activeClass, errorClass]"></div>

<!-- 动态 style（对象语法） -->
<div :style="{ color: textColor, fontSize: fontSize + 'px' }"></div>

<!-- 动态 style（数组语法） -->
<div :style="[baseStyles, overrideStyles]"></div>

3. 绑定对象（批量绑定属性）

html 复制代码

<!-- 将对象的所有属性绑定到元素 -->
<div v-bind="attributeObject"></div>

对应的数据：

javascript 复制代码

data() {
  return {
    attributeObject: {
      id: 'container',
      class: 'box',
      'data-custom': '123'
    }
  }
}

4. 绑定 Props 到子组件

html 复制代码

<!-- 父组件传递数据给子组件的 prop -->
<child-component :title="parentTitle" :content="parentContent"></child-component>

5. 动态属性名

html 复制代码

<!-- 根据 dynamicAttrName 的值决定绑定的属性名 -->
<input :[dynamicAttrName]="value">

数据：

javascript 复制代码

data() {
  return {
    dynamicAttrName: 'placeholder',
    value: '请输入内容'
  }
}

关键细节

表达式与静态值
v-bind 的值是 JavaScript 表达式，而非字符串。例如：

html 复制代码

<!-- 传递一个布尔值 -->
<button :disabled="isDisabled">按钮</button>

<!-- 传递一个数字 -->
<input :max="10">

<!-- 传递一个对象 -->
<child-component :config="{ size: 'large', theme: 'dark' }"></child-component>

没有 v-bind 的陷阱
如果直接写属性而不加 v-bind，Vue 会将其视为字符串：

javascript 复制代码

 <!-- 传递字符串 'data.id' -->
<div id="data.id"></div>
   
<!-- 传递变量 data.id 的值 -->
<div :id="data.id"></div>

修饰符（Modifiers）
- .prop：强制将属性绑定为 DOM 属性（而非 HTML 属性）。
  html 复制代码
```
<div :some-prop.prop="value"></div>
```
- .camel：将属性名从短横线格式转为驼峰格式（用于模板中使用短横线命名的属性）。
  html 复制代码
```
<svg :view-box.camel="viewBox"></svg>
```

列表渲染指令

v-for

在 Vue.js 中，v-for 是用于循环渲染列表数据的核心指令，可以遍历数组、对象或数字，生成动态的 DOM 元素或组件。

基本语法

html 复制代码

<template v-for="(item, index) in list" :key="唯一标识">
  <!-- 渲染内容 -->
</template>

item: 当前遍历的元素（数组项、对象值、数字迭代值）。
index: 当前项的索引（仅数组和对象遍历时可用）。
:key : 必须提供唯一标识（用于 Vue 的虚拟 DOM 高效更新）。

常见用法示例

1. 遍历数组

html 复制代码

<ul>
  <li v-for="(item, index) in items" :key="item.id">
    {{ index }} - {{ item.name }}
  </li>
</ul>

数据：

javascript 复制代码

data() {
  return {
    items: [
      { id: 1, name: 'Apple' },
      { id: 2, name: 'Banana' },
    ]
  }
}

2. 遍历对象

html 复制代码

<div v-for="(value, key, index) in object" :key="key">
  {{ index }}. {{ key }}: {{ value }}
</div>

数据：

javascript 复制代码

data() {
  return {
    object: {
      name: 'John',
      age: 30
    }
  }
}

3. 遍历数字

html 复制代码

<span v-for="n in 5" :key="n">{{ n }}</span>
<!-- 输出：1 2 3 4 5 -->

4. 遍历组件

html 复制代码

<child-component 
  v-for="item in items" 
  :key="item.id"
  :item-data="item"
/>

核心规则

1. 必须绑定 `:key`

通过 :key 提供唯一标识（如 item.id），避免用索引 index（除非列表静态不变）。
错误示例：
html 复制代码
```
<div v-for="(item, index) in items" :key="index"></div>
```
当列表顺序变化时，用 index 作为 key 会导致渲染错误或性能问题。

2. 响应式更新

Vue 能检测以下数组方法自动触发更新：
javascript 复制代码
```
push(), pop(), shift(), unshift(), splice(), sort(), reverse()
```

直接修改数组索引或长度不会触发更新：

javascript 复制代码

// 错误！不会更新视图
this.items[0] = { id: 3, name: 'Orange' };
// 正确做法
this.items.splice(0, 1, { id: 3, name: 'Orange' });

3. `v-for` 与 `v-if` 的优先级

Vue 2 ：v-for 优先级高于 v-if，不推荐同时使用。
Vue 3 ：v-if 优先级高于 v-for。

最佳实践：用计算属性过滤数据，避免同时使用：

html 复制代码

<template v-for="item in filteredItems" :key="item.id">
  <div v-if="item.isActive">{{ item.name }}</div>
</template>

常见问题

1. 为什么列表渲染不更新？

原因：直接修改数组或对象未触发响应式。
解决：使用变异方法（如 push）或 Vue.set/this.$set：
javascript 复制代码
```
// 动态添加对象属性
this.$set(this.object, 'newKey', 'newValue');
```

2. 如何遍历多层嵌套数据？

用嵌套的 v-for：

html 复制代码

<div v-for="group in groups" :key="group.id">
  <div v-for="item in group.items" :key="item.id">
    {{ item.name }}
  </div>
</div>

3. 如何跳过某些元素？

结合 v-if 或计算属性过滤：

html 复制代码

<div v-for="item in items" :key="item.id" v-if="item.isVisible"></div>

双向绑定指令

v-model

v-model 是 Vue.js 中用于实现表单输入元素与数据双向绑定 的核心指令，它能将表单控件（如 <input>、<textarea>、<select>）的值与 Vue 实例的数据自动同步，无需手动操作 DOM。

核心机制

双向绑定 ：
v-model 是 v-bind（数据到视图）和 v-on（视图到数据）的语法糖。
- 数据 → 视图 ：将数据绑定到表单元素的 value/checked 属性。
- 视图 → 数据 ：监听表单元素的 input 或 change 事件，更新数据。

基本用法

1. 绑定文本输入（`<input type="text">`、`<textarea>`）

html 复制代码

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

数据：

javascript 复制代码

data() {
  return {
    message: ''
  }
}

2. 绑定复选框（单个/多个）

html 复制代码

<!-- 单个复选框（布尔值） -->
<input type="checkbox" v-model="isChecked"> 是否同意

<!-- 多个复选框（数组） -->
<input type="checkbox" value="apple" v-model="fruits"> 苹果
<input type="checkbox" value="banana" v-model="fruits"> 香蕉

数据：

javascript 复制代码

data() {
  return {
    isChecked: false,
    fruits: []
  }
}

3. 绑定单选框

html 复制代码

<input type="radio" value="male" v-model="gender"> 男
<input type="radio" value="female" v-model="gender"> 女

数据：

javascript 复制代码

data() {
  return {
    gender: ''
  }
}

4. 绑定下拉框（`<select>`）

html 复制代码

<select v-model="selectedCity">
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
</select>

数据：

javascript 复制代码

data() {
  return {
    selectedCity: ''
  }
}

修饰符（Modifiers）

1. .lazy

将 input 事件的同步改为 change 事件（输入完成后更新）：

html 复制代码

<input v-model.lazy="message">  <!-- 在输入框失焦后更新数据 -->

2. .number

将输入值自动转为数字类型：

html 复制代码

<input v-model.number="age" type="number">  <!-- 输入 "30" → 30（数字） -->

3. .trim

自动去除输入内容的首尾空格：

html 复制代码

<input v-model.trim="username">  <!-- 输入 "  John " → "John" -->

自定义组件中的 `v-model`

在组件中使用 v-model 可以实现父子组件数据的双向绑定。

Vue 2 用法

默认绑定 value prop 和 input 事件。

示例：

html 复制代码

<!-- 父组件 -->
<custom-input v-model="message"></custom-input>

<!-- 子组件（CustomInput.vue） -->
<template>
  <input 
    :value="value" 
    @input="$emit('input', $event.target.value)"
  >
</template>
<script>
export default {
  props: ['value']
}
</script>

Vue 3 用法

默认绑定 modelValue prop 和 update:modelValue 事件。

支持多个 v-model 绑定：

html 复制代码

<!-- 父组件 -->
<custom-input v-model:title="title" v-model:content="content"></custom-input>

<!-- 子组件 -->
<template>
  <input 
    :value="title" 
    @input="$emit('update:title', $event.target.value)"
  >
  <input 
    :value="content" 
    @input="$emit('update:content", $event.target.value)"
  >
</template>
<script>
export default {
  props: ['title', 'content']
}
</script>

v-model的原理拆解

Vue 的 v-model 是一个语法糖，用于实现表单元素和组件的双向数据绑定。其核心原理可以拆解为以下部分：

1. 原生表单元素的双向绑定

对于原生表单元素（如 <input>、<textarea>、<select>），v-model 会根据元素类型自动绑定对应的属性和事件，实现双向更新：

文本输入（text、textarea）：
html 复制代码
```
<input v-model="message" />
```
等价于：
html 复制代码
```
<input 
  :value="message" 
  @input="message = $event.target.value" 
/>
```
- 绑定 value 属性，监听 input 事件。

复选框（checkbox）：

html 复制代码

<input type="checkbox" v-model="checked" />

等价于：

html 复制代码

<input 
  type="checkbox" 
  :checked="checked" 
  @change="checked = $event.target.checked" 
/>

绑定 checked 属性，监听 change 事件。

单选按钮（radio） 和 下拉框（select） ：

类似逻辑，绑定 value 和监听 change 事件。

2. 自定义组件的双向绑定

在自定义组件中，v-model 默认绑定 modelValue 属性和 update:modelValue 事件（Vue 3）：

父组件使用：

html 复制代码

<CustomComponent v-model="message" />

等价于：

html 复制代码

<CustomComponent 
  :modelValue="message" 
  @update:modelValue="newValue => message = newValue" 
/>

子组件实现：

javascript 复制代码

// 接收父组件传递的 modelValue
props: ['modelValue'],

// 触发更新事件
emits: ['update:modelValue'],
methods: {
  handleChange(e) {
    this.$emit('update:modelValue', e.target.value);
  }
}

3. 多个 v-model 绑定（Vue 3+）

Vue 3 允许通过参数绑定多个 v-model，例如：

html 复制代码

<CustomComponent 
  v-model:title="title" 
  v-model:content="content" 
/>

等价于：

html 复制代码

<CustomComponent 
  :title="title" 
  @update:title="newTitle => title = newTitle" 
  :content="content" 
  @update:content="newContent => content = newContent" 
/>

4. 修饰符处理

v-model 支持修饰符，用于对输入值进行处理：

.lazy ：将 input 事件改为 change 事件（延迟同步）。
.trim：自动去除首尾空格。
.number：将输入转为数值类型。

html 复制代码

<input v-model.lazy.trim.number="value" />

5. 底层实现机制

模板编译 ：Vue 编译器将 v-model 转换为对应的属性和事件绑定。
响应式系统：数据变化通过 Vue 的响应式系统驱动视图更新。
事件监听：用户输入触发事件，更新数据层，形成闭环。

总结

v-model 的核心是 语法糖 ，通过自动绑定属性和事件实现双向数据流：

对原生元素：根据类型绑定 value/checked 属性和 input/change 事件。
对组件：默认绑定 modelValue 和 update:modelValue，支持自定义参数和多个绑定。
结合修饰符，可灵活处理输入值。

Vue学习笔记集--六大指令

内容渲染指令

v-text（类似innerText）

v-html（类似 innerHTML）

条件渲染指令

v-show

v-if

事件绑定指令

methods

基本定义

核心特性

(1) 绑定 this

(2) 模板中调用

(3) 传递参数

与事件处理的结合

与 computed 的区别

异步操作

避免箭头函数

在生命周期钩子中调用

最佳实践

完整示例

computed

核心特性

基本语法

适用场景

(1) 数据派生

(2) 复杂计算

(3) 格式化数据

与 methods 的对比

计算属性的 Setter

最佳实践

完整示例

常见问题

v-on

基本语法

常见用法

绑定方法

内联表达式

传递参数

事件修饰符

按键修饰符

系统修饰键

动态事件名

对象语法

总结

属性绑定指令

v-bind

核心功能

基本语法

常见用法示例

1. 绑定普通属性

2. 绑定 class 和 style

3. 绑定对象（批量绑定属性）

4. 绑定 Props 到子组件

5. 动态属性名

关键细节

列表渲染指令

v-for

基本语法

常见用法示例

1. 遍历数组

2. 遍历对象

3. 遍历数字

4. 遍历组件

核心规则

1. 必须绑定 :key

2. 响应式更新

3. v-for 与 v-if 的优先级

常见问题

1. 为什么列表渲染不更新？

2. 如何遍历多层嵌套数据？

3. 如何跳过某些元素？

双向绑定指令

v-model

核心机制

基本用法

1. 绑定文本输入（<input type="text">、<textarea>）

2. 绑定复选框（单个/多个）

3. 绑定单选框

4. 绑定下拉框（<select>）

(1) 绑定 `this`

与 `methods` 的对比

2. 绑定 `class` 和 `style`

1. 必须绑定 `:key`

3. `v-for` 与 `v-if` 的优先级

1. 绑定文本输入（`<input type="text">`、`<textarea>`）

4. 绑定下拉框（`<select>`）

自定义组件中的 `v-model`