v2官网：v2.cn.vuejs.org/
常见指令
- v-model
- 作用：给表单元素使用，实现数据双向绑定，可以快速获取和设置表单元素内容
- 语法：v-model='变量'
综合案例 - 记事本
功能总结
-
列表渲染
- v-for
- key值的设置
- 插值表达式
-
删除
- v-on传参调用
- filter过滤得到符合条件的新数组
- 覆盖原数组
-
添加
- v-model绑定
- unshift方法向数组最前面添加元素
-
底部统计和清空
- list.length统计长度
- 覆盖数组清空列表
- v-show控制隐藏
指令修饰符
- 通过 "." 指明一些指令 后缀，不同 后缀 封装了不同的处理操作 --> 简化代码
- @key.enter ---> 键盘回车监听
- v-model.trim ---> 去除首尾空格
- v-model.number ---> 转数字
- @事件名.stop ---> 阻止冒泡
- @事件名.prevent ---> 阻止默认行为
v-bind 对于样式控制的增强 --- 操作class
- 语法： :class="对象/数组"
- 对象 --> 键就是类名，值是布尔值。若值为true，有这个类，否则没有
- 数组 --> 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表
综合案例 - 页面tab导航高亮
-
核心思路
- 基于数据动态渲染tab ---> v-for
- 准备下标高亮的是哪一个tab ---> activeIndex
- 基于下标，动态控制 class类名 ---> v-bind:class
v-bind 对于样式控制的增强 --- 操作style
- 语法：:style="样式对象"
- 适用场景：某个具体属性的动态设置
v-model应用于其它表单元素
- 常见的表单元素都可以用v-model绑定关联 ---> 快速获取或设置表单元素的值
- 它会根据控件类型自动选取正确的方法来更新元素
- 给单选框加上name属性可以实现分组，组内元素不可同时选中
计算属性
- 概念：基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算。
- 语法：
- 声明在computed配置项中，一个计算属性对应一个函数
- 使用起来和普通属性一样使用 {{ 计算属性名 }}
computed计算属性 与 methods方法
computed
- 作用：封装了一段对于数据的处理，求得一个结果
- 缓存特性：computed会对计算出来的结果缓存，再次使用时直接读取缓存，从而提升性能
- 语法：
- 写在computed配置项中
- 作为属性，直接使用 ---> this.计算属性，调用以处理业务逻辑
methods
- 作用：给实例提供一个方法，调用以处理业务逻辑
计算属性的完整写法
- 计算属性默认简写，只能读取，不能修改
- 完整写法：
综合案例---成绩单
技术点总结
- 渲染（低于60分的高亮显示）
- v-if v-else：根据数据展示不同页面
- v-for：展示数据
- v-bind:class：动态控制样式
- 删除
- v-on:click绑定点击事件并传参，再用filter过滤覆盖原数组
- @click.prevent阻止默认行为
- 添加
- v-model 修饰符：.trim .number
- unshift 修改数组更新视图
- 统计总分、平均分
- computed 计算属性
- reduce 求和
效果图：
watch监听器
- 语法
- 简单写法 ---> 监视简单类型的变化
- 完整写法 ---> 添加额外的配置项（深度监视复杂类型，立刻执行）
水果购物车
技术点总结
- 渲染
- v-if/v-else
- v-for
- :class
- 删除
- 点击传参
- filter过滤覆盖原数组
- 修改个数
- 点击传参
- find方法找对象
- 全选反选
- computed的完整写法 = get/set
- every方法来遍历获取每一项的值
- forEach方法来遍历设置每一项的值
- 统计选中的总价和总数量
- computed + reduce条件求和
- 在reduce中设置条件
- 持久化到本地
- watch监视
- localStorage用来操作浏览器储存
- JSON.stringify转JSON格式
- JSON.parse来解析JSON格式
