简易运用原生js写vue双向数据绑定

最新推荐文章于 2023-09-25 19:58:54 发布

Xyt1737

最新推荐文章于 2023-09-25 19:58:54 发布

阅读量112

点赞数

本文链接：https://blog.csdn.net/Xyt1737/article/details/120693801

版权

Vue.js 双向数据绑定数据劫持 Object.defineProperty 实时渲染

关键词由CSDN通过智能技术生成

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue双向数据绑定</title>
    <style>
        .output {
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: red;
            border: 1px solid #333;
            border-radius: 5px;
            margin: 20px 0;
        }
    </style>
</head>

<body>
    用户名：<input type="text">
    <div class="output"></div>
    <button>修改数据</button>
    <script>
        // 1.获取dom节点
        const input = document.querySelector('input')
        const output = document.querySelector('.output')
        const btn = document.querySelector('button')

        // 2.模仿数据模型
        let data = {}

        // 3.设置监听器
        input.addEventListener('input', function () {
            data.username = this.value
            // output.innerText = this.value
        }, false)

        // 4.给btn按钮绑定点击事件
        btn.addEventListener('click', function () {
            data.username = 'tom'
        }, false)

        // 5.使用Object.defineProperty完成数据劫持
        Object.defineProperty(data, 'username', {
            set(value) {
                refresh(value)
            }
        })

        // 6.页面渲染函数
        function refresh(value) {
            input.value = value
            output.innerText = value
        }
    </script>
</body>

</html>