vue双向绑定原理

作者 likaiqiang 日期 2017-07-19
vue双向绑定原理

先看一个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
})

这样就实现了一个简单的双向绑定,哈哈。貌似有点太简单了。。。