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)