day01
一、为什么要学习Vue
1.前端必备技能
2.岗位多，绝大互联网公司都在使用Vue
3.提高开发效率
4.高薪必备技能（Vue2+Vue3）
🧠 理论理解：
Vue 是当前前端三大主流框架之一，特别在中国生态中应用最广（远超 React）。它以“低学习门槛 + 高工程化能力”著称，适合从小项目快速扩展到大型系统开发。
🏢 企业实战理解：
-
阿里旗下的饿了么、飞猪等多个前台系统基于 Vue 构建
-
字节跳动的抖音后台管理系统大量使用 Vue2 + Vue3 共存架构
-
国内中小企业几乎 Vue 优先，Vue 工程化（+Vite、+TypeScript）已成招聘基础门槛
✅ 一、为什么要学习 Vue？
Q1：你为什么选择 Vue 而不是 React？*答：Vue 更适合我当前的学习路径和项目需求。它的语法更贴近前端开发者的直觉，文档完善，生态成熟，尤其在国内拥有非常广泛的应用场景。相比之下，React 更灵活但上手门槛略高，对于初学者而言，Vue 的“渐进式”特性更友好，能快速上手并做出完整项目。
📌 场景题 1：实时搜索建议功能如何用 Vue 实现？
背景描述：
字节跳动的搜索框组件，需要在用户输入关键字时从后端获取实时搜索建议，并展示在下拉列表中。希望保持输入的流畅性，避免请求过多或卡顿。
问题：
-
你如何用 Vue2 实现该组件的响应式行为？
-
如何避免用户每输入一个字就发送一次请求？
-
如何保证组件渲染和状态是同步的？
我会使用 v-model 实现 input 框双向绑定，配合 watch 监听 keyword 变化，并引入防抖机制（lodash.debounce）来减少请求频率。
列表展示部分用 v-if/v-for 渲染下拉候选项，避免空数据时渲染空结构。
响应式部分由 Vue 内部处理：keyword 的变化自动触发 watch，而候选数据绑定在 data 中，视图会自动更新。
核心代码包括：
- input 框：`<input v-model="keyword" />`
- watch 防抖：监听 keyword，并防抖请求
- 列表展示：v-if="results.length > 0" + v-for
二、什么是Vue
概念：Vue (读音 /vjuː/，类似于 view) 是一套 构建用户界面 的 渐进式 框架
Vue2官网：Vue.js
1.什么是构建用户界面
基于数据渲染出用户可以看到的界面
2.什么是渐进式
所谓渐进式就是循序渐进，不一定非得把Vue中的所有API都学完才能开发Vue，可以学一点开发一点
Vue的两种开发方式：
-
Vue核心包开发
场景：局部模块改造
-
Vue核心包&Vue插件&工程化
场景：整站开发
3.什么是框架
所谓框架：就是一套完整的解决方案
举个栗子
如果把一个完整的项目比喻为一个装修好的房子，那么框架就是一个毛坯房。
我们只需要在“毛坯房”的基础上，增加功能代码即可。
提到框架，不得不提一下库。
-
库，类似工具箱，是一堆方法的集合，比如 axios、lodash、echarts等
-
框架，是一套完整的解决方案，实现了大部分功能，我们只需要按照一定的规则去编码即可。
下图是 库 和 框架的对比。
框架的特点：有一套必须让开发者遵守的规则或者约束
咱们学框架就是学习的这些规则 官网
总结：什么是Vue？
Vue是什么：
什么是构建用户界面：
什么是渐进式：
什么是框架：
🧠 理论理解：
-
构建用户界面即“把数据变成界面”，Vue 提供数据响应式能力，使页面和数据自动同步
-
渐进式意味着你可以“从小到大”逐步引入 Vue 特性，适应各种开发规模
-
框架区别于库：框架负责“掌控流程”，而库由你来调用
🏢 企业实战理解：
-
比如在支付宝中，“Vue 的小组件”可以嵌入传统页面实现局部升级
-
拼多多在做活动页时，采用“Vue 核心包嵌入老页面”方式，快速上线
-
饿了么使用完整工程化框架 + Vue CLI + TS + ESLint + 自动化部署，实现复杂系统治理
✅ 二、Vue 是什么？渐进式是什么意思？
Q2：Vue 被称为“渐进式框架”，你理解的“渐进”指什么？
答：“渐进式”是指 Vue 的特性可以按需引入、逐步深入。从简单的插值表达式、事件绑定，到组件化开发、路由管理、状态管理等高级功能，开发者可以按项目规模逐步学习和使用，而不需要一开始就掌握所有功能。这种特性使 Vue 既适合小型组件嵌入，也适合构建大型 SPA 项目。
📌 场景题 2：你在管理系统中如何实现“根据角色动态显示菜单”？
背景描述：
你在腾讯的后台管理系统项目中，系统需要根据用户角色（admin / editor / visitor）动态显示侧边栏菜单，避免非权限用户访问非法页面。
问题：
-
如何结合 Vue 的响应式系统实现动态菜单？
-
在路由层级如何实现权限控制？
-
页面刷新后如何保证菜单和权限不丢失？
首先，角色信息应在登录后存入 Vuex/Pinia 和 localStorage。
路由层使用 Vue Router 提供的路由守卫，在 beforeEach 中根据权限进行页面访问判断。菜单组件通过动态遍历 route 配置生成菜单项（如 element 中的 <el-menu>）。
刷新后，会通过 token 获取用户角色并重新生成可访问路由列表并挂载到 router.addRoutes 中，从而保持权限一致。
关键技术点包括：
- 响应式菜单生成：v-for 动态渲染权限菜单
- 权限路由守卫：router.beforeEach 判权限
- 持久化：localStorage/sessionStorage 保留用户信息
三、创建Vue实例
我们已经知道了Vue框架可以 基于数据帮助我们渲染出用户界面，那应该怎么做呢？
比如就上面这个数据，基于提供好的msg 怎么渲染后右侧可展示的数据呢？
核心步骤（4步）：
-
准备容器
-
引包（官网） — 开发版本/生产版本
-
创建Vue实例 new Vue()
-
指定配置项，渲染数据
-
el:指定挂载点
-
data提供数据
-
总结：创建Vue实例需要执行哪4步
🧠 理论理解：
Vue 采用 new Vue({...}) 创建实例的方式，本质上是“响应式对象工厂”。实例生命周期由 Vue 接管，并渲染绑定的 DOM 元素。
🏢 企业实战理解：
-
在小米商城，产品页中的多个推荐模块用“多个 Vue 实例”分别挂载
-
Vue 实例设计为响应式的好处是：不用手动更新 UI，减少 Bug、提升效率
✅ 三、Vue 实例创建步骤及原理
Q3：Vue 实例创建后发生了什么？它是怎么实现数据响应的？
**答：**创建 Vue 实例后，Vue 会执行以下几个关键步骤：
-
将
data中的数据通过响应式系统处理（Vue2 使用Object.defineProperty，Vue3 使用Proxy）； -
编译模板（或模板字符串），生成渲染函数；
-
建立数据和 DOM 之间的依赖关系；
-
当数据发生变化时，触发 watcher，重新渲染 DOM。
📌 场景题 3：你是如何处理 v-if 和 v-show 的性能问题的？
背景描述：
在美团的 Vue 项目中，页面存在多个 tab 切换，每个 tab 内容渲染复杂，你发现性能不佳，切换卡顿。
问题：
-
你会用 v-if 还是 v-show？
-
如何判断是否要缓存内容组件？
-
有没有更优解？
在频繁切换的 tab 场景中，我会优先使用 v-show，因为它不会频繁销毁和重建 DOM。
如果 tab 页内容较重（如复杂表格、图表），我会配合 <keep-alive> 组件缓存每个 tab 页面状态，避免切换时重新渲染。
当然，前提是每个组件内部需要有 name 属性以供缓存识别。
使用 v-if 是在完全不展示/创建 DOM 的场景，如 “新建弹窗”。
性能优化是平衡点：频繁切换 + 保留状态 → v-show + keep-alive；一次性判断 → v-if。
四、插值表达式 {{}}
插值表达式是一种Vue的模板语法
我们可以用插值表达式渲染出Vue提供的数据
1.作用：利用表达式进行插值，渲染到页面中
表达式：是可以被求值的代码，JS引擎会讲其计算出一个结果
以下的情况都是表达式：
money + 100
money - 100
money * 10
money / 10
price >= 100 ? '真贵':'还行'
obj.name
arr[0]
fn()
obj.fn()2.语法
插值表达式语法：{{ 表达式 }}
<h3>{{title}}<h3>
<p>{{nickName.toUpperCase()}}</p>
<p>{{age >= 18 ? '成年':'未成年'}}</p>
<p>{{obj.name}}</p>
<p>{{fn()}}</p>3.错误用法
1.在插值表达式中使用的数据 必须在data中进行了提供
<p>{{hobby}}</p> //如果在data中不存在 则会报错
2.支持的是表达式，而非语句，比如：if for ...
<p>{{if}}</p>
3.不能在标签属性中使用 {{ }} 插值 (插值表达式只能标签中间使用)
<p title="{{username}}">我是P标签</p>4.总结
1.插值表达式的作用是什么
2.语法是什么
3.插值表达式的注意事项
🧠 理论理解：
Vue 提供插值表达式语法 {{ }} 来绑定数据和视图，底层基于模板编译器解析并生成渲染函数，渲染过程具有惰性和缓存优化。
🏢 企业实战理解：
-
在企业项目中，经常用于表格展示中的单元格内容、标题动态渲染
-
支持表达式但不支持语句的限制，可以防止开发者在模板中写“副作用逻辑”
✅ 四、插值表达式
Q4：Vue 中 {{}} 插值表达式能写 if 吗？为什么不支持？
**答：**不支持。{{}} 中只能写 JS 表达式（返回值的代码），不能写语句（如 if、for、while）。Vue 模板会被编译为渲染函数，插值表达式需要是纯函数式求值，不允许出现控制结构以保证运行时性能和安全性。
📌 场景题 4：Vue 项目中如何防止“删除按钮误点”？
背景描述：
你在支付宝的运营系统中负责一个图书管理页面，有一个“删除”按钮，你发现用户常误点，导致数据丢失。
问题：
-
你如何设计这个按钮的行为？
-
Vue 中怎么实现这个需求？
-
如何让交互体验合理且高效？
我会为删除按钮添加“确认操作”机制，使用 ant-design-vue 的 <a-popconfirm> 或 Element 的 MessageBox。
具体流程为：
1. 用户点击删除按钮
2. 弹出确认弹窗
3. 用户点击确认后才执行 delete 操作
实现上，通过 v-on:click 绑定 delete 方法，并在方法中控制 confirm 的逻辑，或直接使用内置组件。
Vue 的响应式可以保证 UI 和状态同步，误操作率也大幅降低。
五、响应式特性
1.什么是响应式？
简单理解就是数据变，视图对应变。
2.如何访问 和 修改 data中的数据（响应式演示）
data中的数据, 最终会被添加到实例上
① 访问数据： "实例.属性名"
② 修改数据： "实例.属性名"= "值"
3.总结
-
什么是响应式
-
如何访问和修改data中的数据呢
🧠 理论理解：
Vue 的响应式原理基于 Object.defineProperty（Vue2）或 Proxy（Vue3），核心是“依赖收集 + 派发更新”。
🏢 企业实战理解：
-
在拼多多管理后台，用户点击“启用/禁用”按钮时，状态变更后自动反映在 UI，无需手动 DOM 操作
-
在百度地图数据看板中，Vue 的响应式系统让图表、数值同步更新成为可能
✅ 五、响应式原理
Q5：Vue 是如何实现响应式的？Vue2 和 Vue3 有什么不同？
答：
-
Vue2 使用
Object.defineProperty为每个属性添加 getter/setter，配合依赖收集机制实现响应式。 -
Vue3 使用
Proxy，可以监听对象的新增、删除、嵌套等所有操作，性能更好、覆盖面更广。
📌 场景题 5：你如何在 Vue 中处理异步请求失败后的 UI 恢复？
背景描述：
在网易后台项目中，某些页面需要加载远程数据，如果接口失败要展示“重试”按钮，并确保 UI 状态一致。
问题：
-
Vue 怎么监听接口状态？
-
如何恢复页面？
-
你的数据和状态如何组织？
我会使用一个请求状态标志 `loading` 和 `error` 来标记当前接口状态：
- loading: true → 显示加载中组件
- error: true → 显示错误提示和“重试”按钮
- 数据加载成功后：展示页面内容
Vue 的响应式系统会自动根据 data 变化重新渲染 UI。
重试操作只需要再次发起接口请求，同时重置状态标志。
这种状态组织模式符合“最小状态单元”设计，也方便后续维护和调试。
六、Vue开发者工具安装
-
通过谷歌应用商店安装（国外网站）
-
极简插件下载（推荐） 极简插件官网_Chrome插件下载_Chrome浏览器应用商店
安装步骤：
安装之后可以F12后看到多一个Vue的调试面板
🧠 理论理解：
Vue DevTools 是用于调试响应式状态、组件树、事件派发、路由信息的开发插件。帮助开发者“观察响应式数据流”。
🏢 企业实战理解：
-
字节跳动内部所有 Vue 项目强制使用 DevTools 开启 debug 模式，提高问题排查效率
-
饿了么通过 Vue DevTools 快速定位状态未更新的问题，在大型复杂表单中非常常用
✅ 六、v-if 和 v-show 区别
Q6：v-if 和 v-show 区别？怎么选择？
答：
| 比较项 | v-if | v-show |
|---|---|---|
| 原理 | 动态创建/销毁 DOM | 通过 display: none 控制显示 |
| 初次渲染 | 有开销 | 性能好 |
| 切换频繁 | 不推荐 | 推荐 |
| 适用场景 | 条件复杂、一次性判断 | 频繁显示隐藏，如 tab 页切换 |
使用建议：频繁切换用 v-show，一次性判断用 v-if。
七、Vue中的常用指令
概念：指令（Directives）是 Vue 提供的带有 v- 前缀 的 特殊 标签属性。
为啥要学：提高程序员操作 DOM 的效率。
vue 中的指令按照不同的用途可以分为如下 6 大类：
-
内容渲染指令（v-html、v-text）
-
条件渲染指令（v-show、v-if、v-else、v-else-if）
-
事件绑定指令（v-on）
-
属性绑定指令 （v-bind）
-
双向绑定指令（v-model）
-
列表渲染指令（v-for）
指令是 vue 开发中最基础、最常用、最简单的知识点。
🧠 理论理解：
Vue 的指令本质是“运行时 DOM 操作行为的抽象”，本质是绑定到元素生命周期中的钩子函数（如 bind、update、unbind）。
🏢 企业实战理解：
-
滴滴在设备管理后台中，用
v-if控制表格弹窗、状态组件是否渲染，提升效率 -
使用
v-model快速实现复杂表单绑定是中后台常见场景
✅ 七、事件绑定与传参
Q7：Vue 中事件处理函数怎么传参数？如何传事件对象？
答：
在模板中调用方法时可以这样写：
<button @click="handleClick('参数1', $event)">点击</button>
在 methods 中：
methods: {
handleClick(arg, e) {
console.log(arg, e) // arg 是自定义参数，e 是事件对象
}
}
注意：传参时需要手动写 $event，否则 Vue 不会自动传递事件对象。
八、内容渲染指令
内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下2 个：
-
v-text（类似innerText）
-
-
使用语法：
<p v-text="uname">hello</p>，意思是将 uame 值渲染到 p 标签中 -
类似 innerText，使用该语法，会覆盖 p 标签原有内容
-
-
v-html（类似 innerHTML）
-
-
使用语法：
<p v-html="intro">hello</p>，意思是将 intro 值渲染到 p 标签中 -
类似 innerHTML，使用该语法，会覆盖 p 标签原有内容
-
类似 innerHTML，使用该语法，能够将HTML标签的样式呈现出来。
-
代码演示：
<div id="app">
<h2>个人信息</h2>
// 既然指令是vue提供的特殊的html属性，所以咱们写的时候就当成属性来用即可
<p v-text="uname">姓名：</p>
<p v-html="intro">简介：</p>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
uname:'张三',
intro:'<h2>这是一个<strong>非常优秀</strong>的boy<h2>'
}
})
</script>🧠 理论理解：
-
v-text等价于 innerText -
v-html等价于 innerHTML，但注意其存在安全隐患（XSS）
🏢 企业实战理解：
-
在 Vue 写活动页时，
v-html用于插入后端下发的“带样式说明文本” -
多数大厂（如京东）已限制在项目中使用
v-html，转为服务端过滤或富文本组件替代
✅ 八、属性绑定（v-bind）
Q8：v-bind 和插值表达式的区别是什么？
答：
-
插值表达式（
{{}}）只能用于标签中间渲染文本； -
v-bind是用于绑定标签的属性值，如:src,:href,:title； -
插值不能在标签属性中使用，但
v-bind可以。
九、条件渲染指令
条件判断指令，用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是：
-
v-show
-
作用： 控制元素显示隐藏
-
语法： v-show = "表达式" 表达式值为 true 显示， false 隐藏
-
原理： 切换 display:none 控制显示隐藏
-
场景：频繁切换显示隐藏的场景
-
-
v-if
-
作用： 控制元素显示隐藏（条件渲染）
-
语法： v-if= "表达式" 表达式值 true显示， false 隐藏
-
原理： 基于条件判断，是否创建 或 移除元素节点
-
场景： 要么显示，要么隐藏，不频繁切换的场景
示例代码：
<div id="app"> <div class="box">我是v-show控制的盒子</div> <div class="box">我是v-if控制的盒子</div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { flag: false } }) </script> -
-
v-else 和 v-else-if
-
作用：辅助v-if进行判断渲染
-
语法：v-else v-else-if="表达式"
-
需要紧接着v-if使用
-
示例代码：
<div id="app">
<p>性别：♂ 男</p>
<p>性别：♀ 女</p>
<hr>
<p>成绩评定A：奖励电脑一台</p>
<p>成绩评定B：奖励周末郊游</p>
<p>成绩评定C：奖励零食礼包</p>
<p>成绩评定D：惩罚一周不能玩手机</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
gender: 2,
score: 95
}
})
</script>🧠 理论理解：
-
v-show修改 CSS display，性能好、但始终保留 DOM -
v-if控制 DOM 创建和销毁，初次渲染开销大，但节省内存
🏢 企业实战理解：
-
淘宝商品页中详情/评价/推荐模块切换采用
v-show，提升切换体验 -
动态表单字段渲染（如新增地址）用
v-if控制，有条件才创建
✅ 九、v-for 使用 key 的意义？
Q9：为什么 v-for 中建议设置 key？为什么不推荐 index 作为 key？
答：
Vue 使用 Diff 算法来优化列表更新，通过 key 快速定位节点。
-
使用
key是为了提升渲染性能，避免错误复用旧节点； -
推荐使用稳定唯一的 id，而不是 index；
-
使用 index 当 key 会在数据顺序变化时复用错误组件，可能导致数据错乱、动画错位等问题。
十、事件绑定指令
使用Vue时，如需为DOM注册事件，及其的简单，语法如下：
-
<button v-on:事件名="内联语句">按钮</button>
-
<button v-on:事件名="处理函数">按钮</button>
-
<button v-on:事件名="处理函数(实参)">按钮</button>
-
v-on:简写为 @
-
内联语句
<div id="app"> <button @click="count--">-</button> <span>{{ count }}</span> <button v-on:click="count++">+</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { count: 100 } }) </script> -
事件处理函数
注意：
-
事件处理函数应该写到一个跟data同级的配置项（methods）中
-
methods中的函数内部的this都指向Vue实例
-
<div id="app">
<button>切换显示隐藏</button>
<h1 v-show="isShow">黑马程序员</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
isShow: true
}
})
</script>3.给事件处理函数传参
-
如果不传递任何参数，则方法无需加小括号；methods方法中可以直接使用 e 当做事件对象
-
如果传递了参数，则实参
$event表示事件对象，固定用法。
<style>
.box {
border: 3px solid #000000;
border-radius: 10px;
padding: 20px;
margin: 20px;
width: 200px;
}
h3 {
margin: 10px 0 20px 0;
}
p {
margin: 20px;
}
</style>
<div id="app">
<div class="box">
<h3>小黑自动售货机</h3>
<button>可乐5元</button>
<button>咖啡10元</button>
<button>牛奶8元</button>
</div>
<p>银行卡余额：{{ money }}元</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
money: 100
}
})
</script>🧠 理论理解：
-
Vue 事件绑定支持“内联语句 + 方法名 + 参数传递”，自动处理
this指向 -
@click是v-on:click的语法糖，适合大量简写操作
🏢 企业实战理解：
-
美团移动端中，按钮事件几乎全部使用 Vue 的
@click绑定方式 -
多模块点击交互统一抽象到
methods中维护，提高项目可维护性
✅ 十、双向绑定原理
Q10：v-model 的原理是什么？
答：
v-model 是 :value + @input 的语法糖：
<input v-model="msg" />
等价于：
<input :value="msg" @input="msg = $event.target.value" />
Vue 自动帮你绑定 input 事件，同时更新 data 中的值，实现双向数据绑定。
十一、属性绑定指令
-
作用：动态设置html的标签属性 比如：src、url、title
-
语法：v-bind:属性名=“表达式”
-
v-bind:可以简写成 => :
比如，有一个图片，它的 src 属性值，是一个图片地址。这个地址在数据 data 中存储。
则可以这样设置属性值：
-
<img v-bind:src="url" /> -
<img :src="url" />（v-bind可以省略）
<div id="app">
<img v-bind:src="imgUrl" v-bind:title="msg" alt="">
<img :src="imgUrl" :title="msg" alt="">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
imgUrl: './imgs/10-02.png',
msg: 'hello 波仔'
}
})
</script>🧠 理论理解：
-
v-bind绑定任意 HTML 属性，使得属性值可以动态响应 data 数据 -
支持 JS 表达式，支持对象语法（用于 class、style）
🏢 企业实战理解：
-
字节跳动的“视频管理系统”中，图片路径、标题、链接全部采用
:src,:title动态绑定 -
v-bind:class与:style在后台复杂状态控制中非常常用
✅ 十一、实际业务场景题（综合）
Q11：你用 Vue 实现过哪些具体功能？有没有遇到什么难点？
答：
我曾用 Vue 实现一个“智能交通前端管理系统”，实现了视频画面动态切换、行人列表渲染、实时报警提示等功能。用到了 v-if 条件控制警报组件、v-for 渲染摄像头数据、v-model 实现搜索栏联动。难点主要在响应式数据同步和图表渲染节流方面，后来通过 watch + 防抖函数优化了体验。
十二、小案例-波仔的学习之旅
需求：默认展示数组中的第一张图片，点击上一页下一页来回切换数组中的图片
实现思路：
1.数组存储图片路径 ['url1','url2','url3'，...]
2.可以准备个下标index 去数组中取图片地址。
3.通过v-bind给src绑定当前的图片地址
4.点击上一页下一页只需要修改下标的值即可
5.当展示第一张的时候，上一页按钮应该隐藏。展示最后一张的时候，下一页按钮应该隐藏
<div id="app">
<button>上一页</button>
<div>
<img src alt="">
</div>
<button>下一页</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
list: [
'./imgs/11-00.gif',
'./imgs/11-01.gif',
'./imgs/11-02.gif',
'./imgs/11-03.gif',
'./imgs/11-04.png',
'./imgs/11-05.png',
]
}
})
</script>🧠 理论理解：
-
v-for语法支持数组、对象、数字等结构，内部使用key优化 diff 过程 -
建议始终提供稳定的 key，避免性能问题和渲染错误
🏢 企业实战理解：
-
百度内容管理平台使用
v-for渲染分页列表，结合分页组件形成高性能 UI -
key=index导致 DOM 复用错误的问题在多个大厂项目中出现，官方也明确建议“避免使用 index 作为 key”
十三、列表渲染指令
Vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。
v-for 指令需要使用 (item, index) in arr 形式的特殊语法，其中：
-
item 是数组中的每一项
-
index 是每一项的索引，不需要可以省略
-
arr 是被遍历的数组
此语法也可以遍历对象和数字
//遍历对象
<div v-for="(value, key, index) in object">{{value}}</div>
value:对象中的值
key:对象中的键
index:遍历索引从0开始
//遍历数字
<p v-for="item in 10">{{item}}</p>
item从1 开始🧠 理论理解：
-
v-model是:value+@input的语法糖，专为表单输入绑定设计 -
底层使用事件监听 + data 响应式结合，实现数据和 UI 双向流动
🏢 企业实战理解：
-
头条后台发布系统表单模块采用
v-model配合验证组件实现“实时校验 + UI 提示” -
京东前台使用
v-model结合搜索推荐功能，提高表单数据同步效率
十四、小案例-小黑的书架
需求：
1.根据左侧数据渲染出右侧列表（v-for）
2.点击删除按钮时，应该把当前行从列表中删除（获取当前行的id，利用filter进行过滤）
准备代码：
<div id="app">
<h3>小黑的书架</h3>
<ul>
<li>
<span>《红楼梦》</span>
<span>曹雪芹</span>
<button>删除</button>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
booksList: [
{ id: 1, name: '《红楼梦》', author: '曹雪芹' },
{ id: 2, name: '《西游记》', author: '吴承恩' },
{ id: 3, name: '《水浒传》', author: '施耐庵' },
{ id: 4, name: '《三国演义》', author: '罗贯中' }
]
}
})
</script>十五、v-for中的key
语法： key="唯一值"
作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。
为什么加key：Vue 的默认行为会尝试原地修改元素（就地复用）
实例代码：
<ul>
<li v-for="(item, index) in booksList" :key="item.id">
<span>{{ item.name }}</span>
<span>{{ item.author }}</span>
<button @click="del(item.id)">删除</button>
</li>
</ul>注意：
-
key 的值只能是字符串 或 数字类型
-
key 的值必须具有唯一性
-
推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）
十六、双向绑定指令
所谓双向绑定就是：
-
数据改变后，呈现的页面结果会更新
-
页面结果更新后，数据也会随之而变
作用： 给表单元素（input、radio、select）使用，双向绑定数据，可以快速 获取 或 设置 表单元素内容
语法：v-model="变量"
需求：使用双向绑定实现以下需求
-
点击登录按钮获取表单中的内容
-
点击重置按钮清空表单中的内容
<div id="app">
账户：<input type="text"> <br><br>
密码：<input type="password"> <br><br>
<button>登录</button>
<button>重置</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
username: '',
password: ''
},
})
</script>十七、综合案例-小黑记事本
功能需求：
-
列表渲染
-
删除功能
-
添加功能
-
底部统计 和 清空
扫一扫
517
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
