Vue的資料繫結

最近在閱讀《Vue.js小書》，寫一篇讀書筆記總結一下吧！

資料繫結的語法

Mustache語法

由兩對大括號{{*}}將值或者表示式括起來就是Mustache語法。因為{{}}像一對小鬍子，所以有這個名稱。這個語法最早起源於前端模版引擎Mustache.js。

Vue.js使用Mustache寫法來完成文字插值，html標籤屬性的繫結。

<span>Hello {{name}}</span>

new Vue( {
  data : {
    name : 'Vue'
  }
} );

Vue會對{{}}中的表示式進行求值，然後將結果插入到對應的位置。上面這個例子中，name的值是Vue，所以最後的渲染結果是Hello Vue。

這裡需要注意的是，data是一個物件，如果某個元件的data是一個物件，而在某處多次引用了這個元件的例項，當這個元件的data發生變化時，所有該元件例項的data都會發生相同的變化，為了解決這個問題，需要將data改成一個返回物件的函式，如下所示。

new Vue( {
  data : function () {
    return {
      name : 'Vue'
    }
  }
} );

v-bind

Vue還提供另外一種繫結資料的方法：使用v-bind指令進行資料繫結。

<img v-bind:src="imageUrl">

new Vue( {
  data : function () {
    return {
      imageUrl : ''
    }
  }
} );

指令v-bind可以在後面帶一個引數，用冒號隔開，在上面的例子中，src就是引數，imageUrl就是要繫結的表示式，上面的程式碼把src和imageUrl繫結起來。

計算屬性

在實際應用中，我們在UI上展示的資料可能與我們從伺服器獲取的資料不一樣，需要經過處理才能使用。比如從伺服器獲取當前時間的時間戳，然後展示給使用者今天星期幾。

<div>{{week}}</div>

var weekList;
weekList = [ '星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六' ];
new Vue( {
  data : function () {
    return {
      timestamp : timestamp
    };
  },
  computed : {
    week : function () {
      return weekList[ new Date( this.timestamp ).getDay() ];
    }
  }
} );

這樣一旦timestamp發生變化，Vue會重新計算week並更新到檢視。另外computed還支援getter-setter寫法。

 new Vue( {
    data : function () {
      return {
        cents : 100
      };
    },
    computed : function () {
      price : {
        set : function ( newValue ) {
          this.cents = newValue * 100;
        },

        get : function () {
          retrun ( this.cents / 100 ).toFixed( 2 );
        }
      }
    }
  } );

表單控制元件

可以用v-model指令將表單控制元件的輸入和model層繫結起來（也就是Vue的data屬性）。

<input v-model="message">
<div>{{message}}</div>

new Vue( {
  data : function () {
    return {
      message : ''
    };
  }
} );

class和style屬性的資料繫結

直接用v-bind可以把class和style與data繫結起來，但是這樣過於繁瑣，所以Vue對這兩個屬性做了增強處理，方便開發者使用。

class繫結

與class繫結的值的資料型別有兩種，物件和陣列。

值是物件的時候，class和v-bind:class可以同時存在。

<div class="base" v-bind:class="{'active':active,'unactive':!active}"></div>

new Vue( {
  data : function () {
    return {
      active : true
    };
  }
} );

最終class的值是base active。

值是陣列的時候，data中必須有和陣列元素值相對應的屬性。

<div class="[base, other]"></div>

new Vue( {
  data : function () {
    return {
      base  : 'base1, base2',
      other : 'other1, other2'
    };
  }
} );

style繫結

和class類似，style也支援物件和陣列兩種資料型別。

使用物件時，物件的屬性名對應css的屬性名，屬性值對應css的屬性值，若屬性名中有-，則改寫成駝峰形式。例如：background-color --> backgroundColor。

<div v-bind:style="{fontSize:12px}"></div>

這樣寫可能不太直觀，可以把這個物件放到data中。

<div v-bind:style="styleObject"></div>

new Vue( {
  data : function () {
    return {
      styleObject : {
        fontSize : '12px'
      }
    };
  }
} );

使用陣列時，陣列中的每個元素都是一個style物件。

<div v-bind="[objectA, objectB]"></div>

new Vue( {
  data : function () {
    return {
      objectA : {
        fontSize : '12px'
      },
      objectB : {
        color : '#ff0000'
      }
    };
  }
} );

另外在使用css3的一些新特性時，我們可以不加瀏覽器字首，vue會自動檢測瀏覽器的支援情況並新增相應的字首。