DAY2:
1.指令补充
1.指令修饰符
通过 "." 指明一些指令 后缀，不同 后缀 封装了不同的处理操作 -> 简化代码
1.按键修饰符
@keyup.enter -> 键盘回车监听
2.v-model修饰符
v-model.trim -> 去除首尾空格
v-mode .number -> 转数字
3.事件修饰符
@事件名.stop -> 阻止冒泡
@事件名.prevent -> 阻止默认行为
看案例帮助理解 第24集 2：24
2.v-bind对于样式操作的增强
为了方便开发者进行样式控制，Vue 扩展了 v-bind 的语法，可以针对 class 类名 和 style 行内样式 进行控制
1.v-bind 对于样式控制的增强-操作class
1.语法 :class="对象/数组"
1.对象 -> 键就是类名，值是布尔值。如果值为 true，有这个类，否则没有这个类
<div class="box" :class="{ 类名1:布尔值，类名2:布尔值}"></div>
适用场景:一个类名，来回切换
2.数组 -> 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表
<div class="box" :class="[ 类名1，类名2，类名3]"></div>
适用场景:批量添加或删除类
看案例帮助理解 第25集 7分
2.v-bind 对于样式控制的增强-操作style
1.语法 :style="样式对象"
<div class="box" :style="{ cSS属性名1:CSS属性值，CSS属性名2:cSS属性值}"></div>
适用场景:某个具体属性的动态设置
看案例帮助理解 第25集 13：50
3.v-model应用于其他表单元素
常见的表单元素都可以用 v-model绑定关联 -> 快速 获取 或 设置 表单元素的值
它会根据 控件类型 自动选取 正确的方法 来更新元素
输入框 input:text -> value
文本域 textarea -> value
复选框 input:checkbox -> checked
单选框 input:radio -> checked
下拉菜单 select -> value
看案例帮助理解 第26集 1：40
2.computed 计算属性
1.概念:基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算。
2.语法:
1.声明在 computed 配置项中，一个计算属性对应一个函数
2.使用起来和普通属性一样使用{{ 计算属性名 }}
计算属性 → 可以将一段 求值的代码 进行封装
看案例帮助理解 第27集 2：20
3.computed 计算属性 vs methods 方法
1.computed 计算属性:
1.作用:封装了一段对于数据的处理，求得一个结果。
2.语法:
1.写在 computed 配置项中
2.作为属性，直接使用 → this.计算属性 {{ 计算属性 }}
2.methods 方法:
1.作用:给实例提供一个方法，调用以处理业务逻辑。
2.语法:
1.写在 methods 配置项中
2.作为方法，需要调用 → this.方法名() {{ 方法名() }} @事件名="方法名"
3.缓存特性(提升性能):
1.计算属性会对计算出来的结果缓存，再次使用直接读取缓存
2.依赖项变化了，会自动重新计算 → 并再次缓存
看案例帮助理解 第28集 2：06
4.计算属性完整写法
计算属性默认的简写，只能读取访问，不能"修改"。
如果要"修改” → 需要写计算属性的完整写法。
1.默认简写：
computed:{
计算属性名(){
一段代码逻辑(计算逻辑)
return 结果
}
}
2.完整写法：
computed:{
计算属性名:{
get{
一段代码逻辑(计算逻辑)
return 结果
},
set(修改的值){
一段代码逻辑(修改逻辑)
}
}
}
看案例帮助理解 第29集 3分
5.成绩案例
第30集
3.watch 侦听器
1.作用:监视数据变化，执行一些 业务逻辑 或 异步操作。语法:
2.简单写法 → 简单类型数据，直接监视
data:{
//words:'苹果',
obj:{
words:'苹果'
}
},
watch:{
//该方法会在数据变化时，触发执行
数据属性名 (newValue,oldValue) {
一些业务逻辑 或 异步操作。
},
'对象.属性名' (newValue,oldValue) {
一些业务逻辑 或 异步操作。
}
}
看案例帮助理解 第31集 2分、第32集
3.完整写法 → 添加额外配置项
1.deep:true 对复杂类型深度监视
2.immediate:true 初始化立刻执行一次handler方法
data: {
obj:{
words:'苹果',
lang: 'italy'
},
},
watch:{ // watch 完整写法
数据属性名:{
deep:true, // 深度监视(针对复杂类型)
immediate:true, //是否立刻执行一次handler
handler(newValue) {
console.log(newValue)
}
}
}
看案例帮助理解 第33集 2：40
4.总结
watch侦听器的语法有几种?
1.简单写法 → 监视简单类型的变化
watch:{
数据属性名 (newValue,oldValue) {
一些业务逻辑 或 异步操作。
},
'对象.属性名' (newValue,oldValue) {
一些业务逻辑 或 异步操作。
}
}
2.完整写法 → 添加额外的配置项(深度监视复杂类型，立刻执行)
watch:{ // watch 完整写法
数据属性名:{
deep:true, // 深度监视(针对复杂类型)
immediate:true, //是否立刻执行一次handler
handler(newValue) {
console.log(newValue)
}
}
}
4.综合案例:水果购物车
渲染/删除/修改数量/全选反选/统计总价/持久化
第34集
