vue详解（2）

1. 指令修饰符

通过 “.” 指明一些指令后缀，不同后缀封装了不同的处理操作 → 简化代码

① 按键修饰符
@keyup.enter → 键盘回车监听

② v-model修饰符
v-model.trim → 去除首尾空格
v-model.number → 转数字

③ 事件修饰符
@事件名.stop → 阻止冒泡（点击儿子，不会冒泡到父亲身上）
@事件名.prevent → 阻止默认行为

2. v-bind 对于样式控制的增强

操作class

语法 :class = “对象/数组”
① 对象 → 键就是类名，值是布尔值。如果值为 true，有这个类，否则没有这个类

<div class="box" :class="{类名1: 布尔值,类名2：布尔值}"></div>

适用场景：一个类名，来回切换（tab栏高亮切换）
② 数组 → 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表

<div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>
:class="['pink', 'big']"//不能双引号，只能单引号

适用场景：批量添加或删除类

操作style

语法 :style = “样式对象”

<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div

适用场景：某个具体属性的动态设置（进度条效果）

3. v-model 应用于其他表单元素

常见的表单元素都可以用 v-model 绑定关联 → 快速获取或设置表单元素的值，它会根据 控件类型 自动选取 正确的方法 来更新元素。

输入框 input:text → value
文本域 textarea → value
复选框 input:checkbox → checked
单选框 input:radio → checked
下拉菜单 select → value
注：（name: 给单选框加上 name 属性可以分组 → 同一组互相会互斥；select 的 value 值，关联了选中的 option 的 value 值）
…

4. 计算属性

概念：基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算。
语法：
① 声明在 computed 配置项中，一个计算属性对应一个函数
② 使用起来和普通属性一样使用 {{ 计算属性名 }}，是属性不用加括号
计算属性 → 可以将一段 求值的代码 进行封装

//computed里面直接是方法
computed: {
计算属性名 () {
基于现有数据，编写求值逻辑
return 结果
}
},

5. computed 计算属性和 methods 方法的区别

computed 计算属性：
作用：封装了一段对于数据的处理，求得一个结果。
语法：
① 写在 computed 配置项中
② 作为属性，直接使用 → this.计算属性 {{ 计算属性 }}
优点：缓存特性（提升性能）
计算属性会对计算出来的结果缓存，再次使用直接读取缓存，
依赖项变化了，会自动重新计算 → 并再次缓存
methods 方法：
作用：给实例提供一个方法，调用以处理业务逻辑。
语法：
① 写在 methods 配置项中
② 作为方法，需要调用 → this.方法名( ) {{ 方法名() }} @事件名=“方法名”

6. 计算属性完整写法

计算属性默认的简写，只能读取访问，不能 “修改”。
如果要 “修改” → 需要写计算属性的完整写法。

//computed里是对象，对象里边才是方法
computed: {
计算属性名: {
get() {
一段代码逻辑（计算逻辑）
return 结果
},
set(values) {
一段代码逻辑（修改逻辑）
}
}
}

7. watch 侦听器（监视器）

作用：监视数据变化，执行一些业务逻辑或异步操作。
语法：
① 简单写法 → 简单类型数据，直接监视

data: {words: '苹果',obj: {words: '苹果'}
},
watch: {// 该方法会在数据变化时，触发执行// newValue新值, oldValue老值（一般不用）words (newValue, oldValue) {一些业务逻辑 或 异步操作。
},//JS的方法名不能直接用特殊字符'obj.words' (newValue, oldValue) {一些业务逻辑 或 异步操作。}
}

需求：1.输入内容，实时翻译

② 完整写法 → 添加额外的配置项 (深度监视复杂类型，立刻执行)）
(1) deep: true 对复杂类型深度监视（监视对象中的所有属性变化）
(2) immediate: true 初始化立刻执行一次handler方法

data: {
obj: {
words: '苹果',
lang: 'italy'
},
},
watch: {// watch 完整写法
数据属性名: {
deep: true, // 深度监视视(针对复杂类型)
immediate: true, // 是否立刻执行一次handler
handler (newValue) {
console.log(newValue)
}
}
}