数据绑定
数据单向绑定:数据只能从data流到页面
数据的双向绑定:数据能从data到流到页面,页面的数据也可以流向data
双向绑定v-model
单向绑定v-bind
v-model只能用在表单类元素上(得具有输入值)(v-model:value可以简写成v-model)
MVVM模型:模型,视图,视图模型
M对应data中的数据
V对应的是模板
VM是Vue的实例对象
Data blinding绑定数据
DOM listener监听dom的变化返回给data,视图模型相当于是一个桥梁
我们经常用vm来接收vue实例(var vm = new Vue({}))
data中所有的属性都出现在了vm上(这里使用了数据代理),vm有的属性,甚至原型里有的属性,全都可以在模板中直接使用
Object.defineProperty方法
给对象定义属性的时候用的
let person = {
name:'张三',
}
Object.defineProperty(person,'age',{
value:18//person就有age=18的
})
用这种方法添加的属性 不会被遍历,不可以被修改,不可以被删除
当添加enumerable:ture就可以被遍历,控制属性是否可以被枚举
当添加writable:ture就可以被修改,控制属性是否可以被修改
当添加configurable:ture就可以被删除,控制属性是否可以被删除
好处:虽然看起来很复杂,但是我们可以通过对这些属性的ture和false操作来控制我们用defineProperty 给对象加入的属性的一些操作权限,更加灵活了
get(){
return number;
}
当有人读取person的age属性时候,get函数(getter)就会被调用,且返回值就是age的值
set(value){
number=value;
}
当有人修改person的age属性时候,set函数(setter)就会被调用,且可以收到修改age的值,放在参数value中
数据代理
定义:通过一个对象代理对另一个对象中属性的操作(读/写)
基本原理:
①通过object.defineproperty()把data对象中的属性添加到vm上
②为每一个添加到vm上的属性都添加一个getter/setter
③在getter/setter内部去操作data中相对应的属性
自己的理解:vue中的数据代理要使用上面的object.defineproperty
在vm中使用了getter和setter来改变了对应模板中的值
(使用setter修改数据的时候,用vm.data无法读取到数据,要使用vm._data才可以读取到data中的数据,vm._data.name就可以读取到修改后的数据),vm在这里就会使用definepropertyAPI来将vm中_data的对象属性通过API中的getter和setter将数据放到模板中,这样在模板中就只用写{{name}},就可以读取到data中的name值,如果不用API就需要这样写{{_data.name}},使用数据代理节省了时间,方便了操作