初步探索vue数据双向绑定原理

这是在看一个实战课的时候，老师讲到的一个知识点，我觉得挺有意思的，虽然很简单，但是让我稍微了解了一下框架背后的故事，所以记录一下~
源码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="userName">
    <br>
    <span id="uName"></span>
    <script>
        var obj = {
            pwd:'123456'
        };
        Object.defineProperty(obj,"myName",{
            get:function(){
                console.log('get init');
            },
            set:function(val){
                console.log('set init');
                document.getElementById('uName').innerText = val;
                document.getElementById('userName').value = val;
            }
        });
        document.getElementById('userName').addEventListener('keyup',function(event){
            obj.myName = event.target.value;
        });
    </script>
</body>
</html>
posted @ 2020-09-13 23:45  梦娜丽莎  阅读(98)  评论(0)  编辑  收藏  举报