怎么理解vue的数据双向绑定

来源：互联网发布：c并发编程实现编辑：程序博客网时间：2024/05/01 22:40

单向数据绑定

指的是我们先把模板写好，然后把模板和数据（数据可能来自后台）整合到一起形成HTML代码，然后把这段HTML代码插入到文档流里面。
单向数据绑定缺点：HTML代码一旦生成完以后，就没有办法再变了，如果有新的数据来了，那就必须把之前的HTML代码去掉，再重新把新的数据和模板一起整合后插入到文档流中。 简单的来说就是DOM操作直接改变

数据数据双向

数据模型（Module）和视图（View）之间的双向绑定。
用户在视图上的修改会自动同步到数据模型中去，同样的，如果数据模型中的值发生了变化，也会立刻同步到视图中去。双向数据绑定的优点是无需进行和单向数据绑定的那CRUD（Create，Retrieve，Update，Delete）操作双向数据绑定最经常的应用场景就是表单了，这样当用户在前端页面完成输入后，不用任何操作，我们就已经拿到了用户的数据存放到数据模型中了。

如何使用js达到双向数据绑定

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><input type="text" id="userName"><br><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");            document.getElementById("uName").innerText=val;            document.getElementById("userNmae").value=val;        }    });    document.getElementById("userName").addEventListener("keyup",function(event){        obj.userName=event.target.value;    }    )</script></body></html>

运行上述的dome，可以使用控制台，obj.username=123赋值，会自动触发set方法。若我们在控制台使用obj.username拿值可以触发get方法，这也就是vue的双向数据绑定的核心点。

阅读全文

0 0