哪里有PPT免费模板

書名： Vue.js從入門到項(xiàng)目實(shí)踐（超值版）
作者名：聚慕課教育研發(fā)中心編著
本章字?jǐn)?shù)： 1706字
更新時(shí)間： 2022-07-29 14:27:44

5.1.1　數(shù)據(jù)綁定的方法

數(shù)據(jù)綁定可簡單地分為單向數(shù)據(jù)綁定和雙向數(shù)據(jù)綁定，下面進(jìn)入對(duì)這兩種數(shù)據(jù)綁定方法深層的學(xué)習(xí)。

1．單向綁定

單向綁定：把Model綁定到View后，當(dāng)用JavaScript代碼更新Model時(shí)，View就會(huì)自動(dòng)更新。因此，我們不需要進(jìn)行額外的DOM操作，只需要進(jìn)行Model操作就可以實(shí)現(xiàn)視圖的聯(lián)動(dòng)更新。

單向數(shù)據(jù)綁定的實(shí)現(xiàn)思路具體如下。

（1）所有數(shù)據(jù)只保存一份。

（2）一旦數(shù)據(jù)變化，就去更新頁面（只有data→DOM，沒有DOM→data）。

（3）若用戶在頁面上做了更新，就手動(dòng)收集（雙向綁定是自動(dòng)收集），合并到原有的數(shù)據(jù)中。

接下來，講解幾個(gè)單向綁定的案例。

1）插值綁定

文本插值綁定是數(shù)據(jù)綁定的最基本形式，用雙大括號(hào)“{{ }}”實(shí)現(xiàn)，這種語法在Vue中稱為Mustache語法。插值形式就是{{data}}的形式，它使用的是單向綁定。首先定義一個(gè)JavaScript對(duì)象作為Model，并且把這個(gè)Model的兩個(gè)屬性綁定到DOM節(jié)點(diǎn)上。代碼如下：

    <!DOCTYPE html>
    <html>
      <head>
       <meta charset="utf-8">
       <title>插值綁定練習(xí)</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: '學(xué)習(xí)Vue'
         }
      })
      </script>
    </body>
    </html>

運(yùn)行的效果如圖5-1所示。

圖5-1　插值運(yùn)行效果圖

提示：Vue實(shí)例就是ViewModel的代理對(duì)象。在上述代碼中，el:指定要把Model綁定到id為app的DOM節(jié)點(diǎn)上；data:指定Model，初始化Model的屬性num，在View內(nèi)部的<div>節(jié)點(diǎn)上可以直接用{{num}}引用Model的某個(gè)屬性。簡單來說，代碼<div></div>中的{{num}}就相當(dāng)于View，data中的num: '學(xué)習(xí)Vue'就相當(dāng)于是一個(gè)Model。

創(chuàng)建一個(gè)Vue實(shí)例，Vue可以自動(dòng)把Model的狀態(tài)映射到el指定的View上，并且實(shí)現(xiàn)綁定，這樣我們就可以通過對(duì)Model的操作來實(shí)現(xiàn)對(duì)DOM的聯(lián)動(dòng)更新。例如，打開瀏覽器，在控制臺(tái)中輸入vm.num='Vue'，執(zhí)行上述代碼，可以觀察到頁面立刻發(fā)生了變化，原來的'學(xué)習(xí)Vue'自動(dòng)變成了'Vue'。Vue作為MVVM框架會(huì)自動(dòng)監(jiān)聽Model的任何變化，在Model數(shù)據(jù)變化時(shí)更新View的顯示，這種Model到View的綁定就是單向綁定。

2）v-bind綁定

如果HTML的某些屬性可以支持單向綁定，我們只需要在該屬性前面加上v-bind指令，這樣Vue在解析時(shí)會(huì)識(shí)別出該指令，將屬性值跟Vue實(shí)例的Model進(jìn)行綁定。以后，我們就可以通過Model來動(dòng)態(tài)地操作該屬性，從而實(shí)現(xiàn)DOM的聯(lián)動(dòng)更新。例如，<p class="jumooc">，<p>中class樣式指定的值為jumooc，它是一個(gè)靜態(tài)的屬性值，如果想使該屬性值跟Model進(jìn)行一個(gè)綁定，只需要加上一個(gè)v-bind指令，如<p v-bind:class="jumooc">。綁定后，jumooc不再是一個(gè)靜態(tài)的字符串，而是Vue實(shí)例中的data.jumooc變量，也就是它跟Model的jumooc進(jìn)行了綁定，所以我們可以通過操作Model的jumooc來實(shí)現(xiàn)對(duì)View的class屬性動(dòng)態(tài)更新，從而實(shí)現(xiàn)View的動(dòng)態(tài)更新。

