1. Vue中有2种数据绑定的方式:
1.单向绑定(v-bind):数据只能从data流向页面。 2.双向绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data。
备注: 1.双向绑定一般都应用在表单类元素上。如input、select等。 2.v-model:value 可以简写为 v-model,因为v-model默认收集的就是value值。
代码示例:
单向数据绑定:
双向数据绑定:
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
name:'真理',
}
})
展示效果
2. 双向绑定的原理:
利用Object.defineProperty方法,其中用 get() 来获取 对象属性 数据,把获取的数据利用新的属性名装起来,然后用set()调用改值来监听设置修改,当内容被修改时就会触发,并且把修改的值赋值给原来的属性名。
Object.defineProperty(obj,'age',{
// value:18, //这样添加的属性不可枚举(无法遍历)
// configurable:'true', //控制属性是否可删除
// enumerable:true, //该属性控制是否可枚举性
// writable:true, //控制属性是否可修改
// 获取
get(){
console.log("你访问了obj对象的age属性");
return value=num
},
// 监听设置修改
set(value){
console.log("你修改了age的值,值是",value);
num=value
}