Vue学习笔记集–六大指令

内容渲染指令

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

v-text（类似innerText）

• • 使用语法：`

hello

`，意思是将 name 值渲染到 p 标签中

• 类似 innerText，使用该语法，会覆盖 p 标签原有内容

v-html（类似 innerHTML）

• • 使用语法：`

hello

`，意思是将 intro 值渲染到 p 标签中

• 类似 innerHTML，使用该语法，会覆盖 p 标签原有内容
• 类似 innerHTML，使用该语法，能够将HTML标签的样式呈现出来。

条件渲染指令

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

v-show

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

v-if

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

事件绑定指令

methods

基本定义

methods 是 Vue 实例或组件的一个选项，值为一个对象，对象中定义组件的方法： export default { methods: { methodName() { // 逻辑代码 }, // 其他方法… } }

核心特性

(1) 绑定this

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

(2) 模板中调用

• 在模板中通过 v-on（或 @）绑定事件，或在插值中直接调用： 点击增加

{{ formatDate() }}

(3) 传递参数

• 支持手动传递参数，包括原生事件对象 $event： 传递参数 methods: { say(message, event) { console.log(message, event.target); } }

与事件处理的结合

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

与 computed 的区别

异步操作

methods 中可执行异步操作（如 API 请求）： methods: { async fetchData() { try { const response = await axios.get(’/api/data’); this.data = response.data; } catch (error) { console.error(‘请求失败：’, error); } } }

避免箭头函数

• 避免在 methods 中使用箭头函数，否则 this 不会绑定到 Vue 实例： // ❌ 错误：箭头函数导致 this 指向错误 methods: { badMethod: () => { console.log(this); // 指向 Window 或 undefined（严格模式） } } // ✅ 正确：普通函数确保 this 正确 methods: { goodMethod() { console.log(this); // 指向 Vue 实例 } }

在生命周期钩子中调用

可以在生命周期钩子（如 created、mounted）中调用方法： export default { created() { this.initData(); // 组件创建时调用方法 }, methods: { initData() { // 初始化逻辑 } } }

最佳实践

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

完整示例

计数：{{ count }}

输入的内容：{{ inputValue }}

computed

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

核心特性

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

基本语法

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

总价：{{ totalPrice }}

适用场景

(1) 数据派生

将多个数据组合成一个新值： data() { return { firstName: ‘张’, lastName: ‘三’ }; }, computed: { fullName() { return this.firstName + ’ ’ + this.lastName; // “张 三” } }

(2) 复杂计算

如过滤列表、数学运算等： data() { return { items: [ { price: 10 }, { price: 20 } ] }; }, computed: { totalPrice() { return this.items.reduce((sum, item) => sum + item.price, 0); // 30 } }

(3) 格式化数据

如日期格式化、文本截断： computed: { formattedDate() { return new Date(this.rawDate).toLocaleDateString(); } }

与methods 的对比

{{ fullName }}

{{ getFullName() }}

计算属性的 Setter

默认只有 getter，但可以手动定义 setter（较少用）： computed: { fullName: { get() { return this.firstName + ’ ’ + this.lastName; }, set(newValue) { // 当修改 fullName 时，拆解并更新依赖数据 const names = newValue.split(’ ‘); this.firstName = names[0]; this.lastName = names[1] || ‘’; } } }

最佳实践

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

完整示例

总价：{{ totalPrice }}

含税价：{{ taxedTotalPrice }}

常见问题

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

• 不建议！computed 设计用于同步计算，异步操作应放在 methods 或 watch 中。 Q2:computed 依赖非响应式数据会怎样？
• 如果依赖的数据不是响应式的（如未在 data 中定义），计算属性不会自动更新。 Q3:computed 和 watch 的区别？
• computed：声明式派生数据，依赖多个值。
• watch：监听单个值的变化，执行副作用（如异步请求、复杂逻辑）。

总结 ： computed 是 Vue 中处理复杂数据逻辑的利器，通过缓存机制提升性能，保持代码简洁。 优先使用 computed 替代模板内复杂表达式！

v-on

基本语法

按钮

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

常见用法

绑定方法

点击 methods: { greet() { alert(‘Hello!’); } }

内联表达式

增加计数：{{ count }}

传递参数

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

事件修饰符

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

按键修饰符

用于监听特定键盘按键：

<– 回车键触发 –> <– ESC 键触发 –> 支持按键别名（如 .enter、.tab、.esc）或按键码（如 @keyup.13）。

系统修饰键

监听组合按键（如 Ctrl + Click）： Ctrl + 点击触发

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

动态事件名

通过动态绑定事件类型： 动态事件 eventName 可以是 Vue 实例的数据属性（如 focus、mouseenter）。

对象语法

绑定多个事件： 按钮

总结

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

{{ count }}

属性绑定指令

v-bind

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

核心功能

1. 动态绑定 HTML 属性 将 HTML 元素的属性（如 href、src、class、style 等）绑定到 Vue 实例的数据，当数据变化时，属性自动更新。
2. 传递 Props 到子组件 将父组件的数据传递给子组件的 Props，实现父子组件通信。
3. 动态绑定属性名 根据数据动态决定绑定的属性名（如 :[attributeName]="value"）。

基本语法

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

常见用法示例

1 绑定普通属性

链接

按钮

2 绑定 class 和 style

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

对应的数据： data() { return { attributeObject: { id: ‘container’, class: ‘box’, ‘data-custom’: ‘123’ } } }

4 绑定 Props 到子组件

5 动态属性名

数据： data() { return { dynamicAttrName: ‘placeholder’, value: ‘请输入内容’ } }

关键细节

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

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

3. 修饰符（Modifiers）

• .prop：强制将属性绑定为 DOM 属性（而非 HTML 属性）。* .camel：将属性名从短横线格式转为驼峰格式（用于模板中使用短横线命名的属性）。

列表渲染指令

v-for

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

基本语法

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

常见用法示例

1 遍历数组

• {{ index }} - {{ item.name }}

数据： data() { return { items: [ { id: 1, name: ‘Apple’ }, { id: 2, name: ‘Banana’ }, ] } }

2 遍历对象

{{ index }}. {{ key }}: {{ value }}

数据： data() { return { object: { name: ‘John’, age: 30 } } }

3 遍历数字

{{ n }}

4 遍历组件

核心规则

1 必须绑定:key

• 通过 :key 提供唯一标识（如 item.id），避免用索引index（除非列表静态不变）。
• 错误示例：> 当列表顺序变化时，用 index 作为 key 会导致渲染错误或性能问题。

2 响应式更新

• Vue 能检测以下数组方法自动触发更新： push(), pop(), shift(), unshift(), splice(), sort(), reverse()
• 直接修改数组索引或长度不会触发更新 ： // 错误！不会更新视图 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。
• 最佳实践 ：用计算属性过滤数据，避免同时使用：

{{ item.name }}

常见问题

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

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

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

用嵌套的 v-for：

{{ item.name }}

3 如何跳过某些元素？

结合 v-if 或计算属性过滤：### 双向绑定指令

v-model

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

核心机制

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

基本用法

1 绑定文本输入（、）

输入的内容是：{{ message }}

数据： data() { return { message: ’’ } }

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

是否同意 苹果 香蕉 数据： data() { return { isChecked: false, fruits: [] } }

3 绑定单选框

男 女 数据： data() { return { gender: ’’ } }

4 绑定下拉框（``）

北京 上海 数据： data() { return { selectedCity: ’’ } }

修饰符（Modifiers）

1 .lazy

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

2 .number

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

3 .trim

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

自定义组件中的v-model

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

Vue 2 用法

• 默认绑定 value prop 和 input 事件。
• 示例：

Vue 3 用法

• 默认绑定 modelValue prop 和 update:modelValue 事件。
• 支持多个 v-model 绑定：

v-model的原理拆解

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

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

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

• 文本输入（text、textarea） ： 等价于：
• 绑定 value 属性，监听 input 事件。
• 复选框（checkbox） ： 等价于：
• 绑定 checked 属性，监听 change 事件。
• 单选按钮（radio） 和 下拉框（select） ： 类似逻辑，绑定 value 和监听 change 事件。

2 自定义组件的双向绑定

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

父组件使用：

等价于：

子组件实现：

// 接收父组件传递的 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，例如： 等价于：

4 修饰符处理

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

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

5 底层实现机制

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

总结

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

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