侦听器
- 侦听器用于开发者监视某些数据的变化 从而针对数据的变化做特定的操作
- 参数新值在前,旧值在后
方法格式的侦听器
watch: {
msg(newVal,oldVal){
console.log(newVal,oldVal);
}
}
对象格式的侦听器
watch: {
msg:{
handler(newVal,oldVal){
console.log(newVal,oldVal);
},
immediate: true
}
}
深度监听
watch: {
info:{
handler(newVal,oldVal){
console.log(newVal,oldVal);
},
immediate: true,
deep: true
}
}
直接监听对象子属性
watch: {
'info.msg':{
handler(newVal){
console.log(newVal);
}
}
},
计算属性
使用的时候当作属性来使用
- 经过一系列的运算之后最终得到一个属性值,只要被依赖的属性发生改变就会触发计算属性
- 定义在computed节点下
- 计算属性在定义的时候要定义成方法格式
<div class="app">
r:{{r}} g:{{g}} b{{b}} rgb{{rgb}}
<div>
<button @click="change()">修改msg</button>
</div>
</div>
<script>
var vm = new Vue({
el : '.app',
data () {
return {
r : 0,
g : 0,
b : 0
}
},
computed: {
rgb() {
return `rgb(${this.r},${this.g},${this.b})`
}
},
methods: {
change(){
this.b += 1
}
}
})
console.log(vm);
</script>
模板字符串
return `rgb(${this.r},${this.g},${this.b})`