模拟vue2底层数据响应式实现原理，模拟mvvm

最新推荐文章于 2024-09-14 19:44:09 发布

IvanWKQ

最新推荐文章于 2024-09-14 19:44:09 发布

阅读量131

点赞数 1

文章标签： javascript 前端 css vue

本文链接：https://blog.csdn.net/IvanWKQ/article/details/138582128

版权

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>模拟vue2底层实现原理，模拟mvvm实现</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: stretch;
        }

        #databinding {
            position: absolute;
            width: 80%;
            height: 100%;
        }

        .header {
            /* box-sizing:border-box ; */
            padding: 2vh;
            margin: auto;
            border: 1px solid black;
            border-radius: 2vh;
            height: 10%;
        }

        #content {
            padding: 2vh;
            border-radius: 2vh;
            height: calc(90% - 8vh - 2px);
            background-color: rgb(220, 189, 220);
        }
    </style>
</head>

<body>
    <div id="databinding">
        <div class="header"><input type="text" id="hea" value=""></div>
        <div id="content"></div>
    </div>

    <script type="text/javascript">
        let age = 22
        let data = { "name": "wkq", "sex": "男" }
        Object.defineProperty(data, "age", {
            // todo 此处注意 一个属性不能同时是数据属性（有value或writable等特性）和访问器属性（有get和set函数）只能二选其一
            // value: age,
            // 可选参数；可被更改的
            // writable: true,
            // 可选参数；可被枚举遍历
            enumerable: true,
            // 该属性可被删除
            configurable: true,
            get() {
                return age;
            },
            set(value) {
                age = value
                // 每次从新赋值记得刷新视图数据
                document.getElementById("hea").value = data.age
                document.getElementById("content").innerText = data.age
            }
        })

        let dom = document.getElementById("hea")
        // 对输入框初始值赋值
        dom.value = data.age
        // 注意此处不要用箭头函数，箭头函数内部没有自己的this指向
        dom.addEventListener("change", function () {
            console.log('-----------', this.value);
            // 此处获取输入框的输入值  并对data.age完成赋值
            data.age = this.value
            console.log('-----------', data.age);
        })
    </script>
</body>

</html>