對(duì)于流行的MVVM，本著了解一下的原理，因?yàn)樽陨硎亲龊笈_(tái)的，對(duì)js的掌握一般，首先我們要對(duì)MVVM有個(gè)基本認(rèn)識(shí)，MVVM是Model-View-ViewModel 的縮寫(xiě)，一張圖帶你了解
a.png
有了基本認(rèn)識(shí)后就可以上手寫(xiě)代碼了，不懂沒(méi)關(guān)系，直接復(fù)制粘貼，看了運(yùn)行效果后再回頭深究它的實(shí)現(xiàn)過(guò)程
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>雙向綁定1</title>
</head>
<body>
<div>
<input type="text" id = "a"/>
</div>
<div>
<span id="b"></span>
</div>
<script type="text/javascript">
var obj = {} ;
Object.defineProperty(obj,'test',{
set:function(val){
document.getElementById('a').value = val ;
document.getElementById('b').innerHTML = val ;
}
});
//添加監(jiān)聽(tīng)事件 keyup 指定什么條件下觸發(fā)
document.addEventListener('keyup',function(e){
console.log(e) ;
obj.test = e.target.value ;
})
</script>
</body>
</html>
上面有兩個(gè)重要的方法
Object.defineProperty()
方法直接在一個(gè)對(duì)象上定義一個(gè)新的屬性，或者修改一個(gè)對(duì)象的存在屬性，并返回該對(duì)象。
addEventListener("指定條件"，function(e){}) 添加監(jiān)聽(tīng)事件
根據(jù)控制打印的信息，看如下截圖
代碼運(yùn)行后，就可以看到輸入框輸入的值可以在下方span中顯示
這只是一個(gè)簡(jiǎn)單的數(shù)據(jù)綁定，文章末尾會(huì)推薦一個(gè)github地址，里面有關(guān)于Vue雙向綁定的實(shí)現(xiàn)，推薦剛?cè)腴T(mén)的可以去看看
github地址Vue雙向綁定的簡(jiǎn)單實(shí)現(xiàn)
最后祝大家兒童節(jié)快樂(lè)
