九、计算属性————温开水的复习笔记

移步到这个页面------方法五是计算属性

下面是防遗忘笔记

完整形式

        const vm = new Vue({
            el:'#root',
            data:{
                firstName:'温',
                lastName:'开水'
            },
            computed:{  //仔细回想一下Object.definedProperty方法看看有没有忘记 属性
                fullName:{  //属性名
                    get(){  //配置项
                        return this.firstName + '-' +this.lastName;//this已处理，指向Vue实例!!!!!!
                    },
                    set(value){
                        console.log('set');
                        let arr =  value.split('-');
                        this.firstName = arr[0];
                        this.lastName = arr[1];
                    }
                }
            }
        })

简写形式

简单一点，因为计算属性一般不会去修改，set可以不写。把一般对象写成函数（对象）。

        const vm = new Vue({
            el:'#root',
            data:{
                firstName:'温',
                lastName:'开水'
            },
            computed:{
                fullName:function(){
                        return this.firstName + '-' +this.lastName;
                    }
            }
        })

再简单一点

        const vm = new Vue({
            el:'#root',
            data:{
                firstName:'温',
                lastName:'开水'
            },
            computed:{
                fullName(){
                        return this.firstName + '-' +this.lastName;
                    }
            }
        })

注意

模板语法{{xxx}}中不能写成{{fullName()}}，写这样的函数表达式是不对的，因为计算属性配置项最后在vm对象中是一个属性vm.fullName，而不是方法，调用属性的写法是{{fullName}}

数据绑定中调用属性的写法是这类样子的 <input type="text" v-model:value="firstName">

原生JavaScript对数据进行改变要进行事件绑定和数据代理等操作，在vue中只需要调用模板语法接口、计算属性配置项接口和数据绑定接口就完成了复杂任务。

模板语法的两类。对比表格，帮助理解

	插值语法	指令语法（有一部分是数据绑定）
写法	{{xxx}}，xxx是js表达式	v-bind:value="xxx" v-model:value="xxx" xxx是js表达式
位置	标签中间	标签里面（标签属性）
功能	用于解析标签体内容	用于解析标签(包括:标签属性、标签体内容、绑定事件.....) Vue中有很多的指令，且形式都是: v-???? 此处我们只是拿v-bind举个例子。