如果数据不是双向数据绑定而是单向数据绑定,那会怎么?而且这种单向是从模型到视图的单向。因此,当你更改了数据时,必须操作dom元素更新与之绑定的页数数据显示。但是,有了双向数据绑定后,就省略了手动更新数据这一步。你可以想一想双向数据绑定基于的技术是什么。不用任何想象力,你就应该猜得到那就是监听啊,监听啊,监听啊!
<html><head>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
</div>
</body>
<script type="text/javascript">
var vue = new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
});
</script>
</html>
运行以上代码,页面显示Hello World!
在浏览器控制台console中输入
vue.message = "vue is a perfect framework";
页面的显示内容自动更改为vue is a perfect framework。
这说明什么?说明更改模型中的数据,页面中数据也会自动更新。
再看以下代码:
<html>
<head>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<input v-model = "message"></input>
</div>
</body>
<script type="text/javascript">
var vue = new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
});
</script>
</html>
修改<input>框中的内容,<h1>中的内容也会自动更新。
也就是说视图中的数据改变了。模型中的数据也会发生改变。
综上所述:
更改模型中的数据,页面中数据也会自动更新。
视图中的数据改变了。模型中的数据也会发生改变。
这就是双向数据绑定啊!!!