Vue入門之?dāng)?shù)據(jù)綁定(小結(jié))

更新時(shí)間：2018年01月08日 08:19:09 作者：HcySunYang

本篇文章主要介紹了探索Vue高階組件的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

1. 什么是雙向綁定？

Vue框架很核心的功能就是雙向的數(shù)據(jù)綁定。雙向是指：HTML標(biāo)簽數(shù)據(jù) 綁定到 Vue對象，另外反方向數(shù)據(jù)也是綁定的。通俗點(diǎn)說就是，Vue對象的改變會(huì)直接影響到HTML的標(biāo)簽的變化，而且標(biāo)簽的變化也會(huì)反過來影響Vue對象的屬性的變化。

這樣以來，就徹底變革了之前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對象上，開發(fā)方式直接變革成了前端由數(shù)據(jù)驅(qū)動(dòng)的開發(fā)時(shí)代，遠(yuǎn)遠(yuǎn)拋棄了Dom開發(fā)主導(dǎo)的時(shí)代了。

2. Vue綁定文本

數(shù)據(jù)綁定最常見的形式就是使用 “Mustache” 語法（雙大括號）的文本插值，比如模板引擎：handlebars中就是用的{{}}.

創(chuàng)建的Vue對象中的data屬性就是用來綁定數(shù)據(jù)到HTML的。參考如下代碼：

<span>Message: {{ msg }}</span>
<script>
 var app = new Vue({     // 創(chuàng)建Vue對象。Vue的核心對象。
  el: '#app',        // el屬性：把當(dāng)前Vue對象掛載到 div標(biāo)簽上，#app是id選擇器
  data: {          // data: 是Vue對象中綁定的數(shù)據(jù)
   msg: 'Hello Vue!'  // message 自定義的數(shù)據(jù)
  }
 });
</script>

3. 綁定數(shù)據(jù)中使用JavaScript表達(dá)式

對于所有的數(shù)據(jù)綁定， Vue.js 都提供了完全的 JavaScript 表達(dá)式支持。

<span>Message: {{ msg + ' - ' + name }}</span>
<script>
 var app = new Vue({     // 創(chuàng)建Vue對象。Vue的核心對象。
  el: '#app',        // el屬性：把當(dāng)前Vue對象掛載到 div標(biāo)簽上，#app是id選擇器
  data: {          // data: 是Vue對象中綁定的數(shù)據(jù)
   msg: 'Hi',       // message 自定義的數(shù)據(jù)
   name: 'flydragon'    // name自定義的屬性，vue可以多個(gè)自定義屬性，屬性類型也可是復(fù)雜類型
  }
 });
</script>

結(jié)果：

Hi - flydragon

當(dāng)然Vue還可以支持表達(dá)中的任何計(jì)算、函數(shù)處理等。參考下面的綜合點(diǎn)的案例。

<!DOCTYPE html> 
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue入門之?dāng)?shù)據(jù)綁定-表達(dá)式運(yùn)算</title>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
 <div id="app">
  {{ msg + ' - ' + name }}
  <p>
   {{ isOk ? '123' : '456' }}
  </p>
  <p>我的年齡是： {{ age *2 }}</p>
 </div>

 <script>
 var app = new Vue({     // 創(chuàng)建Vue對象。Vue的核心對象。
  el: '#app',        // el屬性：把當(dāng)前Vue對象掛載到 div標(biāo)簽上，#app是id選擇器
  data: {          // data: 是Vue對象中綁定的數(shù)據(jù)
   msg: 'Hi',       // message 自定義的數(shù)據(jù)
   name: 'flydragon',
   isOk: true,
   age: 18
  }
 });
 </script>
</body>
</html>

4. Vue屬性綁定

Vue中不能直接使用{{ expression }}語法進(jìn)行綁定html的標(biāo)簽，而是用它特有的v-bind指令（就是一種寫法，先按照格式走，具體指令是什么可以后續(xù)再了解）。

綁定的語法結(jié)構(gòu)：

<標(biāo)簽 v-bind:屬性名="要綁定的Vue對象的data里的屬性名"></標(biāo)簽>
例如:
<span v-bind:id="menuId">{{ menuName }}</span>

參考如下代碼案例：

