<input type="text" v-modle="aaa">
<div v-text>{{ aaa }}</div>
1.0 概念: 当视图发生变化,数据改变(如输入框的输入数据,数据改变)
数据改变,视图发生变化(当数据发生变化,div中的aaa发生变化)
2.0 实现原理是通过 Object.defineProperty(obj,'key',{
get() {
// 当获取对象属性值会触发
},
set(value) {
// 当给对象新增属性时会触发
}
})
案例如下: 视图
<input type="text" v-modle>
<div v-text></div>
<div v-text></div>
<div v-text></div>
// 实现步骤
1.0 设置一个空对象,用于创建一个数据源
var data = {}
2.0 使用Object的内置方法 definProperty()去监听对象属性的操作
Object.defineProperty(data,'name',{
get(){
return _name
},
set(value) {
_name = value
// 操作value
document.querySeletor('[v-text]').forEach(item=> {
item.innerHTML = value
})
}
})
3.0 操作视图,当输入框的值发生改变,修改data中的值
document.querySelector('[v-model]').oninput = function() {
// data.name 会触发 set方法,set方法中又会触发 视图的改变
data.name = this.value
}
vue2.x双向数据绑定原理Object.definPropetery
猜你喜欢
转载自blog.csdn.net/weixin_42060658/article/details/105146822
今日推荐
周排行