Vue.js 权威指南 学习笔记 — 计算属性、表单

计算属性

1、计算属性就是当其依赖属所以，如果不用缓存的话，可以用方法（methods）代替。性的值发生变化时，这个属性的值会自动更新，与它相关的DEMO部分也会同步自动更新。

2、计算属性是基于它们的依赖进行缓存的，书中关于关闭缓存cache:false 属性在Vu2中被移除。

3、计算属性只有在它的相关依赖发生改变时才会重新求值。

4、v-repeat 在Vue2中移除。

总结：在需要做大量的计算，处理复杂的逻辑业务时，可以使用计算属性避免多次执行的getter，所以，如果不用缓存的话，可以用方法（methods）代替。

    
    
    
    
    



    
计算属性
    
计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。
    

        
        
        

        

            didi = {{didi}},family = {{family}},didiFamily = {{didiFamily}}
        

        

            
计算属性getter不执行的情景
            
当包含计算属性的节点被移除，并且模板中没有其他地方引用时，对应的getter方法不会执行
            Toggle show total Price
            
            
{{totalPrice}}
            
Total Price = {{totalPrice}}

        
        

            v-repeat 已经废除 
        
    

Demo地址：https://github.com/koalashane/vuejs-code/tree/master/chapter4

官方API地址：https://cn.vuejs.org/v2/guide/computed.html

表单

表单主要使用v-model进行值绑定。

如果项目是使用Vue和iView进行开发时，在使用DatePicker 组件时，绑定使用on-change，使用v-model获取的值总是少一天。

    
    
    
    



    

        
表单的基本用法
        
1、text
        
 Welcom {{name}} join DDEE
        

        

            
2、checkbox
            

                
                快车
                
                专车
                
                巴士
            
            
选中的数据是: {{ bizLines | json}}
            
        

        

            
3、radio
            

                
                快车
                
                专车
                
                巴士
            
            
选中的数据是: {{ radiomodel }}
        

        

            
4、selsect
            
                汽车
                书本
                盒子
            
            
选中的数据是: {{ selected }}
            

                
                    {{ item.text }}
                
                
选中的数据是: {{ selected2 }}
            
        
    

Demo地址：https://github.com/koalashane/vuejs-code/tree/master/chapter5

官方API地址：https://cn.vuejs.org/v2/guide/forms.html

嗯，重要的话说三遍。

我爱代码，我爱学习。

我爱代码，我爱学习。

我爱代码，我爱学习。