JavaWeb从0到1-DAY3.1- Vue(ii)

Vue 常用指令学习笔记

一、这一章在讲什么

这一章主要讲 Vue 中最常用的几类指令：列表渲染、条件渲染、表单绑定、事件绑定。核心内容包括：v-for 怎样根据数组生成列表，v-if 和 v-show 怎样控制显示隐藏，v-model 怎样把表单和数据绑在一起，v-on 怎样给元素绑定事件，以及 methods 和 this 在交互里分别起什么作用。整体上，这一章是在把 Vue 从"能显示数据"推进到"能根据数据和用户操作做交互"。

二、核心概念

1. `v-for`

它是什么
- v-for 是 Vue 的列表渲染指令。
有什么作用（为什么引入这个概念？）
- 当页面要显示一组数据时，不需要手写很多重复标签，而是让 Vue 根据数据自动重复生成结构。
它的原理（怎么实现的？）
- Vue 会遍历数组或对象集合，每取出一项，就渲染一份对应的标签结构。
- v-for="item in list" 中：
  - list 是被遍历的数据源
  - item 是每次遍历时拿到的当前数据项
初学者容易混淆的点
- item 不是关键字，只是临时变量名。
- list 是整组数据，不是某一项。

2. `key`

它是什么
- key 是 v-for 中给每一项设置的唯一标识。
有什么作用（为什么引入这个概念？）
- 当列表新增、删除、排序变化时，Vue 需要靠 key 更准确地识别每一项。
它的原理（怎么实现的？）
- Vue 在更新列表时，会用 key 判断"谁是谁"，避免把不同数据项混在一起。
初学者容易混淆的点
- key 可以类比"身份证"或"学号"，不是数据库关键字那个层面的概念。
- index 不太推荐当 key，因为顺序一变，index 也会变，容易让 Vue 识别不准确。

3. `v-if`

它是什么
- v-if 是 Vue 的条件渲染指令。
有什么作用（为什么引入这个概念？）
- 用来根据条件决定某个元素要不要渲染出来。
它的原理（怎么实现的？）
- 条件成立时，Vue 创建并渲染元素；条件不成立时，Vue 不渲染或移除这个元素节点。
初学者容易混淆的点
- v-if="false" 不是"只是隐藏"，而是这个元素通常不会出现在 DOM 中。

4. `v-show`

它是什么
- v-show 也是 Vue 中控制显示隐藏的指令。
有什么作用（为什么引入这个概念？）
- 用来频繁切换元素显示和隐藏。
它的原理（怎么实现的？）
- 元素始终会先渲染出来，只是通过 CSS 的 display 控制是否显示。
初学者容易混淆的点
- v-show="false" 时，元素还在 DOM 中，只是看不见。

5. `v-if` / `v-else-if` / `v-else`

它是什么
- 这是 Vue 中的条件链式判断写法。
有什么作用（为什么引入这个概念？）
- 当一个条件不够，需要多种情况判断时，可以像 if ... else if ... else 一样写。
它的原理（怎么实现的？）
- Vue 会按顺序判断条件，符合哪一个就渲染哪一个分支。
初学者容易混淆的点
- v-else-if 必须跟在 v-if 后面。
- v-else 也必须跟在 v-if 或 v-else-if 后面，不能单独写。

6. `v-model`

它是什么
- v-model 是表单元素上的双向数据绑定指令。
有什么作用（为什么引入这个概念？）
- 可以方便地获取用户输入，也可以把数据直接显示到输入框等表单项中。
它的原理（怎么实现的？）
- Vue 一方面把数据同步到表单元素上，另一方面监听用户输入，再把变化同步回数据。
初学者容易混淆的点
- "双向"不是两个表单互相绑，而是"数据影响表单，表单也影响数据"。
- v-model 绑定的变量必须先在 data() 中定义。

7. `v-on`

它是什么
- v-on 是 Vue 中绑定事件的指令。
有什么作用（为什么引入这个概念？）
- 让页面在用户点击、输入、提交等操作时执行对应方法。
它的原理（怎么实现的？）
- 本质上和原生 JS 的事件监听思路一致，只是 Vue 允许你直接在模板中声明"这个事件触发哪个方法"。
初学者容易混淆的点
- v-on:click="handle" 中：
  - click 是事件名
  - handle 是方法名
- @click="handle" 是 v-on:click="handle" 的简写。

8. `methods`

它是什么
- methods 是 Vue 中存放方法的地方。
有什么作用（为什么引入这个概念？）
- 把点击按钮、清空表单、执行查询等行为逻辑集中写在这里。
它的原理（怎么实现的？）
- 当模板中的事件触发时，Vue 会去 methods 中找到对应方法并执行。
初学者容易混淆的点
- data() 管数据，methods 管动作，不要混在一起。

9. `methods` 中的 `this`

