Vue原理—初探双向绑定

tanoak

发布于 2018-06-06 13:14:18

4720

发布于 2018-06-06 13:14:18

文章被收录于专栏：java闲聊

对于流行的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){}) 添加监听事件

根据控制打印的信息，看如下截图