vue原理实现

最新推荐文章于 2025-12-05 08:37:05 发布

转载最新推荐文章于 2025-12-05 08:37:05 发布 · 70 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/weizaiyes/p/7418520.html

文章标签：

#javascript #ViewUI

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue双向数据绑定原理和模拟</title>
</head>
<body>
    <input type="text" id="userName">
    <br>
    <span id="uName"></span>
</body>
</html>
<script type="text/javascript">
    var obj = {
        pwd:"123456"
    }
    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>