Vue躬行記（3）——樣式和表單

　　Vue對DOM元素的class和style兩個特性作了專門的加強，即對CSS類和內聯樣式作了一層封裝，經過v-bind指令來處理它們，而接收的表達式既能夠是簡單的字符串、對象或數組，也能夠是複雜的計算屬性。不只如此，Vue還爲表單設計了一些語法糖，讓表單處理變得尤其簡單。

1、CSS類

　　v-bind指令與class參數配合，就能處理CSS類，而且能接收多種類型的值。

1）對象

　　v-bind:class能夠接收一個對象，對象的屬性名就是CSS類名，只有當其值是真值時，才能添加到DOM元素上，不然會被忽略。下面的<p>元素會接收數據對象中的classList，它包含兩個屬性warning和cur，其中cur屬性保存了一個假值。

<p v-bind:class="classList">strick</p>
<script>
  var vm = new Vue({　
    data: {　　
      classList: {
        warning: true,
        cur: ""
      }　
    }
  });
</script>

　　渲染出的<p>元素以下所示，不包含cur類。

<p class="warning">strick</p>

　　此外，v-bind:class可簡寫成:class，而且能與普通的class特性共存，以下所示。

<p :class="classList" class="size">strick</p>

2）數組

　　當v-bind:class接收一個數組時，其元素既能夠是CSS類名，也能夠是對象，格式與以前相同，以下所示。

<p :class="[classList, cur]">strick</p>
<script>
  var vm = new Vue({　
    data: {　　
      classList: {
        warning: true
      },
      cur: "cur"　
    }
  });
</script>

2、內聯樣式

　　v-bind指令與style參數配合，就能避免經過字符串拼接的方式來處理內聯樣式，而且也能接收多種類型的值。

1）對象

　　v-bind:style能夠接收一個對象，對象的屬性名有兩種命名方式：駝峯式和連字符分隔式，第二種就是層疊樣式表中的CSS屬性的命名方式。下面的<p>元素會接收數據對象中的cssObj，其屬性採用了兩種命名方式。

<p :style="cssObj">strick</p>
<script>
  var vm = new Vue({　
    data: {　　
      cssObj: {
        "fontSize": "30px",
        "line-height": 2
      }　
    }
  });
</script>

　　渲染出的<p>元素以下所示。

<p style="font-size: 30px; line-height: 2;">strick</p>

　　Vue容許爲屬性賦一個包含多個值的數組（即多重值），可以讓瀏覽器選擇支持的屬性，例如定義不一樣階段的伸縮盒樣式，以下所示。

<p :style="{display: ['-webkit-box', '-ms-flexbox', 'flex']}">strick</p>

2）數組

　　當v-bind:style接收一個數組時，其元素就是樣式對象，而且若是出現同名的CSS屬性，那麼後面的會覆蓋前面的。例以下面的cssObj1和cssObj2兩個對象都包含line-height屬性，而最終渲染出的值爲1.5。

<p :style="[cssObj1, cssObj2]">strick</p>
<script>
  var vm = new Vue({　
    data: {　　
      cssObj1: {
        "fontSize": "30px",
        "line-height": 2
      },
      cssObj2: {
        "line-height": 1.5
      }　
    }
  });
</script>

3）瀏覽器前綴

　　Vue會自動偵測瀏覽器樣式的兼容性，並根據須要爲CSS屬性（例如border-radius、transform等）添加相應的瀏覽器前綴。

 　　下面的代碼摘自Vue.js，其中camelize()函數可將連字符分隔式的字符串轉換成駝峯式的字符串；vendorNames變量記錄了三種瀏覽器前綴；normalize()函數會判斷傳入的屬性是否存在於<div>元素的style屬性中，若是不存在，就爲其添加瀏覽器前綴，而之因此單獨處理filter屬性是由於Chrome的一個bug，雖然Chrome只支持-webkit-filter屬性，可是style屬性中保存的倒是無前綴的filter。

var camelizeRE = /-(\w)/g;
var camelize = cached(function(str) {
  return str.replace(camelizeRE, function(_, c) {
    return c ? c.toUpperCase() : "";
  });
});