它是什么
- methods 中的 this 指向当前 Vue 实例。
有什么作用（为什么引入这个概念？）
- 这样我们就可以在方法里访问和修改 data() 中定义的数据。
它的原理（怎么实现的？）
- Vue 在执行这些方法时，会把它们放到当前 Vue 实例的上下文中，所以 this 能拿到实例上的数据。
初学者容易混淆的点
- 这里的 this 不是按钮本身，也不是当前 DOM 元素。
- 它表示"当前这个 Vue 应用实例"，所以可以写 this.searchForm.name。

三、重难点

1. `v-for` 中的 `item` 和 `list` 要分清

结论
- list 是整组数据，item 是每次遍历出来的一项。
原因
- Vue 是根据 list 循环，然后把当前项临时交给 item 使用。
通俗比喻或小例子
- list 像全班名单，item 像点名时当前叫到的那个同学。

2. `key` 更像"身份证"，不是普通编号

结论
- key 用来唯一识别每一项，最好用真正稳定唯一的值。
原因
- 顺序变化时，Vue 需要靠 key 判断哪一项是谁。
通俗比喻或小例子
- id 像学号，index 像座位号。换座位后座位号会变，但学号不会变，所以更适合用学号识别人。

3. `v-if` 和 `v-show` 虽然都能隐藏，但底层不同

结论
- v-if 是"要不要渲染"，v-show 是"已经渲染了，要不要显示"。
原因
- v-if 会控制元素创建/移除，v-show 只是改 display。
通俗比喻或小例子
- v-if 像"房间要不要建"；v-show 像"房间已经建好，只是开门或关门"。

4. `v-if` 和 `v-show` 的使用场景要分清

结论
- 不频繁切换用 v-if，频繁切换用 v-show。
原因
- v-if 每次切换都可能涉及创建和删除；v-show 只是改显示样式，更适合来回切换。
通俗比喻或小例子
- 偶尔用一次的临时房间，可以决定建不建；经常使用的房间，建好了直接开关门更合适。

5. `v-model` 的"双向"一定要真正理解

结论
- 双向绑定表示：数据变，表单跟着变；表单输入变，数据也跟着变。
原因
- Vue 一边把数据同步到输入框，一边监听输入框变化再改回数据。
通俗比喻或小例子
- 就像两个同步的记事板，一边改了，另一边也立刻同步。

6. `v-model` 为什么必须先在 `data()` 里定义

结论
- 模板里绑定谁，data() 中就要先有谁。
原因
- Vue 需要明确的数据来源，否则它不知道这个变量从哪里来。
通俗比喻或小例子
- 表单像前台登记表，data() 像后台数据库。前台要登记某项内容，后台得先有这个字段。

7. `v-on`、`methods`、`this` 要连起来理解

结论
- v-on 负责监听事件，methods 负责写行为逻辑，this 负责在逻辑里访问 Vue 数据。
原因
- 用户操作发生后，Vue 会去执行方法；方法中再通过 this 拿到当前实例里的数据。
通俗比喻或小例子
- v-on 像按门铃，methods 像开门动作，this 像这户人家的主人，能拿到家里的东西。

四、代码理解

1. `v-for` 最小代表性代码

html 复制代码

<ul>
  <li v-for="student in students" :key="student.id">
    {{ student.name }} - {{ student.age }} 岁
  </li>
</ul>

javascript 复制代码

data() {
  return {
    students: [
      { id: 1, name: '张三', age: 18 },
      { id: 2, name: '李四', age: 19 }
    ]
  }
}

关键理解

students：整个数组
student：每次遍历出来的一项
:key="student.id"：用学生 id 做唯一标识
{``{ student.name }}：显示当前项的属性

语法规则总结

html 复制代码

v-for="item in list"
v-for="(item, index) in list"

2. `v-if` / `v-show` 最小代表性代码

html 复制代码

<p v-if="isShow">我是 v-if 控制的内容</p>
<p v-show="isShow">我是 v-show 控制的内容</p>

javascript 复制代码

data() {
  return {
    isShow: true
  }
}

关键理解

v-if：不成立时通常不渲染这个元素
v-show：不成立时元素还在，只是 display: none

条件链写法

html 复制代码

<span v-if="gender == 1">男生</span>
<span v-else-if="gender == 2">女生</span>
<span v-else>未知</span>

语法规则总结

v-else-if 必须跟在 v-if 后面
v-else 必须跟在 v-if 或 v-else-if 后面
不能单独写 v-else

3. `v-model` 最小代表性代码

html 复制代码

<div id="app">
  <input type="text" v-model="message">
  <p>{{ message }}</p>
</div>

javascript 复制代码

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

每一步在做什么

message 在 data() 中先定义好。
输入框通过 v-model 绑定到 message。
页面文本通过 {``{ message }} 显示 message。
用户修改输入框时，message 也会跟着变化。
message 变化后，页面文本也自动更新。

对象属性绑定示例

html 复制代码

<input v-model="searchForm.name">

javascript 复制代码

data() {
  return {
    searchForm: {
      name: '',
      gender: '',
      job: ''
    }
  }
}

4. `v-on` + `methods` 最小代表性代码

html 复制代码

<button @click="clearName">清空姓名</button>

javascript 复制代码

data() {
  return {
    searchForm: {
      name: '张三'
    }
  }
},
methods: {
  clearName() {
    this.searchForm.name = ''
  }
}

