vue方法、侦听器、计算属性基础

计算属性和侦听器

.....
<div id="area">
	<p>{{rem1}}</p>
	<p>{{rem2}}</p>
	<button type="button" @click="sta1=!sta1">点击切换1</button>
	<button type="button" @click="sta2=!sta2">点击切换2</button>
</div>
.....
{							
	let vm = new Vue({
		el:"#area",
		data:{
			sta1:true,
			sta2:true
		},
		computed:{   //计算属性格式类似于普通方法(但不是函数调用时不能带括号)
			rem1(){	 //计算属性内容变化，计算属性重新执行
				console.log("计算属性1",this.sta1)
			},
			rem2(){	 //计算属性有缓存，当值变化缓存更新，所以重新执行
				console.log("计算属性2",this.sta2)
			}
		},
		watch:{   //侦听器
			sta1(a,b){  //可以精确到数据变化过程
				console.log("sta1改变了",a,b)  //有两个参数监听从a变换成b
			},
			sta2(){
				console.log("sta2改变了")
			}
		}
	})	
}