双向绑定原理

最新推荐文章于 2024-04-18 22:48:34 发布

奇葩也是花

最新推荐文章于 2024-04-18 22:48:34 发布

阅读量273

点赞数

分类专栏： Vue

原文链接：https://baijiahao.baidu.com/s?id=1615376145033029857&wfr=spider&for=pc

版权

Vue 专栏收录该内容

35 篇文章 7 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>原生js实现简单的双向数据绑定</title>
</head>
<body>
<input type="text" id="userName">
<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" + val);
            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>

单向数据绑定是什么？

数据模型（Module）和视图（View）之间的单向绑定。
需要我们先写好模板，然后把模板和数据（可能来自后台）整合到一起形成HTML代码，然后把这段HTML代码插入到文档流里面。简单的来说就是DOM操作html元素。

单向数据绑定的缺点：一旦HTML代码生成好后，就没有办法再进行改变了，如果有新的数据出现，那就必须要先把之前的HTML代码删掉，然后重新把新的数据和模板一起整合形成新的HTML代码，再插入到文档流中。

双向数据绑定是什么？

数据模型和视图之间的双向绑定。

当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化；可以这样说用户在视图上的修改会自动同步到数据模型中去，数据模型也是同样的变化。

双向数据绑定的优点：无需和单向数据绑定那样进行CRUD（Create，Retrieve，Update，Delete）操作，双向数据绑定最常应用在就表单上，这样当用户在前端页面完成输入后，不用任何操作，我们就已经拿到了用户输入好的数据，并放到数据模型中了。

奇葩也是花

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
双向绑定原理

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>原生js实现简单的双向数据绑定</title></head><body><input type="text" id="userName"><span id ="uName"></span><script> var
复制链接

扫一扫