vue数据库连接（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）.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) } })