先看一个demo
vue经典的双向绑定demo
那么我们用原生js怎么实现一个简单的双向nag定呢
vue双向绑定原理
vue的双向绑定，是基于es5的Object.defineProperty实现的，所以vue不兼容IE8.
基于这个api，我们也可以实现一个简单的双向绑定。
自己实现简易版双向绑定
html
<div id="app">
<input type="text" class="ipt">
<p class="txt"></p>
</div>
|
model—view
function $(selector){
if( typeof selector == 'string'){
return document.querySelectorAll(selector)
}
}
var $ipt = $('.ipt')[0]
var $txt = $('.txt')[0]
var data = {
}
Object.defineProperty(data,'txt',{
get:function(){
},
set:function(s){
$ipt.value = s
$txt.textContent = s
}
})
|
view—>model
$ipt.addEventListener('input',function(e){
$txt.textContent = e.target.value
})
|
这样就实现了一个简单的双向绑定，哈哈。貌似有点太简单了。。。
