Vue 常用属性

数据属性

---

• 组件的 data 选项是一个函数（data里面是有return的）。Vue 会在创建新组件实例的过程中调用此函数（将里面定义的变量都放到实例里面去，你就可以使用this点出来，包括HTML里面就能够使用这些变量的）。
• 它应该返 回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。
• 为方便起见，该对象的任何顶级“属性”也会直接通过组件实例暴露出来。（本来是使用this.$data.msg点出来，现在this.msg就可以出来了）

 vm.$data.msg其实和vm.msg就是同一个东西，就像一个语法糖。

    
    
    
    
    


    
    

        
      msg:{{ msg }}
    

    

 

 

 

方法

---

方法(methods):处理数据的函数，在methods选项中定义的函数称为方法。

在 methods 选项中定义的方法与 data 选项中的数据一样，可以在组件的模板中使用（挂载到html中某个dom上面）。 在模板中，它们通常被当做事件监听使用。

    
    
    
    
    


    
    

       增加
       
count:{{ count }}
 
    
         
    

 

计算属性

---

计算属性(computed):根据所依赖的数据动态显示新的计算结果。

示例 : 需要在 {{}} 里添加计算再展示数据，例如统计分数，数值计算一般用法：

    
    
    
    
    


    
    

       增加
       
总分:{{ chinese + math + english }}
 
    
         
    

computed 计算属性用法：

小结： 计算属性一般就是用来通过其他的数据算出一个新数据，而且它有一个好处就是， 它把新的数据缓存下来了，当其他的依赖数据没有发生改变，它调用的是缓存的数据，这就极大的提高了我 们程序的性能。

而如果写在methods里，数据根本没有缓存的概念，所 以每次都会重新计算。这也是为什么不用methods 的原因 !

    
    
    
    
    


    
    

       
总分:{{ sum }}
 
    
         
    

你要的数据名不需要在data里面去定义，但是数据还是需要的，你的数据都是从data里面拿到的。

 

监听属性

---

监听属性(watch):是一个观察动作，监听data数 据变化后触发对应函数，函数有newValue(变化之后结果)和oldValue(变化之前结果)两个参数。 当需要在数据变化时执行异步或开销较大的操作时， 这个方式是最有用的。

 某些值在变化了被监听到之后，获取数据，展示出来。

    
    
    
    
    


    
    

      
旧值：{{ oldmsg }}
      
新值:{{ watchnewmsg }}
      按钮
    
         
    

 可以看到老的值是hello vue，新的值是hello china。函数里面只定义了oldmsg的变化，并没有定义watchnewmsg的变化。在watch里面监听到了之后，它才发生了watch msg的变化。