Vue單向繫結與雙向繫結
概述
Vue.js 最顯著的特點就是響應式和資料驅動，也就是將Model和View進行單向繫結或者雙向繫結。
單向繫結：把Model繫結到View，當我們用JavaScript程式碼更新Model時，View就會自動更新。因此，我們不需要進行額外的DOM操作，只需要進行Model的操作就可以實現檢視的聯動更新。
雙向繫結：把Model繫結到View的同時也將View繫結到Model上，這樣就既可以通過更新Model來實現View的自動更新，也可以通過更新View來實現Model資料的更新。所以，當我們用JavaScript程式碼更新Model時，View就會自動更新，反之，如果使用者更新了View，Model的資料也自動被更新了。
弄清了它的這種資料繫結的機制，我們再來看Vue.js程式碼就會很清晰了，Vue.js主要有三種資料繫結形式，並且都是基於單向繫結和雙向繫結。
插值形式
插值形式就是{{data}}的形式，它使用的是單向繫結。
我們首先定義好一個JavaScript物件作為Model，並且把這個Model的兩個屬性繫結到DOM節點上：
1 <body> 2 <div id="vm"> 3 <p>Hello, {{name}}!</p> 4 <p>You are {{age}} years old!</p> 5 </div> 6</body> 7 8 9 <script src="https://cdn.jsdelivr.net/npm/vue"></script> 10 <script type="text/javascript"> 11 var vm = new Vue({ 12 el: '#vm', 13 data: { 14 name: 'DroidMind', 15 age: 18 16 } 17 }); 18 </script> 19 ————————————————20 版權宣告：本文為CSDN博主「DroidMind」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連結及本宣告。 21 原文連結：https://blog.csdn.net/hp910315/article/details/79658610
Vue例項就是ViewModel的代理物件：
el: 指定了要把Model繫結到id為vm的DOM節點上。
data: 指定了Model，我們初始化了Model的兩個屬性name和age，在View內部的<p>節點上，可以直接用{{ name }}引用Model的某個屬性。
當我們建立一個Vue例項，Vue可以自動把Model的狀態對映到el指定的View上，並且實現繫結，這樣我們就可以通過Model的操作來實現對DOM的聯動更新，例如，開啟瀏覽器console，在控制檯輸入vm.name = 'Bob'，執行上述程式碼，可以觀察到頁面立刻發生了變化，原來的Hello, Robot!自動變成了Hello, Bob!。Vue作為MVVM框架會自動監聽Model的任何變化，在Model資料變化時，更新View的顯示。這種Model到View的繫結就是單向繫結。
v-bind形式
如果我們希望html的某些屬效能夠支援單向繫結，我們只需要在該屬性前面加上v-bind:指令，這樣Vue在解析的時候會識別出該指令，就會將該將其屬性的值跟Vue例項的Model進行繫結。這樣我們就可以通過Model來動態的操作該屬性從而實現DOM的聯動更新。
例如：<p class="classed">
上面<p>節點的class樣式指定的值為classed，它是一個靜態的屬性值，如果我們希望將該屬性值跟Model進行一個繫結，只需要加上一個v-bind:指令，如下所示：
<p v-bind:class="classed">
繫結之後，classed不再是一個靜態的字串，而是vue例項中的data.classed變數，也就是它跟Model的classed進行了繫結，所以我們可以通過操作Model的classed來實現對View的class屬性的動態更新，從而實現View的動態更新。
1 <body> 2 <div id="vm"> 3 <p v-bind:class="classed">Hello, {{name}}!</p> 4 </div> 5 </body> 6 7 8 <script src="https://cdn.jsdelivr.net/npm/vue"></script> 9 <script type="text/javascript"> 10 var vm = new Vue({ 11 el: '#vm', 12 data: { 13 name: 'DroidMind', 14 classed: 'red' 15 } 16 }); 17 </script> 18 19 20 <style> 21 .red { 22 background: red; 23 } 24 25 26 .blue { 27 background: blue; 28 } 29 </style>
如上面程式碼所示，vm.classed的初始值為red，此時<p>的樣式屬性對應的是.red，此時背景就為紅色，我們可以通過在瀏覽器的控制檯輸入vm.classed='bule'，此時背景就自動變成了藍色。可以看到通過對class屬性進行繫結我們就可以動態的改變class對應的樣式，這個都是通過Model的操作完成的，沒有設定任何的DOM操作。
v-model形式
v-model主要是用在表單元素中，實現了雙向繫結。
當用戶填寫表單時，View的狀態就被更新了，如果此時Model的資料也會隨著輸入的資料動態的更新，那就相當於我們把Model和View做了雙向繫結。
1 <body> 2 <form id="vm" action="#"> 3 <p><input v-model="email"></p> 4 <p><input v-model="name"></p> 5 </form> 6 7 8 </body> 9 <script src="https://cdn.jsdelivr.net/npm/vue"></script> 10 <script type="text/javascript"> 11 var vm = new Vue({ 12 el: '#vm', 13 data: { 14 email: '', 15 name: '' 16 } 17 }); 18 </script>
我們可以在表單中輸入內容，然後在瀏覽器console中用vm.$data檢視Model的內容，也可以用vm.name檢視Model的name屬性，它的值和FORM表單對應的<input>是一致的。如果在瀏覽器console中用JavaScript更新Model，例如，執行vm.name='Bob'，表單對應的<input>內容就會立刻更新。可以看到通過v-model實現了表單資料和Model資料的雙向繫結。
把上面的內容搞清楚了，我們就可以清楚的知道Vue.js中View跟Vue例項之間的關係了，寫起程式碼來整個思路也變得非常的清晰，如果沒有把上面的原理搞清楚，學習Vue.js肯定就是雲裡霧裡，不知所然。