- Vue.js從入門到項目實踐（超值版）
- 聚慕課教育研發中心編著
- 1706字
- 2022-07-29 14:27:44
5.1.1 數據綁定的方法
數據綁定可簡單地分為單向數據綁定和雙向數據綁定，下面進入對這兩種數據綁定方法深層的學習。
1．單向綁定
單向綁定：把Model綁定到View后，當用JavaScript代碼更新Model時，View就會自動更新。因此，我們不需要進行額外的DOM操作，只需要進行Model操作就可以實現視圖的聯動更新。
單向數據綁定的實現思路具體如下。
（1）所有數據只保存一份。
（2）一旦數據變化，就去更新頁面（只有data→DOM，沒有DOM→data）。
（3）若用戶在頁面上做了更新，就手動收集（雙向綁定是自動收集），合并到原有的數據中。
接下來，講解幾個單向綁定的案例。
1）插值綁定
文本插值綁定是數據綁定的最基本形式，用雙大括號“{{ }}”實現，這種語法在Vue中稱為Mustache語法。插值形式就是{{data}}的形式，它使用的是單向綁定。首先定義一個JavaScript對象作為Model，并且把這個Model的兩個屬性綁定到DOM節點上。代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>插值綁定練習</title>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app">
{{num}}
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
num: '學習Vue'
}
})
</script>
</body>
</html>
運行的效果如圖5-1所示。
圖5-1 插值運行效果圖
提示：Vue實例就是ViewModel的代理對象。在上述代碼中，el:指定要把Model綁定到id為app的DOM節點上；data:指定Model，初始化Model的屬性num，在View內部的<div>節點上可以直接用{{num}}引用Model的某個屬性。簡單來說，代碼<div></div>中的{{num}}就相當于View，data中的num: '學習Vue'就相當于是一個Model。
創建一個Vue實例，Vue可以自動把Model的狀態映射到el指定的View上，并且實現綁定，這樣我們就可以通過對Model的操作來實現對DOM的聯動更新。例如，打開瀏覽器，在控制臺中輸入vm.num='Vue'，執行上述代碼，可以觀察到頁面立刻發生了變化，原來的'學習Vue'自動變成了'Vue'。Vue作為MVVM框架會自動監聽Model的任何變化，在Model數據變化時更新View的顯示，這種Model到View的綁定就是單向綁定。
2）v-bind綁定
如果HTML的某些屬性可以支持單向綁定，我們只需要在該屬性前面加上v-bind指令，這樣Vue在解析時會識別出該指令，將屬性值跟Vue實例的Model進行綁定。以后，我們就可以通過Model來動態地操作該屬性，從而實現DOM的聯動更新。例如，<p class="jumooc">，<p>中class樣式指定的值為jumooc，它是一個靜態的屬性值，如果想使該屬性值跟Model進行一個綁定，只需要加上一個v-bind指令，如<p v-bind:class="jumooc">。綁定后，jumooc不再是一個靜態的字符串，而是Vue實例中的data.jumooc變量，也就是它跟Model的jumooc進行了綁定，所以我們可以通過操作Model的jumooc來實現對View的class屬性動態更新，從而實現View的動態更新。
代碼如下：
運行的效果如圖5-2所示。
圖5-2 v-bind運行效果圖
提示：如上面代碼所示，vm.jumooc的初始值為'red'，此時<p>的style屬性對應的是.red，故背景為紅色；若在瀏覽器的控制臺中輸入vm.classed='bule'，此時背景就自動變成了藍色。可以看到，通過對class屬性進行綁定，我們就可以動態地改變class對應的樣式。這都是通過對Model的操作完成的，沒有進行任何DOM操作。
2．雙向綁定
雙向綁定：是指HTML標簽數據綁定到Vue對象，另外反方向數據也是綁定的。簡單地說，Vue對象的改變會直接影響HTML標簽的變化，而且標簽的變化也會反過來影響Vue對象的屬性變化。這樣就會徹底改變以前DOM的開發方式。以前DOM驅動的開發方式（尤其是以jQuery為主的開發時代）都是DOM變化后觸發JS事件，在事件中通過JS代碼獲取標簽的變化，再與后臺進行交互，然后根據后臺返回的結果更新HTML標簽，比較煩瑣。有了Vue的雙向綁定，開發者只需要關心JSON數據的變化即可，Vue自動映射到HTML上，而且HTML的變化也會映射回JS對象上；同時，開發方式直接變革成了前端由數據驅動，遠遠拋棄了由DOM驅動主導的開發時代。
Vue框架的核心功能就是雙向的數據綁定。簡單來說，雙向綁定就是把Model綁定到View的同時也將View綁定到Model上，這樣既可以通過更新Model來實現View的自動更新，也可以通過更新View來實現Model數據的更新。因此，當我們用JavaScript代碼更新Model時，View就會自動更新；反之，如果更新View，Model的數據也會自動被更新。
在Vue中只有表單元素能夠創建雙向的綁定，可以用v-model指令在表單<input>、<textarea>及<select>元素上創建雙向數據綁定。例如，在相應的位置上只要輸入v-model="需要綁定的數據"后，數據就可以進行Model→View和View→Model的綁定。
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>雙向綁定</title>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<form id="app" action="#">
<p><input v-model="name"></p>
<p><input v-model="age"></p>
</form>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
name: 'lili',
age: '18'
}
});
</script>
</body>
</html>
運行的效果如圖5-3所示。
圖5-3 v-model運行效果圖
可以在圖5-3的表單中輸入內容，然后在瀏覽器控制臺中用vm.$data查看Model的內容，也可以用vm.name查看Model的name屬性，它的值和表單對應的<input>中的內容是一致的。如果在瀏覽器控制臺中用JavaScript更新Model（例如，執行vm.name='lili'），表單對應的<input>內容就會立刻更新。可以看到，通過v-model實現了表單數據和Model數據的雙向綁定。