目录
[二、Vue.js 指令、事件与计算属性](#二、Vue.js 指令、事件与计算属性)
[2.1 Vue.js 基础指令](#2.1 Vue.js 基础指令)
[1. v-pre 跳过编译](#1. v-pre 跳过编译)
[2. v-html 标签解析](#2. v-html 标签解析)
[3. v-text 文本解析](#3. v-text 文本解析)
[4. v-cloak 斗篷](#4. v-cloak 斗篷)
[5. v-show 显示](#5. v-show 显示)
[6. v-if 条件判断与显示](#6. v-if 条件判断与显示)
[v-show 与 v-for 如何选择](#v-show 与 v-for 如何选择)
[7. v-for 循环](#7. v-for 循环)
[8. v-bind:key 唯一标识符](#8. v-bind:key 唯一标识符)
[2.2 事件绑定指令 v-on](#2.2 事件绑定指令 v-on)
[1. 基本用法与事件处理](#1. 基本用法与事件处理)
[2. 核心功能：修改数据](#2. 核心功能：修改数据)
[3. 事件调用](#3. 事件调用)
[4. 语法糖：简写形式](#4. 语法糖：简写形式)
[2.3 属性绑定指令](#2.3 属性绑定指令)
[1. v-bind：动态绑定属性](#1. v-bind：动态绑定属性)
[2. v-bind 绑定class属性的 4 种方式](#2. v-bind 绑定class属性的 4 种方式)
[(1) 对象格式（动态控制类名）](#(1) 对象格式（动态控制类名）)
[(2) 三元运算符格式（条件选择类名）](#(2) 三元运算符格式（条件选择类名）)
[(3) 数组格式（同时绑定多个类名）](#(3) 数组格式（同时绑定多个类名）)
[(4) 函数格式（动态返回类名）](#(4) 函数格式（动态返回类名）)
[3. v-bind 绑定style属性的 3 种方式](#3. v-bind 绑定style属性的 3 种方式)
[(1) 对象格式(动态控制单个/多个样式)](#(1) 对象格式(动态控制单个/多个样式))
[(2) 数组格式(合并多个样式对象)](#(2) 数组格式(合并多个样式对象))
[(3) 函数格式(动态计算样式)](#(3) 函数格式(动态计算样式))
[2.4 计算属性(computed)](#2.4 计算属性(computed))
[1. computed 基本用法](#1. computed 基本用法)
[2. computed 的 getter 与 setter](#2. computed 的 getter 与 setter)
[3. computed VS methods](#3. computed VS methods)
二、Vue.js 指令、事件与计算属性
2.1 Vue.js 基础指令
1. v-pre 跳过编译
v-pre 告诉 Vue："这个标签里的内容你别管，直接按原样显示给用户看。"
2. v-html 标签解析
v-html 告诉 Vue："把这段字符串当作 HTML 代码来解析并渲染到页面上。"
3. v-text 文本解析
v-text 和 Mustache 语法 (`{{ }}`) 几乎一样，都是用来更新元素的纯文本内容，但它不会解析 HTML 标签。
4. v-cloak 斗篷
当页面加载时，如果 Vue.js 文件比较大或者网络较慢，浏览器可能会先渲染出原始的 HTML 模板。这时，用户会短暂地看到 {{ message }} 这样的原始代码，而不是最终的数据。这个现象被称为"闪动"（Flash of Uncompiled Content）。
v-cloak 指令就是为了解决这个问题而生的。它本身没有任何作用，需要结合 CSS 才能发挥。
在这个例子中，用户在1.5秒内看到的将是 一片空白（因为元素被隐藏了），而不是 {{ pageTitle }}。1.5秒后，Vue 加载完毕，v-cloak 被移除，正确的标题和内容会瞬间显示出来。
5. v-show 显示
当你需要根据一个条件频繁地切换某个元素的显示状态时，v-show 是一个非常高效的选择。
v-show 通过简单地切换 CSS 的 display 属性来控制元素的显示和隐藏，属性的值可以直接填写表达式。且元素始终存在于 DOM 中。
它的工作原理非常直接：
- 当表达式为 true 时，元素正常显示（display: block 或其他默认值）。
- 当表达式为 false 时，元素被隐藏（display: none）。
6. v-if 条件判断与显示
v-if 也可以用来控制元素的显示与隐藏。
v-if 是真正的"条件渲染"，它不会去修改样式，而是根据条件的真假，直接操作 DOM 的结构。决定是 将元素添加到 DOM 中，还是 从 DOM 中移除 。元素在 DOM 中是"有"或"无"的关系，而不是"显示"或"隐藏"。
它的工作原理：
- 当表达式为 true 时，Vue 会创建这个元素并将其插入到 DOM 中。
- 当表达式为 false 时，Vue 会销毁这个元素，将其从 DOM 中完全移除。
v-show 与 v-for 如何选择
- 用 v-show：如果你有一个元素需要 非常频繁地 在显示和隐藏之间切换（比如一个响应鼠标悬停的提示框），用 v-show，因为它的切换性能更好。
- 用 v-if：如果一个元素在页面加载后 基本不会改变 显示状态，或者它在初始状态下就是隐藏的，用 v-if，因为它有更低的初始渲染开销，并且能真正地减少不必要的 DOM 节点。
7. v-for 循环
v-for 是 Vue 的循环指令，能根据一个数组（或对象）的数据，高效地生成一组重复的 DOM 结构。
它的基本语法是 v-for="(item, index) in arr"：
- item：是数组中当前正在被遍历的元素。
- index：是当前元素的索引（从0开始）。
- arr：是你想要遍历的原数组。
8. v-bind:key 唯一标识符
key 是给 v-for 循环出的每个元素一个唯一的身份证，让 Vue 能精准地识别、更新和重排元素，从而大幅提升性能并避免渲染错误。
如何选择 key 的值？
推荐使用：
- 唯一且稳定的 id
- id 是数据自带的，不会因为增删或排序而改变，能准确定位到数据本身。
- 例如：user.id
不推荐使用：
- 数组索引 (index)
- Index 会随着数组顺序变化而变化。当列表重排时，用 index 做 key 会导致 Vue 混淆元素，引发渲染错误或性能问题。
- 例如：index
- 唯一例外：如果你的列表是 静态的，永远不会发生增、删、排序等操作，那么用 index 作为 key 也是可以的。
2.2 事件绑定指令 v-on
v-on 是Vue中用于绑定事件监听的核心指令，其核心用法和要点如下：
1. 基本用法与事件处理
**绑定：**使用 v-on (或其简写 @ ) 在模板中为元素绑定事件，如 v-on:click="btnClick"。
**处理：**事件触发后执行的函数（事件处理器）必须在组件的 methods 选项中定义。
2. 核心功能：修改数据
事件处理函数的核心作用是修改 data 中的数据，从而驱动视图更新。
在 methods 中，通过 this.数据名 (如 this.flag) 的形式来访问和修改 data 中的数据。
3. 事件调用
在一个事件处理函数中，可以通过 this.方法名() 的形式调用 methods 中定义的其他方法，实现代码复用。
4. 语法糖：简写形式
v-on： 在实际开发中通常使用其简写形式 @ ，两者功能完全相同。
例如：v-on:click="handler"` 可简写为 @click="handler"，代码更简洁。
2.3 属性绑定指令
1. v-bind：动态绑定属性
当 HTML 标签的属性需要动态赋值（如从 Vue 的data中获取数据）时，使用v-bind指令。
例如：
简写规则： v-bind:属性名 可简写为 :属性名（如:href、:class）。
核心作用：
- 动态更新：data中的值变化时，绑定的属性会自动更新。
- 避免硬编码：替代直接写死属性值（如<a href="固定链接">），实现数据驱动视图。
对比其他指令：
- v-bind（:）→ 绑定属性（如:href）。
- v-on（@）→ 绑定事件（如@click）。
- 两者结合可实现数据与交互的联动。
2. v-bind 绑定class属性的 4 种方式
Vue.js 提供了灵活的class绑定方法，可根据需求选择最适合的形式。
(1) 对象格式（动态控制类名）
通过对象控制类名的添加与移除，键是类名，值是布尔值（true 表示添加，false 表示移除）
注：如果把 true 改为 false，则样式消失。
(2) 三元运算符格式（条件选择类名）
根据条件返回不同的类名，适合二选一的情况。（结合例子2.3-2(1)）
javascript
<!-- 条件为 true 时添加 fontblue，否则添加 bgpink -->
<li :class="isBlue ? 'fontblue' : 'bgpink'">
若isBlue为true，文字显示蓝色；否则显示粉色背景
</li>(3) 数组格式（同时绑定多个类名）
直接传入多个类名，适合同时添加多个固定类（结合例子2.3-2(1)）
javascript
<li :class="['fontblue', 'bgpink']">蓝色文字、粉色背景</li>(4) 函数格式（动态返回类名）
通过方法返回类名（字符串、对象或数组），适合复杂逻辑
3. v-bind 绑定style属性的 3 种方式
Vue 使用 v-bind:style (或简写 :style) 动态绑定内联样式，主要有三种方式：
(1) 对象格式(动态控制单个/多个样式)
直接绑定一个样式对象，键为 CSS 属性名（驼峰或短横线），值为动态变量。
- 单个样式
- 多个样式
(2) 数组格式(合并多个样式对象)
当样式来自不同对象时，可用数组合并。例如：
(3) 函数格式(动态计算样式)
通过方法返回样式对象或数组，适合复杂逻辑。
注意： CSS 属性名可用驼峰（如backgroundColor）或短横线（需引号包裹，如 'background-color'）。
2.4 计算属性(computed)
计算属性用于实时计算数据，它能将数据计算与模板分离，并带来性能优化。常见于购物车金额计算、表单联动等场景。
1. computed 基本用法
像数据属性一样声明一个函数，该函数返回计算后的值。模板中可直接引用，它会自动更新。
注意： computed中定义的属性名（如fullName）不能与data重复。
2. computed 的 getter 与 setter
在Vue.js文件中定义每个属性都使用 Object.defineProperty() 方法，该方法会为属性追加 get()方法与 set()方法，一般称为getter和setter。
默认只有 getter（只读），主要用来返回数据结果。setter可手动添加 ，当计算属性的值发生变化时触发。
3. computed VS methods
|----------|------------------|------------------|
| 特性 | computed | methods |
| 缓存 | 有缓存，依赖不变时重复调用不执行 | 无缓存，每次调用均执行 |
| 适用场景 | 依赖数据变化的复杂计算 | 需要主动触发的逻辑（如事件处理） |
| 性能 | 更高（适合频繁使用的计算） | 较低（每次调用均重新计算） |