文章目录
- Day03\_核心问题
- 01\_v-for更新监测
- 02\_v-for如何更新DOM
- ==练习时间:5m==
- 03\_虚拟DOM
- 04\_虚拟DOM比较
- 05\_虚拟DOM比较内容?
- 阶段总结
- 06\_vue\_动态class
- 07\_vue\_动态style
- ==练习时间:5m==
- 08\_案例\_品牌管理(铺设)
- ==练习时间:30s(输入命令初始化项目)==
- 09\_案例\_品牌管理(新增)
- ==练习时间:8m==
- 10\_案例\_品牌管理(删)
- ==练习时间:3m==
- 11\_vue\_过滤器
- 12\_vue\_过滤器更多用法
- 14\_案例\_品牌管理(时间格式化)
- ==练习时间:5m==
- 15\_vue\_计算属性
- 16\_vue\_计算属性缓存
- 17\_案例\_品牌管理(总价和均价)
- ==练习时间:5m==
- 18\_vue\_计算属性完整写法
- 19\_案例\_小选影响全选
- ==练习时间:3m==
- 20\_案例\_全选影响小选
- ==练习时间:3m==
- 21\_案例\_反选
- ==练习时间:3m==
- 22\_vue\_侦听器
- 23\_vue\_深度侦听和立即侦听
- 24\_案例\_品牌管理(数据缓存)
- ==练习时间:5m==
Day03_核心问题
01_v-for更新监测
问题
- 哪些数组方法会导致v-for更新页面?
- 有的数组方法不导致v-for更新页面, 如何处理?
答案
- 哪些数组方法会导致v-for更新页面?
- 可以改变原数组的方法
- 有的数组方法不导致v-for更新页面, 如何处理?
- 拿返回的新数组, 直接替换旧数组
- this.$set()方法更新某个值
02_v-for如何更新DOM
问题
- v-for更新时, 是如何操作DOM的?
答案
- v-for更新时, 是如何操作DOM的?
- 循环出新的虚拟DOM结构, 和旧的虚拟DOM结构对比, 尝试复用标签就地更新内容
练习时间:5m
03_虚拟DOM
问题
- 虚拟DOM是什么?
- 虚拟DOM好处?
答案
- 虚拟DOM是什么?
- 本质就是一个JS对象, 保存DOM关键信息
- 虚拟DOM好处?
- 提高DOM更新的性能, 不频繁操作真实DOM, 在内存中找到变化部分, 再更新真实DOM(打补丁)
04_虚拟DOM比较
问题
- diff算法如何比较新旧虚拟DOM?
- 根元素变化?
- 根元素未变, 属性改变?
答案
- diff算法如何比较新旧虚拟DOM?
- 同级比较
- 根元素变化?
- 删除重新建立整个DOM树
- 根元素未变, 属性改变?
- DOM复用, 只更新属性
05_虚拟DOM比较内容?
问题
- 子元素或者内容改变会分diff哪2种情况比较?
- key值要求是?
- key应该怎么用?
- key的好处?
答案
- 子元素或者内容改变会分diff哪2种情况比较?
- 无key, 就地更新
- 有key, 按照key比较
- key值要求是?
- 唯一不重复的字符串或者数值
- key应该怎么用?
- 有id用id, 无id用索引
- key的好处?
- 可以配合虚拟DOM提高更新的性能
阶段总结
- v-for什么时候会更新页面呢?
- 数组采用更新方法, 才导致v-for更新页面
- vue是如何提高更新性能的?
- 采用虚拟DOM+diff算法提高更新性能
- 虚拟DOM是什么?
- 本质是保存dom关键信息的JS对象
- diff算法如何比较新旧虚拟DOM?
- 根元素改变 – 删除当前DOM树重新建
- 根元素未变, 属性改变 – 更新属性
- 根元素未变, 子元素/内容改变
- 无key – 就地更新
- 有key – 按key比较
06_vue_动态class
问题
- 如何给标签class属性动态赋值?
答案
- 如何给标签class属性动态赋值?
- :class=“{类名: 布尔值}”, true使用, false不用
07_vue_动态style
问题
- 给style赋值和class区别是?
答案
- 给style赋值和class区别是?
- :class="{类名: 布尔值}”, true使用, false不用
- :style=“{css属性名: 值}”
练习时间:5m
08_案例_品牌管理(铺设)
问题
- 用到了哪些技术点?
答案
- 用到了哪些技术点?
- 布局用bootstrap, yarn下载引入使用
- v-for把数据渲染到表格里
- :class动态判断价格给红色类名
练习时间:30s(输入命令初始化项目)
09_案例_品牌管理(新增)
问题
- 涉及到了哪些技术点?
答案
- 涉及到了哪些技术点?
- @绑定事件
- v-model收集表单数据
- .prevent阻止按钮提交表单刷新页面
- v-model修饰符
- 数组取最后一个元素
练习时间:8m
10_案例_品牌管理(删)
问题
- 涉及到了哪些技术点?
答案
- 涉及到了哪些技术点?
- .prevent使用
- 事件传索引
- 删除数组元素方法
- id值判断问题
练习时间:3m
11_vue_过滤器
问题
- Vue中过滤器作用?
- 如何定义过滤器?
- 如何使用过滤器?
- 过滤器注意事项?
答案
- Vue中过滤器作用?
- 传入一个值, 处理后返回另外一个值
- 如何定义过滤器?
- main.js – Vue.filter(‘过滤器名字’, 函数体)
- 某.vue文件 – filters: {‘过滤器名字’: 函数体}
- 如何使用过滤器?
- Vue变量 | 过滤器名字
- 过滤器注意事项?
- 插值表达式 / 动态属性
12_vue_过滤器更多用法
问题
- 多个过滤器使用?
- 如何给过滤器传额外值
答案
- 多个过滤器使用?
- vue变量 | 过滤器1 | 过滤器2
- 如何给过滤器传额外值
- vue变量 | 过滤器(值)
14_案例_品牌管理(时间格式化)
问题
- 涉及到了哪些技术点?
答案
- 涉及到了哪些技术点?
- yarn下包
- 过滤器定义和使用
- moment复习
练习时间:5m
15_vue_计算属性
问题
- 计算属性使用场景?
- 计算属性特点?
- 计算属性注意事项?
答案
- 计算属性使用场景?
- 当变量的值, 需要通过别人计算而得来
- 计算属性特点?
- 函数内使用的变量改变, 重新计算结果返回
- 计算属性注意事项?
- 计算属性名和data里名字不能重复
16_vue_计算属性缓存
问题
- 计算属性好处是?
- 计算属性使用场景?
答案
- 计算属性好处是?
- 带缓存
- 依赖项不变, 直接从缓存取
- 依赖项改变, 函数自动执行并重新缓存
- 计算属性使用场景?
- 当变量值, 依赖其他变量计算而得来才用
17_案例_品牌管理(总价和均价)
问题
- 涉及到的知识点?
答案
- 涉及到的知识点?
- computed定义和使用计算属性
- 数组reduce方法累积运算
练习时间:5m
18_vue_计算属性完整写法
问题
- 何时用计算属性完整写法?
- set函数和get函数什么执行?
答案
- 何时用计算属性完整写法?
- 给计算属性变量赋值时
- set函数和get函数什么执行?
- set接收要赋予的值
- get里要返回给这个计算属性具体值
19_案例_小选影响全选
问题
- 小选框如何影响全选框选中状态的?
答案
- 小选框如何影响全选框选中状态的?
- v-model给全选框绑定isAll计算属性
- isAll计算属性里返回统计小选框选中状态结果
练习时间:3m
20_案例_全选影响小选
问题
- 全选如何影响小选框选中状态的?
答案
- 全选如何影响小选框选中状态的?
- 小选框v-model, 关联数组里对象的c属性
- isAll计算属性的set方法, 拿到全选框状态
- 状态值赋给, 数组里每个对象的c属性
练习时间:3m
21_案例_反选
问题
- 反选如何实现的?
答案
- 反选如何实现的?
- 遍历每个对象, 把c属性的值取反再赋予回去
练习时间:3m
22_vue_侦听器
问题
- 如何侦听到某个变量值改变呢?
答案
- 如何侦听到某个变量值改变呢?
- 使用watch配置项, key是要侦听的data/计算属性名
23_vue_深度侦听和立即侦听
问题
- 如何侦听一个对象/数组呢?
- 侦听器函数马上执行?
答案
- 如何侦听一个对象/数组呢?
- 把侦听器写成对象形式, 给handler方法和deep:true
- 侦听器函数马上执行?
- immediate: true
24_案例_品牌管理(数据缓存)
问题
- 涉及到了哪些知识点?
答案
- 涉及到了哪些知识点?
- watch深度侦听数组, deep: true
- localStorage本地缓存里只能存储字符串
- JSON.stringify和JSON.parse使用
- 逻辑或