<!DOCTYPE html> 
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue入門之?dāng)?shù)據(jù)綁定--屬性綁定</title>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
 <div id="app">
  <div v-bind:id="MenuContaineId">
   <a href="#" v-bind:class="MenuClass">首頁</a>
   <a href="#" v-bind:class="MenuClass">產(chǎn)品</a>
   <a href="#" v-bind:class="MenuClass">服務(wù)</a>
   <a href="#" v-bind:class="MenuClass">關(guān)于</a>
  </div>
 </div>

 <script>
  var app = new Vue({     
   el: '#app',        
   data: {          // data: 是Vue對象中綁定的數(shù)據(jù)
    MenuClass: 'top-menu',
    MenuContaineId: 'sitemenu'
   }
  });
 </script>
</body>
</html>

5. 屬性綁定簡寫

由于v-bind使用非常頻繁，所以Vue提供了簡單的寫法，可以去掉v-bind直接使用:即可。

例如：
<div :id="MenuContaineId">
等價(jià)于
<div v-bind:id="MenuContaineId">

6. 輸出純HTML

由于Vue對于輸出綁定的內(nèi)容做了提前encode，保障在綁定到頁面上顯示的時(shí)候不至于被xss攻擊。但某些場景下，我們確保后臺(tái)數(shù)據(jù)是安全的，那么我們就要在網(wǎng)頁中顯示原生的HTML標(biāo)簽。Vue提供了v-html指令。

<div id="app">
 <div v-bind:id="MenuContaineId" v-html="MenuBody">
 </div>
</div>
<script>
 var app = new Vue({     
  el: '#app',        
  data: {          // data: 是Vue對象中綁定的數(shù)據(jù)
   MenuContaineId: 'menu',
   MenuBody: '<p>這里是菜單的內(nèi)容</p>'
  }
 });
</script>

結(jié)果：

<div id="app">
 <div id="menu">
  <p>這里是菜單的內(nèi)容</p>
 </div>
</div>

7. 樣式綁定

對于普通的屬性的綁定，只能用上面的講的綁定屬性的方式。而Vue專門加強(qiáng)了class和style的屬性的綁定?？梢杂袕?fù)雜的對象綁定、數(shù)組綁定樣式和類。

7.1. 綁定樣式對象

經(jīng)常我們需要對樣式進(jìn)行切換，比如：div的顯示和隱藏，某些標(biāo)簽active等。Vue提供的對象綁定樣式的方式就很容做這些事情。

代碼：

<div v-bind:class="{ active: isActive }"></div>

解釋：當(dāng) isActive為 true時(shí)， div就會(huì)具有了active樣式類，如果 isActive為false，那么div就去掉active樣式類。

<!DOCTYPE html> 
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue入門之綁定樣式類</title>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <style>
 .active {
  background-color: #ccc;
 }
 </style>
</head>
<body>
 <div id="app">
  <div v-bind:id="MenuContaineId" v-bind:class="{ active: isActive }">
   綁定顏色類
  </div>
 </div>
 <script>
  var app = new Vue({     
   el: '#app',        
   data: {          // data: 是Vue對象中綁定的數(shù)據(jù)
    MenuContaineId: 'menu',
    isActive: true
   }
  });
 </script>
</body>
</html>

7.2. 混合普通的HTML標(biāo)簽樣式類及綁定樣式對象

v-bind:class 指令可以與普通的 class 屬性共存。

<div id="app">
 <div class="static"
   v-bind:class="{ active: isActive, 'text-danger': hasError }">
 </div>
</div>
<script>
 var app = new Vue({     
  el: '#app',        
  data: {          // data: 是Vue對象中綁定的數(shù)據(jù)
   isActive: true,
   hasError: false
  }
 });
</script>

結(jié)果：

<div id="app">
 <div class="static active">
 </div> 
</div>

7.3. 綁定data中的樣式對象

直接在html屬性中的雙引號內(nèi)寫對象，還是很不爽，也沒有智能提示，很容易寫錯(cuò)。 Vue可以讓我們直接把綁定的class字符串指向data的一個(gè)對象，這樣就非常方便了，既可以有智能提示，又可以很復(fù)雜進(jìn)行編輯，不用擔(dān)心煩人的""了。

<div id="app">
 <div class="static"
   v-bind:class="classObject">
 </div>
</div>
<script>
 var app = new Vue({     
  el: '#app',        
  data: {
   classObject: {
    active: true,
    'text-danger': false
   }
  }
 });
</script>

結(jié)果：

<div id="app">
 <div class="static active">
 </div>
