如果数据不是双向数据绑定而是单向数据绑定，那会怎么？而且这种单向是从模型到视图的单向。因此，当你更改了数据时，必须操作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>中的内容也会自动更新。
也就是说视图中的数据改变了。模型中的数据也会发生改变。
综上所述：
更改模型中的数据，页面中数据也会自动更新。
视图中的数据改变了。模型中的数据也会发生改变。
这就是双向数据绑定啊！！！
170
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
