&emsp;&emsp;Vue對DOM元素的class和style兩個特性做了專門的增強，即對CSS類和內聯樣式做了一層封裝，通過v-bind指令來處理它們，而接收的表達式既可以是簡單的字符串、對象或數組，也可以是復雜的計算屬性。不僅如此，Vue還為表單設計了一些語法糖，讓表單處理變得尤為簡單。 ## 一、CSS類 &emsp;&emsp;v-bind指令與class參數配合，就能處理CSS類，并且能接收多種類型的值。 **1）對象** &emsp;&emsp;v-bind:class可以接收一個對象，對象的屬性名就是CSS類名，只有當其值是真值時，才能添加到DOM元素上，否則會被忽略。下面的\<p>元素會接收數據對象中的classList，它包含兩個屬性warning和cur，其中cur屬性保存了一個假值。 ~~~html <p v-bind:class="classList">strick</p> <script> var vm = new Vue({　 data: {　　 classList: { warning: true, cur: "" }　 } }); </script> ~~~ &emsp;&emsp;渲染出的\<p>元素如下所示，不包含cur類。 ~~~html <p class="warning">strick</p> ~~~ &emsp;&emsp;此外，v-bind:class可簡寫成:class，并且能與普通的class特性共存，如下所示。 ~~~html <p :class="classList" class="size">strick</p> ~~~ **2）數組** &emsp;&emsp;當v-bind:class接收一個數組時，其元素既可以是CSS類名，也可以是對象，格式與之前相同，如下所示。 ~~~html <p :class="[classList, cur]">strick</p> <script> var vm = new Vue({　 data: {　　 classList: { warning: true }, cur: "cur"　 } }); </script> ~~~ ## 二、內聯樣式 &emsp;&emsp;v-bind指令與style參數配合，就能避免通過字符串拼接的方式來處理內聯樣式，并且也能接收多種類型的值。 **1）對象** &emsp;&emsp;v-bind:style可以接收一個對象，對象的屬性名有兩種命名方式：駝峰式和連字符分隔式，第二種就是層疊樣式表中的CSS屬性的命名方式。下面的\<p>元素會接收數據對象中的cssObj，其屬性采用了兩種命名方式。 ~~~html <p :style="cssObj">strick</p> <script> var vm = new Vue({　 data: {　　 cssObj: { "fontSize": "30px", "line-height": 2 }　 } }); </script> ~~~ &emsp;&emsp;渲染出的\<p>元素如下所示。 ~~~html <p style="font-size: 30px; line-height: 2;">strick</p> ~~~ &emsp;&emsp;Vue允許為屬性賦一個包含多個值的數組（即多重值），可讓瀏覽器選擇支持的屬性，例如定義不同階段的伸縮盒樣式，如下所示。 ~~~html <p :style="{display: ['-webkit-box', '-ms-flexbox', 'flex']}">strick</p> ~~~ **2）數組** &emsp;&emsp;當v-bind:style接收一個數組時，其元素就是樣式對象，并且如果出現同名的CSS屬性，那么后面的會覆蓋前面的。例如下面的cssObj1和cssObj2兩個對象都包含line-height屬性，而最終渲染出的值為1.5。 ~~~html <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）瀏覽器前綴** &emsp;&emsp;Vue會自動偵測瀏覽器樣式的兼容性，并根據需要為CSS屬性（例如border-radius、transform等）添加相應的瀏覽器前綴。 &emsp;&emsp;下面的代碼摘自Vue.js，其中camelize()函數可將連字符分隔式的字符串轉換成駝峰式的字符串；vendorNames變量記錄了三種瀏覽器前綴；normalize()函數會判斷傳入的屬性是否存在于\<div>元素的style屬性中，如果不存在，就為其添加瀏覽器前綴，而之所以單獨處理filter屬性是因為Chrome的一個bug，雖然Chrome只支持-webkit-filter屬性，但是style屬性中保存的卻是無前綴的filter。 ~~~js 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; } } }); ~~~ ## 三、表單 &emsp;&emsp;Vue提供了v-model指令，可在表單控件上實現雙向數據綁定，即修改控件的值，也會自動更新Vue實例中所對應的數據對象的屬性，反之亦然。 **1）v-model** &emsp;&emsp;下面用一個示例來演示v-model指令的用法，文本框的初始值是“strick”，當修改\<input>元素中的值時，\<p>元素的文本也會隨之更新。 ~~~html <input type="text" v-model="name"/> <p>{{name}}</p> <script> var vm = new Vue({　 data: {　　 name: "strick"　 } }); </script> ~~~ &emsp;&emsp;而如果在控制臺執行下面這條賦值語句，那么就會更新\<input>元素中的值，其實這就是Vue的雙向數據綁定所起的作用。 ~~~js vm.name = "freedom"; ~~~ &emsp;&emsp;在使用v-model指令時需要注意，表單控件的初始值得聲明在數據對象的屬性中，而不是value、checked或selected這些特性中。還是以之前的文本框為例，添加了一個value特性，如下所示，渲染出的控件值將是“strick”，而不是“init”。 ~~~html <input type="text" v-model="name" value="init"/> ~~~ &emsp;&emsp;v-model本質上是個語法糖，它在內部會監聽表單控件相關特性的變化，并觸發相應的事件，其對應關系如表4所示。 :-:  表4 v-model指令內部的對應關系 **2）表單控件** &emsp;&emsp;將v-model指令作用于表單控件時，其初始值常用的類型會有所不同，如下所示。 ~~~js var vm = new Vue({ data: { name: "", //文本框（單行和多行） checked: true, //一個復選框 names: [], //多個復選框 color: "", //單選框 selected: "", //選擇框（單選） selecteds: [] //選擇框（多選） } }); ~~~ &emsp;&emsp;當只使用一個復選框時，v-model指令可綁定一個布爾值；而當使用多個復選框時，v-model指令適合綁定數組，如下所示。 ~~~html <input type="checkbox" v-model="checked" /> <input type="checkbox" value="strick" v-model="names"/> <input type="checkbox" value="freedom" v-model="names"/> ~~~ &emsp;&emsp;單選框與復選框不同，由于它只能選中一個值，因此不適合綁定數組，如下所示。 ~~~html <input type="radio" value="red" v-model="color"/> <input type="radio" value="black" v-model="color"/> ~~~ &emsp;&emsp;選擇框的multiple特性能控制其是否多選，而這也會決定是否需要綁定數組，如下所示。 ~~~html <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）值綁定** &emsp;&emsp;單選框、復選框和選擇框的值原先只能是字符串或布爾值，而通過v-bind指令就能讓它們綁定任意類型的值，如下所示，為兩個單選框的value特性綁定了一個對象。當選中其中一個按鈕時，color屬性的值就會更新成綁定的對象。 ~~~html <input type="radio" v-model="color" :value="{digit: 1}" /> <input type="radio" v-model="color" :value="{digit: 2}" /> ~~~ &emsp;&emsp;復選框包含兩個特殊的特性：true-value和false-value（如下代碼所示），當將其選中時，toggle屬性會更新為yes屬性的值，否則更新為no屬性的值。 ~~~html <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）修飾符** &emsp;&emsp;Vue為v-model指令提供了3個修飾符，如下所列，每個修飾符后面都給出了相應的示例。 &emsp;&emsp;（1）.lazy修飾符能將同步輸入值的事件從input替換成change，以下面的文本框為例，只有當修改其值并失去焦點時，才會更新數據對象的name屬性。 ~~~html <input type="text" v-model.lazy="name" /> ~~~ &emsp;&emsp;（2）.number修飾符能讓輸入值自動轉換成數字，常與number類型的文本框配合使用。 ~~~html <input type="number" v-model.number="age" /> ~~~ &emsp;&emsp;（3）.trim修飾符能過濾輸入值的首尾空格。 ~~~html <input type="text" v-model.trim="school" /> ~~~ ***** > 原文出處： [博客園-Vue躬行記](https://www.cnblogs.com/strick/category/1512864.html) [知乎專欄-Vue躬行記](https://zhuanlan.zhihu.com/pwvue) 已建立一個微信前端交流群，如要進群，請先加微信號freedom20180706或掃描下面的二維碼，請求中需注明“看云加群”，在通過請求后就會把你拉進來。還搜集整理了一套[面試資料](https://github.com/pwstrick/daily)，歡迎瀏覽。  推薦一款前端監控腳本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不僅能監控前端的錯誤、通信、打印等行為，還能計算各類性能參數，包括 FMP、LCP、FP 等。