</div>

7.4. 綁定樣式數(shù)組

其實(shí)綁定數(shù)組，就是綁定樣式對象的延續(xù)，看官網(wǎng)的例子代碼吧。

<div v-bind:class="[activeClass, errorClass]">

data: {
 activeClass: 'active',
 errorClass: 'text-danger'
}

當(dāng)然還有很多其他很有趣的支持，就不贅述了。

例如:

<div v-bind:class="[isActive ? activeClass : '', errorClass]">
<div v-bind:class="[{ active: isActive }, errorClass]">

7.5. 內(nèi)聯(lián)樣式綁定

內(nèi)聯(lián)樣式的綁定，非常類似于樣式類的操作。v-bind:style 的對象語法十分直觀——看著非常像 CSS ，其實(shí)它是一個(gè) JavaScript 對象。 CSS屬性名可以用駝峰式（camelCase）或短橫分隔命名（kebab-case）。

看個(gè)例子：

<!DOCTYPE html> 
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue入門之htmlraw</title>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
 <div id="app">
  <div v-bind:style="{fontSize: size + 'px', backgroundColor: bgcolor, width: width}">
   vue 入門系列教程
  </div>
 </div>
 <script>
  var app = new Vue({     
   el: '#app',        
   data: {          
    size: 19,
    width: 200,
    bgcolor: 'red'
   }
  });
 </script>
</body>
</html>

自動(dòng)添加前綴

當(dāng) v-bind:style 使用需要特定前綴的 CSS 屬性時(shí)，如 transform ，Vue.js 會(huì)自動(dòng)偵測并添加相應(yīng)的前綴。

8. 計(jì)算屬性

在做數(shù)據(jù)的綁定的時(shí)候,數(shù)據(jù)要進(jìn)行處理之后才能展示到html頁面上，雖然vue提供了非常好的表達(dá)式綁定的方法，但是只能應(yīng)對低強(qiáng)度的需求。比如：把一個(gè)日期按照規(guī)定格式進(jìn)行輸出，可能就需要我們對日期對象做一些格式化的出來，表達(dá)式可能就捉襟見肘了。

Vue對象提供的computed屬性，可以讓我們開發(fā)者在里面可以放置一些方法，協(xié)助我們綁定數(shù)據(jù)操作，這些方法可以跟data中的屬性一樣用，注意這些方法用的時(shí)候不要加()。例子來了：

<!DOCTYPE html> 
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue入門之htmlraw</title>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
 <div id="app">
  <table>
   <tr>
    <!-- computed里面的函數(shù)可以直接當(dāng)成data里面的屬性用，非常方便，注意沒有括號?。。?->
    <td>生日</td><td>{{ getBirthday }}</td>
   </tr>
   <tr>
    <td>年齡</td><td>{{ age }}</td>
   </tr>   
   <tr>
    <td>地址</td><td>{{ address }}</td>
   </tr>
  </table>
 </div>
 <script>
  var app = new Vue({     
   el: '#app',        
   data: {          
    birthday: 914228510514,   // 這是一個(gè)日期對象的值：1998年11月1日
    age: 19,
    address: '北京昌平區(qū)龍澤飛龍'
   },
   computed: {
    // 把日期換成 常見規(guī)格格式的字符串。
    getBirthday: function () {
     var m = new Date(this.birthday);
     return m.getFullYear() + '年' + m.getMonth() +'月'+ m.getDay()+'日';
    }
   }
  });
 </script>
</body>
</html>

9. 綁定的數(shù)據(jù)過濾器

過濾器本質(zhì)就是數(shù)據(jù)在呈現(xiàn)之前先進(jìn)行過濾和篩選。官網(wǎng)上寫的不錯(cuò)，我就不再贅述，下面是官網(wǎng)的描述。

Vue.js 允許你自定義過濾器，被用作一些常見的文本格式化。過濾器應(yīng)該被添加在 mustache 插值的尾部，由“管道符”指示：

{{ message | capitalize }}
<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>

Vue 2.x 中，過濾器只能在 mustache 綁定和 v-bind 表達(dá)式（從 2.1.0 開始支持）中使用，因?yàn)檫^濾器設(shè)計(jì)目的就是用于文本轉(zhuǎn)換。為了在其他指令中實(shí)現(xiàn)更復(fù)雜的數(shù)據(jù)變換，你應(yīng)該使用計(jì)算屬性。

