Vue2随笔-251030

指令修饰符

1. @click.stop 禁止子点击事件冒泡调用父标签事件。
2. @click.prevent 禁止标签默认行为。
3. @model.trim(number) 去除首尾空格，转为数字类型。
4. v-model默认值 与select标签绑定，默认值必须在option中存在。

计算属性

存在返回值，执行依赖于关联属性的变化。不用箭头函数，防止this指向异常。

两种写法：

computed: {
	name: {
		return this.firstName + this.secondName
	}
	sign: {
		get: ()=>{
			return this.appid + this.info
		}
		set: (newVal)=>{
			var infos = newValue.split('|')
			this.appid = infos[0]
			this.info = infos[1]
		}
	}
}

watch侦听器

使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
非Vue管理模块用箭头函数（setTimeout）this指向不会脱离Vue实例。

两种写法:

data: {id = ''},
watch:{
 id(newVal,oldVal){
	属性变化时执行逻辑
 },
 info:{
 	deep: true,
	handler(newVal): {
		属性变化时执行逻辑
	}
 }
}

延时请求

clearTimeout(this.to)
this.to = setTimeout(async()=>{
await axios({
	url: xxx,
	heads: xxx,
	data: xxx
	})
},1000)