1、學習准備：
①：雙向數據綁定可以簡單理解為：后端定義的數據改變，前端頁面展示的時候會自動改變，數據通過前端頁面修改的時候，后端定義的數據內容也會隨之改變。
②：指令中只有v-model可以實現雙向數據綁定。
③：v-model只能應用在表單元素中，如：input（radio、text、address、email...）、checkbox、select、textarea等。
2、先來看看單向綁定的例子：
<body>
<div id="app">
<h4>{{ msg }}</h4>
<input type="text" v-bind:value="msg"/>
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
msg : 'This is a msg'
},
methods : {}
});
</script>
</body>
這個時候我們 打開瀏覽器控制台輸入：vm.msg，按下enter鍵查看對象屬性。
接下來在控制台執行一條語句：vm.msg = 123 ，對msg數據重新賦值
可以看到我們在賦值的同時，頁面的數據也隨之發生了變化；那么我們再試試改變頁面展示的數據，看看msg后台數據會不會發生變化。
我先在頁面input框里加上了“aaa”，然后在頁面控制台中輸入vm.msg查看，發現其值沒有發生變化，還是“123”，這就是數據單向綁定。很明顯這是我們平時工作中常見的現象。
3、雙向數據綁定的例子：
我們只需要修改input元素即可
<input type="text" v-model="msg"/>
可以看到我們連input框的value元素都不用寫，直接用v-model指令即可，其值會默認賦值在value屬性上（這也是為什么v-model僅局限於表單元素使用的原因）。
我們先在瀏覽器控制台中做賦值：vm.msg = 123，觀察到頁面數據也會隨之變化。
然后我們在輸入框中加上“神奇”二字，會發現input框上面的<h4>標簽的文字會隨之變化，控制台輸入：vm.msg，其對象值也發生了變化，這就是雙向數據綁定。
4、除了以上用法v-model指令后面還可以添加參數
①：lazy：將數據變化改到change事件中發生
<div id="app">
<h4>{{ msg }}</h4>
<input type="text" v-model.lazy="msg"/>
</div>
我們在v-model后加上了“.lazy”，這時我們在Input框里輸入內容的時候，<h4>標簽的內容不會馬上變化，只有當輸入完畢，光標不再聚焦於input框的時候，值才會同步，相當於change事件觸發時才會同步數據。
②：還有一些參數，比如：number、debounce好像在vue2.0版本之后被移除了，大家有興趣可以去vue官網或者論壇里看看，也許會有其他的一些參數或者替代方法。
每天進步一點點！