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, // 是否立刻执行一次handler
		handler (newValue){
			业务逻辑
		}
	}
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。