Vue中的数据操作

数据操作

1.数据data（属性）：vue实例的数据对象，Vue将会递归，将data的属性转换为getter/setter，从而让data的属性能够相应数据变化。

data:{
	isHot:true
}

2.方法methods：使用methods属性给Vue定义方法，访问data中的数据

methods:{
changeWeather(){
	this.isHot =! this.isHot
	}
}

在方法中访问属性：在methods中访问data的数据，可以通过this.属性名的形式来访问。
示例：例如我们在show方法中，访问number属性，可以直接通过this.number形式访问，其中this就表示vue实例对象。如果在Vue构造外部，可以使用vm.方法名 定义或调用方法，通过vm.$data.属性名来访问data中的属性。

3.计算属性computed：（变量）
computed用来监控自己定义的一个变量，进行处理后返回一个结果值。

computed:{
	info(){
		return this.isHot ? '炎热': ' 凉爽'
	}
}

4.监视属性：watch

1. 当被监视的属性变化时：回调函数自动调用，进行相关操作。
2. 监视的属性必须存在，才能进行监视！！
3. 监视的两种写法：
   （1）.new Vue时传入watch配置

watch：{
isHot：{
	handler(newValue,oldValue){
		console.log('isHot被修改了','newValue,oldValue')
		}
	}
}

	(2)通过vm.$watch监视

vm.$watch('isHot',{
	immediate:true, //初始化时让handler调用一下
	//handler什么时候调用？当isHot发生改变时
	handler(newValue,oldValue){
		console.log('isHot被修改了',newValue,oldValue)
	}
})