Vue躬行記（3）——樣式和表單
- 2019 年 10 月 21 日
- 筆記
Vue對DOM元素的class和style兩個特性做了專門的增強，即對CSS類和內聯樣式做了一層封裝，通過v-bind指令來處理它們，而接收的表達式既可以是簡單的字元串、對象或數組，也可以是複雜的計算屬性。不僅如此，Vue還為表單設計了一些語法糖，讓表單處理變得尤為簡單。
一、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>
二、內聯樣式
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; } } });
三、表單
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" />
