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)
}
}
}

需求：1.输入内容，修改语言，都实时翻译；2.默认文本，一进入页面，立刻翻译一次