Vue指令修饰符、v-bind对样式控制的增强、computed计算属性、watch监视器

指令修饰符

• 所谓指令修饰符就是通过"."指明一些指令后缀，不同的后缀封装了不同的处理操作，可以简化代码

• 按键修饰符

  • @keyup.enter：当点击enter键时触发

• v-model修饰符

  • v-model.trim：去除首尾空格
  • v-model.number：转数字

• 事件修饰符

  • @事件名.stop：阻止冒泡

  • @事件名.prevent：阻止默认行为

  • @事件名.stop.prevent：可以连用，既阻止事件冒泡也阻止默认行为

v-bind对样式控制的增强

• 操作class

  • 语法：:class = “对象/数组”
  • 对象语法：:class = “{类名1:布尔值, 类名2:布尔值}”；使用场景：一个类名，来回切换
  • 数组语法：:class = “[类名1, 类名2, 类名3]”；使用场景：批量添加或删除类

• 操作style

  • 语法：:style = “{CSS属性名1:CSS属性值, CSS属性名2:CSS属性值}”

computed计算属性

• 概念：基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算

• 语法

  • 声明在computed配置项中，一个计算属性对应一个函数

  • 使用起来和普通属性一样使用{{计算属性名}}

    computed: {计算属性名 () {计算逻辑return 结果}
    }
    

• 注意

  • computed配置项和data配置项是同级的
  • computed中的计算属性虽然是函数的写法，但他依然是个属性
  • computed中的计算属性不能和data中的属性同名
  • 使用computed中的计算属性和使用data中的属性是一样的用法
  • computed中的计算属性内部的this依然指向的是Vue实例

watch监视器

• 作用：监视数据变化，执行一些业务逻辑或异步操作

• 语法

  • watch同样声明在跟data同级的配置项中

    watch: {// 该方法会在数据变化时，触发执行数据属性名(newValue, oldValue) {业务逻辑}对象.属性名(newValue, oldValue) {业务逻辑}
    }
    

  • 完整写法

    watch: {数据属性名: {deep: true, // 深度监视（针对复杂类型）immediate: true, // 是否立刻执行一次handlerhandler (newValue){业务逻辑}}
    }