一、计算属性和观察者

1.计算属性

(1)基础例子

                
                                    
    
            
     
原始值："{
   { message }}"
            
     
反转值："{
   { reverseMessage }}"
        
    
                

(2)计算属性缓存vs方法

1)计算属性：

• 基于它们的依赖进行缓存的，只有相关依赖发生改变的时候才会重新求值，一般为响应式依赖
• 直接展示
• 有缓存

                
                                    
    
            
     
Now："{
   { now }}"
        
    
                

2)方法：需要调用才会返回值，并且没缓存

                
                                    
    
            
     
原始值："{
   { message }}"
            
     
反转值："{
   { reverseMessage() }}"
        
    
                

(3)计算属性vs侦听属性

当有一些数据需要随着其他数据变动而变动的时候，更好的做法是使用计算属性而不是命令式的watch回调

1)命令式的watch回调

                
                                    
    
                 {
   { fullName }}        
    
                

2）计算属性

                
                                    
    
                 {
   { fullName }}        
    
                

(4)计算属性的setter

计算属性默认只有getter,在需要时也可以提供getter

PS:这个代码set好像在Console里面不好使，后面再细看

                
                                    
    
                 {
   { fullName }}        
    
                

2.侦听器：当需要在数据变化时执行异步或者开销较大的操作时，响应数据的变化

------官网的例子对我这个小白来说有点费劲，等看懂基础再说吧，暂时跳过

二、Class与Style绑定

v-bind指令实现：通过表达式计算出字符串、对象、数组等结果

1.绑定HTML Class (v-bind:class)

(1)对象语法

• a.传给v-bind:class一个对象，动态切换class

• b.在传入的对象中传入更多属性来动态切换多个class，v-bind:class可以与普通的class属性共存

• c.绑定的数据对象不必内联定义在模板中

• d.可以绑定一个返回对象的计算属性，这是一个常用且强大的模式

(2)数组语法

• a.把一个数组传给v-bind:class,应用一个class列表

• b.用三元表达式来根据条件切换列表中的class

• c.当有多个条件class的时候，在数组语法中可以使用对象语法

(3)用在组件上~~~~~~~暂时跳过

2.绑定内联样式 v-bind:style

(1)对象语法

• a.直接绑定

属性名称一般用驼峰式或者-分割开来写

                
                                    
    
            
     
                      Hello            
     
        
    
                

• b.绑定一个样式对象

             
                                    
    
            
     
                      Hello            
     
        
    
                

(2)数组语法:将多个样式对象应用到同一个元素上

           
                                    
    
            
     
                      Hello            
     
        
    
                

(3)自动添加前缀：v-bind:style使用需要添加浏览器引擎前缀的css属性时~~~~没懂

(4)多重值：给style绑定的属性提供一个包含多个值的数组作为属性值，常用语提供多个带前缀的值~~~~略略略