<body>
<!--天气案例-->
<div id="root">
<h2>今天天气很{{Info}}</h2>
<button @click="changeweather">改变天气</button>
</div>
</body>
<script>
new Vue({
el:'#root',
data:{
isHot:true
},
methods:{
changeweather(){
this.isHot = ! this.isHot
}
},
computed:{
Info(){
return this.isHot ? '炎热' : '凉爽'
}
}
})
</script>
<body>
<!--天气案例 watch监视-->
<div id="root">
<h2>今天天气很{{Info}}</h2>
<button @click="changeweather">改变天气</button>
</div>
</body>
<!--
监视属性watch:
1.当监视函数被调用时,回调函数自动调用,进行相关操作
2.监视的属性必须存在,才能进行监视
3.监视的两种写法:
(1)new.Vue时传入watch配置
(2)通过vm.$watch进行监视
-->
<script>
new Vue({
el:'#root',
data:{
isHot:true
},
methods:{
changeweather(){
this.isHot = ! this.isHot
}
},
computed:{
Info(){
return this.isHot ? '炎热' : '凉爽'
}
}
/*watch:{
Info:{
immediate:ture,//初始化时让handler调用一下
//handler什么时候调用? Info的值改变的时候
handler(newValue,oldValue){
console.log('Info被改变了',newValue,oldValue)
}
}
}*/
//简写
watch:{
Info(newValue,oldValue){
console.log('Info被改变了',newValue,oldValue)
}
}
})
vm.$watch('isHot',{
immediate:ture,//初始化时让handler调用一下
//handler什么时候调用? Info的值改变的时候
handler(newValue,oldValue){
console.log('Info被改变了',newValue,oldValue)
})
//简写
vm.$watch('isHot',function(newValue,oldValue){
console.log('Info被改变了',newValue,oldValue)
})
</script>
<body>
<div id='root'>
<h2>a的值是{{a}}</h2>
<button @click="number.a++"></button>
<h2>b的值是{{b}}</h2>
<button @click="number.b++"></button>
<h2>c的值是{{c}}</h2>
<button @click="number.c++"></button>
</div>
</body>
<!--
深度监视:
1.Vue中的watch属性默认不检测对象内部值的改变(一层)
2.配置deep:ture可以检测对象值的改变(多层)
备注:
(1)Vue自身可以检测内部多层值的改变,但Vue内部的watch属性默认不可以
(2)使用watch时根据数据的具体结构,判断是否使用深度监测
-->
<script type="text/javascript">
new Vue({
el:'#root',
number:{
a:1,
b:1
}
watch:{
number:{
console.log("number改变了")
},
//监视多级结构中某个属性的变化
'number.a':{
console.log("number中的a改变了")
},
//监视多级结构中所有属性的变化
number:{
deep:ture,
console.log("number中的a改变了")
}
}
})
</script>
|