var vendorNames = ["Webkit", "Moz", "ms"];
var emptyStyle;
var normalize = cached(function(prop) {
  emptyStyle = emptyStyle || document.createElement("div").style;
  prop = camelize(prop);
  if (prop !== "filter" && prop in emptyStyle) {
    return prop;
  }
  var capName = prop.charAt(0).toUpperCase() + prop.slice(1);
  for (var i = 0; i < vendorNames.length; i++) {
    var name = vendorNames[i] + capName;
    if (name in emptyStyle) {
      return name;
    }
  }
});

3、表單

　　Vue提供了v-model指令，可在表單控件上實現雙向數據綁定，即修改控件的值，也會自動更新Vue實例中所對應的數據對象的屬性，反之亦然。

1）v-model

　　下面用一個示例來演示v-model指令的用法，文本框的初始值是「strick」，當修改<input>元素中的值時，<p>元素的文本也會隨之更新。

<input type="text" v-model="name"/>
<p>{{name}}</p>
<script>
  var vm = new Vue({　
    data: {　　
      name: "strick"　
    }
  });
</script>

　　而若是在控制檯執行下面這條賦值語句，那麼就會更新<input>元素中的值，其實這就是Vue的雙向數據綁定所起的做用。

vm.name = "freedom";

　　在使用v-model指令時須要注意，表單控件的初始值得聲明在數據對象的屬性中，而不是value、checked或selected這些特性中。仍是以以前的文本框爲例，添加了一個value特性，以下所示，渲染出的控件值將是「strick」，而不是「init」。

<input type="text" v-model="name" value="init"/>

　　v-model本質上是個語法糖，它在內部會監聽表單控件相關特性的變化，並觸發相應的事件，其對應關係如表4所示。

表4  v-model指令內部的對應關係

表單控件	監聽特性	觸發事件
文本框（單行和多行）	value	input
單選框和複選框	checked	change
選擇框	<option>子元素中的value	change

2）表單控件

　　將v-model指令做用於表單控件時，其初始值經常使用的類型會有所不一樣，以下所示。

var vm = new Vue({
  data: {
    name: "",          //文本框（單行和多行）
    checked: true,     //一個複選框
    names: [],         //多個複選框
    color: "",         //單選框
    selected: "",      //選擇框（單選）
    selecteds: []      //選擇框（多選）
  }
});

　　當只使用一個複選框時，v-model指令可綁定一個布爾值；而當使用多個複選框時，v-model指令適合綁定數組，以下所示。

<input type="checkbox" v-model="checked" />

<input type="checkbox" value="strick" v-model="names"/>
<input type="checkbox" value="freedom" v-model="names"/>

　　單選框與複選框不一樣，因爲它只能選中一個值，所以不適合綁定數組，以下所示。

<input type="radio" value="red" v-model="color"/>
<input type="radio" value="black" v-model="color"/>

　　選擇框的multiple特性能控制其是否多選，而這也會決定是否須要綁定數組，以下所示。

<select v-model="selected">
  <option value="1">strick</option>
  <option value="2">freedom</option>
</select>
<select v-model="selecteds" multiple>
  <option value="1">strick</option>
  <option value="2">freedom</option>
</select>

3）值綁定

　　單選框、複選框和選擇框的值原先只能是字符串或布爾值，而經過v-bind指令就能讓它們綁定任意類型的值，以下所示，爲兩個單選框的value特性綁定了一個對象。當選中其中一個按鈕時，color屬性的值就會更新成綁定的對象。

<input type="radio" v-model="color" :value="{digit: 1}" />
<input type="radio" v-model="color" :value="{digit: 2}" />

　　複選框包含兩個特殊的特性：true-value和false-value（以下代碼所示），當將其選中時，toggle屬性會更新爲yes屬性的值，不然更新爲no屬性的值。

<input type="checkbox" v-model="toggle" :true-value="yes" :false-value="no" />
<script>
  var vm = new Vue({　
    data: {　　
      toggle: 1,
      yes: 1,
      no: 0
    }
  });
</script>

4）修飾符

　　Vue爲v-model指令提供了3個修飾符，以下所列，每一個修飾符後面都給出了相應的示例。

　　（1）.lazy修飾符能將同步輸入值的事件從input替換成change，如下面的文本框爲例，只有當修改其值並失去焦點時，纔會更新數據對象的name屬性。

<input type="text" v-model.lazy="name" />

　　（2）.number修飾符能讓輸入值自動轉換成數字，常與number類型的文本框配合使用。

<input type="number" v-model.number="age" />

　　（3）.trim修飾符能過濾輸入值的首尾空格。

<input type="text" v-model.trim="school" />