Vue响应式原理

最新推荐文章于 2024-03-20 15:09:34 发布

酷酷的景凉

最新推荐文章于 2024-03-20 15:09:34 发布

阅读量112

点赞数

分类专栏：记录文章标签： vue.js node.js javascript es6 前端

本文链接：https://blog.csdn.net/qq_40308568/article/details/104403748

版权

记录专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue响应式原理</title>
</head>

<body>
    <h1 v-text="name"></h1>
    <input type="text" v-model="name">
    <h1 v-text="pwd"></h1>
    <input type="text" v-model="pwd">
    <script>
        // 源对象
        let data = {
            name: "hellow",
            pwd: "world"
        }
        // 委托对象
        let $data = {};
        Object.keys(data).forEach(key => {
            def($data, key);
            $data[key] = data[key];
        });
        // 监听属性
        function def(obj, key) {
            let value = "";
            Object.defineProperty(obj, key, {
                enumerable: true,
                configurable: true,
                get: function seter() {
                    return value;
                },
                set: function geter(newVal) {
                    value = newVal;
                    let doms = Array.from(document.getElementsByTagName("*"));
                    doms.forEach(v => {
                        let vt = v.getAttribute("v-text");
                        if (vt === key) {
                            v.textContent = newVal;
                        }

                        let vm = v.getAttribute("v-model");
                        if (vm === key) {
                            v.value = newVal;
                        }
                    })
                }
            });
        }

        // 绑定事件
        let doms = Array.from(document.getElementsByTagName("input"));
        doms.forEach(v => {
            // 是否设置了v-model
            let vm = v.getAttribute("v-model");
            if (vm) {
                v.oninput = function (event) {
                    $data[vm] = event.target.value;
                }

            }
        });
    </script>
</body>

</html>

酷酷的景凉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue响应式原理

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue响应式原理&l...
复制链接

扫一扫