学习vue的第二天

vue扩展

1.v-model 只能用于表单元素，也就是说带有value的元素

2.el有两种写法：一种是el:'#app'，另一种是v.$mount(‘#app’)

3.data有两种写法：一种是对象形式，另一种是函数形式，函数形式只能用普通函数，不能用箭头函数

函数形式为：data:function(){

return {

name:'李琼'

}

}

MVVM 模型

1.M：对应data中的数据

2.V：模板

3.VM：Vue实例对象，以后创建Vue实例可以用VM来接收

Object.defineProperty

 <script type="text/javascript">
let number = 18
let person = {
    name:'张三',
    sex:'男',
}
Object.defineProperty(person,'age',{
    //value:18,
    // enumerable:true,//控制属性是否可以枚举，默认值是false
    // writable:true,//控制属性是否可以被修改，默认值是false
    // configurable:true,//控制属性是否可以被删除，默认值是false
    // //当有人读取person的age属性时，get函数（getter）就会被调用，且返回值就是age的值
    get(){
        console.log('有人读取age属性了')
        return number
    },
    //当有人修改person的age属性时，set函数（setter）就会被调用，且会收到修改的具体值
    set(value){
        console.log('有人修改了age属性，且值是',value)
        number = value
    },
})
console.log(person);
    </script>

数据代理

1. 通过vm对象来处理data对象中属性的操作（读/写）

2. 好处：更加方便操作data中的数据

3. 原理：

   通过Object.defineProperty()把data对象中所有属性加到vm上。

   为每一个添加到vm上的属性，都指定一个getter/setter。

   在getter/setter内部去操作（读/写）data中对应的属性。