每一步在做什么

@click="clearName"：点击按钮时执行 clearName 方法。
clearName() 写在 methods 中。
this 指向当前 Vue 实例。
this.searchForm.name 就是在访问 data() 中的表单数据。
改成空字符串后，如果页面上有绑定这个数据的地方，也会一起更新。

语法规则总结

html 复制代码

v-on:click="handle"
@click="handle"

@ 是 v-on: 的简写。
click 是事件名。
handle / clearName 是方法名。

五、易错点

把 item 当成固定关键字。

它只是临时变量名，可以换成别的名字。

以为 key 随便写什么都行。

最好用稳定、唯一的 id，不要优先用会变的 index。

以为 v-if 和 v-show 只是语法不同。

实际上它们底层机制和适用场景都不同。

单独使用 v-else。

v-else 必须紧跟在 v-if / v-else-if 后面。

以为 v-model 只是"把输入框内容拿出来"。

它是双向绑定，既能从表单拿数据，也能把数据同步回表单。

v-model 绑定了一个没在 data() 中定义的变量。

模板里要用的数据，都应该先在 data() 中准备好。

以为 methods 里的 this 是按钮或当前元素。

这里的 this 指向 Vue 实例，不是 DOM 元素。

分不清 data() 和 methods。

data() 放数据，methods 放操作逻辑。

六、记忆口诀 / 通俗比喻

**v-for 遍历数据，数据几条，页面几条。**
**key 像身份证，index 更像座位号。**
**v-if 决定建不建，v-show 决定开不开门。**
不常切换用 v-if，频繁切换用 v-show。
**v-model 双向绑：数据变，表单变；表单变，数据也变。**
**v-on 绑事件，methods 写动作，this 去拿数据。**
**data 管状态，methods 管行为。**

七、应用

这一章的内容在实际开发里用得非常多，尤其是做查询页面、管理页面、登录注册页面时。

可以把它们串成一个完整场景：

页面上有一个搜索表单，输入框用 v-model 绑定查询条件
点击"查询"按钮时，用 v-on 绑定点击事件
查询逻辑写在 methods 中
方法里通过 this 拿到表单数据
查询结果返回后，用 v-for 把结果列表渲染到页面上
如果某些区域要按条件显示，就用 v-if 或 v-show 控制

也就是说，这几类指令并不是分开的知识点，而是在真实页面里一起工作的：

用户输入 -> 数据同步 -> 点击事件 -> 方法处理 -> 列表渲染 -> 条件显示隐藏

这就是 Vue 做页面交互的基本链路。

八、最终总结

这一章的关键，是学会 Vue 里"数据怎么显示、条件怎么判断、列表怎么渲染、用户操作怎么处理"。v-for 负责列表渲染，推荐配合唯一 key 使用；v-if 和 v-show 都能控制显示隐藏，但底层机制和适用场景不同；v-model 负责表单和数据的双向绑定；v-on 负责绑定事件，methods 负责写操作逻辑，this 负责在方法中访问 data() 的数据。把这些串起来，你就已经能写出最基础的 Vue 交互页面了。

JavaWeb从0到1-DAY3.1- Vue(ii)

Vue 常用指令学习笔记

一、这一章在讲什么

二、核心概念

1. v-for

2. key

3. v-if

4. v-show

5. v-if / v-else-if / v-else

6. v-model

7. v-on

8. methods

9. methods 中的 this

三、重难点

1. v-for 中的 item 和 list 要分清

2. key 更像"身份证"，不是普通编号

3. v-if 和 v-show 虽然都能隐藏，但底层不同

4. v-if 和 v-show 的使用场景要分清

5. v-model 的"双向"一定要真正理解

6. v-model 为什么必须先在 data() 里定义

7. v-on、methods、this 要连起来理解

四、代码理解

1. v-for 最小代表性代码

关键理解

语法规则总结

2. v-if / v-show 最小代表性代码

关键理解

条件链写法

语法规则总结

3. v-model 最小代表性代码

每一步在做什么

对象属性绑定示例

4. v-on + methods 最小代表性代码

每一步在做什么

语法规则总结

五、易错点

六、记忆口诀 / 通俗比喻

七、应用

八、最终总结

1. `v-for`

2. `key`

3. `v-if`

4. `v-show`

5. `v-if` / `v-else-if` / `v-else`

6. `v-model`

7. `v-on`

8. `methods`

9. `methods` 中的 `this`

1. `v-for` 中的 `item` 和 `list` 要分清

2. `key` 更像"身份证"，不是普通编号

3. `v-if` 和 `v-show` 虽然都能隐藏，但底层不同

4. `v-if` 和 `v-show` 的使用场景要分清

5. `v-model` 的"双向"一定要真正理解

6. `v-model` 为什么必须先在 `data()` 里定义

7. `v-on`、`methods`、`this` 要连起来理解

1. `v-for` 最小代表性代码

2. `v-if` / `v-show` 最小代表性代码

3. `v-model` 最小代表性代码

4. `v-on` + `methods` 最小代表性代码