Vue入門之數(shù)據(jù)綁定(小結(jié))

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

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

1. 什么是雙向綁定？

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

這樣以來，就徹底變革了之前Dom的開發(fā)方式，之前Dom驅(qū)動的開發(fā)方式尤其是以jQuery為主的開發(fā)時代，都是dom變化后，觸發(fā)js事件，然后在事件中通過js代碼取得標簽的變化，再跟后臺進行交互，然后根據(jù)后臺返回的結(jié)果再更新HTML標簽，異常的繁瑣。有了Vue這種雙向綁定，讓開發(fā)人員只需要關(guān)心json數(shù)據(jù)的變化即可，Vue自動映射到HTML上，而且HTML的變化也會映射回js對象上，開發(fā)方式直接變革成了前端由數(shù)據(jù)驅(qū)動的開發(fā)時代，遠遠拋棄了Dom開發(fā)主導的時代了。

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屬性：把當前Vue對象掛載到 div標簽上，#app是id選擇器
  data: {          // data: 是Vue對象中綁定的數(shù)據(jù)
   msg: 'Hello Vue!'  // message 自定義的數(shù)據(jù)
  }
 });
</script>

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

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

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

結(jié)果：

Hi - flydragon

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

<!DOCTYPE html> 
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue入門之數(shù)據(jù)綁定-表達式運算</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屬性：把當前Vue對象掛載到 div標簽上，#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 }}語法進行綁定html的標簽，而是用它特有的v-bind指令（就是一種寫法，先按照格式走，具體指令是什么可以后續(xù)再了解）。

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

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

參考如下代碼案例：

<!DOCTYPE html> 
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue入門之數(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">
等價于
<div v-bind:id="MenuContaineId">

6. 輸出純HTML

由于Vue對于輸出綁定的內(nèi)容做了提前encode，保障在綁定到頁面上顯示的時候不至于被xss攻擊。但某些場景下，我們確保后臺數(shù)據(jù)是安全的，那么我們就要在網(wǎng)頁中顯示原生的HTML標簽。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專門加強了class和style的屬性的綁定?？梢杂袕碗s的對象綁定、數(shù)組綁定樣式和類。

7.1. 綁定樣式對象

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

代碼：

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

解釋：當 isActive為 true時， div就會具有了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標簽樣式類及綁定樣式對象

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)寫對象，還是很不爽，也沒有智能提示，很容易寫錯。 Vue可以讓我們直接把綁定的class字符串指向data的一個對象，這樣就非常方便了，既可以有智能提示，又可以很復雜進行編輯，不用擔心煩人的""了。

<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ù)組，就是綁定樣式對象的延續(xù)，看官網(wǎng)的例子代碼吧。

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

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

當然還有很多其他很有趣的支持，就不贅述了。

例如:

<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 ，其實它是一個 JavaScript 對象。 CSS屬性名可以用駝峰式（camelCase）或短橫分隔命名（kebab-case）。

看個例子：

<!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>

自動添加前綴

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

8. 計算屬性

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

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

<!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ù)可以直接當成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,   // 這是一個日期對象的值：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)之前先進行過濾和篩選。官網(wǎng)上寫的不錯，我就不再贅述，下面是官網(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 表達式（從 2.1.0 開始支持）中使用，因為過濾器設(shè)計目的就是用于文本轉(zhuǎn)換。為了在其他指令中實現(xiàn)更復雜的數(shù)據(jù)變換，你應(yīng)該使用計算屬性。

過濾器函數(shù)總接受表達式的值作為第一個參數(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' 將傳給過濾器作為第二個參數(shù)， arg2 表達式的值將被求值然后傳給過濾器作為第三個參數(shù)。

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

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

在頁面中添加一個按鈕，動態(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ù)可以直接當成data里面的屬性用，非常方便，注意沒有括號！?。?->
    <td>生日</td><td>{{ getBirthday }}</td>
   </tr>
   <tr>
    <td>年齡</td><td>{{ age }}</td>
   </tr>   
   <tr>
    <td>地址</td><td>{{ address }}</td>
   </tr>
  </table>
 </div>

 <!-- 添加下面這行代碼，動態(tài)增加 年齡，頁面會有怎樣的變化呢？？ -->
 <button type="button" onclick="app.age+=1;" >加加</button>
 <script>
  var app = new Vue({     
   el: '#app',        
   data: {          
    birthday: 914228510514,   // 這是一個日期對象的值：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ù)進行綁定，那HTML怎樣向js進行反饋數(shù)據(jù)呢？ HTML中只有表達能接受用戶的輸入，最簡單的演示雙向綁定的就是文本框了。

Vue提供了一個新的指令：v-model進行雙向數(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)容的時候，p標簽中的內(nèi)容會跟著進行改變，哇是不是很神奇呢...

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

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

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

Github地址：源碼下載

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