Vue的双向绑定原理
-
Proxy核心
-
render渲染的机制
就用简单的代码来实现以下这个双向绑定的机制
<body>
<div id="div1">
name:{{name}}<br>
age:{{age}}<br>
<input type="text" name="" id="" value="" v-model="name">
</div>
<script>
let el = document.getElementById('div1')
let template = el.innerHTML
let _data = {
name:'kajian',
age:'18'
}
let data = new Proxy(_data, {
set (obj, name, value) {
obj[name] = value
render()
}
})
render()
function render () {
el.innerHTML = template.replace(/{\{\w+}\}/g, (str)=>{
str = str.substring(2,str.length-2)
return _data[str]
})
//双向绑定
//找所有的v-model
Array.from(el.getElementsByTagName('input'))//获取所有input 为一个数组
.filter(el=>el.getAttribute('v-model'))//筛选出含有v-model的input
.forEach(input=>{
let name = input.getAttribute('v-model')//对应的v-model是谁
input.value = _data[name]//input的值为_data的值
//双向操作
input.oninput = function () {
data[name] = this.value//通过Proxy代理修改数据
}
})
}
</script>
</body>
扫一扫
1499
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
