Vue原理—初探双向绑定
2018-06-01 本文已影响50人
tanoak
对于流行的MVVM，本着了解一下的原理，因为自身是做后台的，对js的掌握一般，首先我们要对MVVM有个基本认识，MVVM是Model-View-ViewModel 的缩写，一张图带你了解
a.png
有了基本认识后就可以上手写代码了，不懂没关系，直接复制粘贴，看了运行效果后再回头深究它的实现过程
<!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 ;
}
});
//添加监听事件 keyup 指定什么条件下触发
document.addEventListener('keyup',function(e){
console.log(e) ;
obj.test = e.target.value ;
})
</script>
</body>
</html>
上面有两个重要的方法
Object.defineProperty()
方法直接在一个对象上定义一个新的属性，或者修改一个对象的存在属性，并返回该对象。
addEventListener("指定条件"，function(e){}) 添加监听事件
根据控制打印的信息，看如下截图
代码运行后，就可以看到输入框输入的值可以在下方span中显示
这只是一个简单的数据绑定，文章末尾会推荐一个github地址，里面有关于Vue双向绑定的实现，推荐刚入门的可以去看看
github地址Vue双向绑定的简单实现
最后祝大家儿童节快乐
