Vue框架入门笔记（2）

像绑定普通属性一样在模板中绑定计算属性。计算属性的值依赖于绑定的属性，计算属性默认getter方法，所以依赖的属性的值发生改变时会运行计算属性的函数重新赋值，如果依赖的值没有发生改变时，使用计算属性时不会再次运行函数而是使用缓存。

        <div id="demo">
            <p>fullName:{{fullName}}</p>
            <p>firstName:{{firstName}}</p>
            <input v-model="firstName" type="text" />
        </div>
        <script>
            var demo=new Vue({
                el:"#demo",
                data:{
                    firstName:"Foo",
                    lastName:"Bar",
                    //fullName:"Foo Bar",
                },
                /*这是使用监听器的办法
                watch:{
                    firstName:function(val){
                        this.fullName=val+" "+this.lastName;
                    },
                    lastName:function(val){
                        this.fullName=this.firstName+" "+val;
                    }
                }
                */
                //这是使用计算属性的办法
                //计算属性有代码重复率比用监听的办法
                computed:{
                    fullName:{
                        //当改变依赖的值时会改变计算属性的值，但光有get方法改变计算属性的值依赖属性不会改变
                        get:function(){
                            return this.firstName+" "+this.lastName;
                        },
                        
                        //设置了set方法后，改变计算属性，依赖属性也会跟着改变
                        set:function(newValue){
                            var name=newValue.split(' ');
                            this.firstName=name[0];
                            this.lastName=name[name.length-1];
                        }   
                    }
                }
            });
        </script>