利用原生JS实现VUE中的双向绑定

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <input type="text" id="userName">
    <br>
    <span id="uName"></span>
    <script>
        var obj = {
            pwd: "1234"
        };
        //主要使用到了get和set方法,最为关键
        Object.defineProperty(obj, "userName", {
            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.userName = event.target.value;
        })
    </script>
</body>

</html>

运行上述的dome,可以使用控制台,obj.username=123赋值,会自动触发set方法。若我们在控制台使用obj.username拿值可以触发get方法,也就是vue的双向数据绑定的核心点。

posted @ 2020-03-15 12:33  mCod  阅读(355)  评论(0编辑  收藏  举报