過濾器函數(shù)總接受表達(dá)式的值作為第一個(gè)參數(shù)。

new Vue({
 // ...
 filters: {
  capitalize: function (value) {
   if (!value) return ''
   value = value.toString()
   return value.charAt(0).toUpperCase() + value.slice(1)
  }
 }
})

過濾器可以串聯(lián)：

{{ message | filterA | filterB }}

過濾器是 JavaScript 函數(shù)，因此可以接受參數(shù)：

{{ message | filterA('arg1', arg2) }}

這里，字符串 'arg1' 將傳給過濾器作為第二個(gè)參數(shù)， arg2 表達(dá)式的值將被求值然后傳給過濾器作為第三個(gè)參數(shù)。

10. 核心：自動(dòng)響應(yīng)對象的變化到HTML標(biāo)簽

上面的例子都是數(shù)據(jù)對象是寫死在創(chuàng)建的Vue對像上，那如果數(shù)據(jù)（data）發(fā)生改變時(shí)會(huì)怎樣呢？讓我們用chrome把上面例子的頁面打開，并打開發(fā)者工具控制臺(tái),輸入：app.age = 20會(huì)有什么情況發(fā)生呢？

在頁面中添加一個(gè)按鈕，動(dòng)態(tài)的增加年齡：

<!DOCTYPE html> 
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue入門之htmlraw</title>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
 <div id="app">
  <table>
   <tr>
    <!-- computed里面的函數(shù)可以直接當(dāng)成data里面的屬性用，非常方便，注意沒有括號?。?！-->
    <td>生日</td><td>{{ getBirthday }}</td>
   </tr>
   <tr>
    <td>年齡</td><td>{{ age }}</td>
   </tr>   
   <tr>
    <td>地址</td><td>{{ address }}</td>
   </tr>
  </table>
 </div>

 <!-- 添加下面這行代碼，動(dòng)態(tài)增加 年齡，頁面會(huì)有怎樣的變化呢？？ -->
 <button type="button" onclick="app.age+=1;" >加加</button>
 <script>
  var app = new Vue({     
   el: '#app',        
   data: {          
    birthday: 914228510514,   // 這是一個(gè)日期對象的值：1998年11月1日
    age: 19,
    address: '北京昌平區(qū)龍澤飛龍'
   },
   computed: {
    // 把日期換成 常見規(guī)格格式的字符串。
    getBirthday: function () {
     var m = new Date(this.birthday);
     return m.getFullYear() + '年' + m.getMonth() +'月'+ m.getDay()+'日';
    }
   }
  });
 </script>
</body>
</html>

11. 雙向數(shù)據(jù)綁定

上面的例子我們大多講的是單向的 js對象向 HTML數(shù)據(jù)進(jìn)行綁定，那HTML怎樣向js進(jìn)行反饋數(shù)據(jù)呢？ HTML中只有表達(dá)能接受用戶的輸入，最簡單的演示雙向綁定的就是文本框了。

Vue提供了一個(gè)新的指令：v-model進(jìn)行雙向數(shù)據(jù)的綁定，注意不是v-bind。

<!DOCTYPE html> 
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue入門之htmlraw</title>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
 <div id="app">
  <!-- v-model可以直接指向data中的屬性，雙向綁定就建立了 -->
  <input type="text" name="txt" v-model="msg">
  <p>您輸入的信息是：{{ msg }}</p>
 </div>
 <script>
  var app = new Vue({     
   el: '#app',        
   data: {          
    msg: '雙向數(shù)據(jù)綁定的例子'
   }
  });
 </script>
</body>
</html>

最終的結(jié)果就是：你改變input文本框的內(nèi)容的時(shí)候，p標(biāo)簽中的內(nèi)容會(huì)跟著進(jìn)行改變，哇是不是很神奇呢...

關(guān)于其他表單的綁定的語法我就不贅述了，還是參考官網(wǎng)吧，我這里大部分例子也是來自官網(wǎng)。

12. 數(shù)據(jù)綁定總結(jié)

vue提供了大量的綁定的語法和方法，非常方便我們進(jìn)行數(shù)據(jù)的綁定，尤其它是雙向的數(shù)據(jù)綁定，極大的減少了我們dom操作的麻煩程度?？赡苣阍絹碓较矚g它了吧...

Github地址：源碼下載

其他詳情請參考：http://aicoder.com/vue/preview/all.html