代碼如下：

運(yùn)行的效果如圖5-2所示。

圖5-2　v-bind運(yùn)行效果圖

提示：如上面代碼所示，vm.jumooc的初始值為'red'，此時(shí)<p>的style屬性對(duì)應(yīng)的是.red，故背景為紅色；若在瀏覽器的控制臺(tái)中輸入vm.classed='bule'，此時(shí)背景就自動(dòng)變成了藍(lán)色。可以看到，通過對(duì)class屬性進(jìn)行綁定，我們就可以動(dòng)態(tài)地改變class對(duì)應(yīng)的樣式。這都是通過對(duì)Model的操作完成的，沒有進(jìn)行任何DOM操作。

2．雙向綁定

雙向綁定：是指HTML標(biāo)簽數(shù)據(jù)綁定到Vue對(duì)象，另外反方向數(shù)據(jù)也是綁定的。簡單地說，Vue對(duì)象的改變會(huì)直接影響HTML標(biāo)簽的變化，而且標(biāo)簽的變化也會(huì)反過來影響Vue對(duì)象的屬性變化。這樣就會(huì)徹底改變以前DOM的開發(fā)方式。以前DOM驅(qū)動(dòng)的開發(fā)方式（尤其是以jQuery為主的開發(fā)時(shí)代）都是DOM變化后觸發(fā)JS事件，在事件中通過JS代碼獲取標(biāo)簽的變化，再與后臺(tái)進(jìn)行交互，然后根據(jù)后臺(tái)返回的結(jié)果更新HTML標(biāo)簽，比較煩瑣。有了Vue的雙向綁定，開發(fā)者只需要關(guān)心JSON數(shù)據(jù)的變化即可，Vue自動(dòng)映射到HTML上，而且HTML的變化也會(huì)映射回JS對(duì)象上；同時(shí)，開發(fā)方式直接變革成了前端由數(shù)據(jù)驅(qū)動(dòng)，遠(yuǎn)遠(yuǎn)拋棄了由DOM驅(qū)動(dòng)主導(dǎo)的開發(fā)時(shí)代。

Vue框架的核心功能就是雙向的數(shù)據(jù)綁定。簡單來說，雙向綁定就是把Model綁定到View的同時(shí)也將View綁定到Model上，這樣既可以通過更新Model來實(shí)現(xiàn)View的自動(dòng)更新，也可以通過更新View來實(shí)現(xiàn)Model數(shù)據(jù)的更新。因此，當(dāng)我們用JavaScript代碼更新Model時(shí)，View就會(huì)自動(dòng)更新；反之，如果更新View，Model的數(shù)據(jù)也會(huì)自動(dòng)被更新。

在Vue中只有表單元素能夠創(chuàng)建雙向的綁定，可以用v-model指令在表單<input>、<textarea>及<select>元素上創(chuàng)建雙向數(shù)據(jù)綁定。例如，在相應(yīng)的位置上只要輸入v-model="需要綁定的數(shù)據(jù)"后，數(shù)據(jù)就可以進(jìn)行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>

運(yùn)行的效果如圖5-3所示。

圖5-3　v-model運(yùn)行效果圖

可以在圖5-3的表單中輸入內(nèi)容，然后在瀏覽器控制臺(tái)中用vm.$data查看Model的內(nèi)容，也可以用vm.name查看Model的name屬性，它的值和表單對(duì)應(yīng)的<input>中的內(nèi)容是一致的。如果在瀏覽器控制臺(tái)中用JavaScript更新Model（例如，執(zhí)行vm.name='lili'），表單對(duì)應(yīng)的<input>內(nèi)容就會(huì)立刻更新。可以看到，通過v-model實(shí)現(xiàn)了表單數(shù)據(jù)和Model數(shù)據(jù)的雙向綁定。

官术网_书友最值得收藏!

Vue.js從入門到項(xiàng)目實(shí)踐（超值版）

5.1.1 數(shù)據(jù)綁定的方法

1．單向綁定

2．雙向綁定

5.1.1　數(shù)據(jù)綁定的方法