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(){returnthis.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)}})