底層實現上， Vue將模板編譯成虛擬DOM渲染函數。結合響應系統，Vue能智能計算出最少需要重新渲染多少組件，并把DOM操作次數減到最少。 ### 插值 #### 文本 Mustache是一個JavaScript的模板引擎。 [http://mustache.github.io/mustache.5.html](http://mustache.github.io/mustache.5.html) {{}}， 雙大括號的文本插值就是Mustache語法。 ``` <span>Message: {{ msg }}</span> ``` v-once 指令用來設定一次性插值，當數據改變時，插值處的內容不會更新。 ``` <span v-once>這個將不會改變: {{ msg }}</span> ``` #### 原始HTML v-html 指令 雙大括號將數據解釋為普通文本，而不是HTML代碼。如果要輸出真正的HTML，使用v-html 指令 ``` <p>Using mustaches: {{ rawHtml }}</p> <p>Using v-html directive: <span v-html="rawHtml"></span></p> ``` 動態渲染任意的HTML會容易導致XSS攻擊。 #### HTML屬性綁定，使用v-bind 大括號的Mustache不能作用在HTML元素的屬性上， 所以要使用v-bind指令。 ``` <div v-bind:id="dynamicId"></div> ``` 布爾類型的屬性： ``` <button v-bind:disabled="isButtonDisabled">Button</button> ``` 如果 isButtonDisabled 的值是 null、undefined 或 false，則 disabled attribute 甚至不會被包含在渲染出來的 <button> 元素中。 #### JavaScript表達式 Vue支持綁定種使用JS的表達式，比如加、條件運算符等： ``` {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id"></div> ``` 限制： 只能綁定單個表達式，下面的無效： ``` <!-- 這是語句，不是表達式 --> {{ var a = 1 }} <!-- 流控制也不會生效，請使用三元表達式 --> {{ if (ok) { return message } }} ``` 注意： 不應該在模板表達式中試圖訪問用戶定義的全局變量。 ### 指令（Directives） 指令式帶有v-前綴的特殊屬性，預期值式單個JS表達式（v-for例外）。 #### 參數 一些指令能夠接收一個參數， 在指令之后以冒號表示， 比如： v-bind指令用于響應式更新HTML的屬性。 ``` <a v-bind:href="url">...</a> ``` 這里的href是參數，v-bind指令將元素的href屬性與表達式url的值綁定。 v-on指令用于監聽DOM事件， 參數既是監聽的事件名。 #### 動態參數 從2.6.0 開始，可以用方括號括起來的JavaScript表達式作為一個指令的參數。 ``` <a v-bind:[attributeName]="url"> ... </a> ``` 這里的attributeName會被作為一個JavaScript表達式進行動態求值，求得的值作為最終參數使用。比如attributeName的值為href, 則等價于v-bind:href。 異常狀況下，動態參數的值為null。 因為某些字符，比如空格和引號，在HTML屬性名中式無效的，所以動態參數表達式有一些語法約束。 ``` <!-- 這會觸發一個編譯警告 --> <a v-bind:['foo' + bar]="value"> ... </a> ``` 在 DOM 中使用模板時 (直接在一個 HTML 文件里撰寫模板)，還需要避免使用大寫字符來命名鍵名，因為瀏覽器會把 attribute 名全部強制轉為小寫： ``` <!-- 在 DOM 中使用模板時這段代碼會被轉換為 `v-bind:[someattr]`。 除非在實例中有一個名為“someattr”的 property，否則代碼不會工作。 --> <a v-bind:[someAttr]="value"> ... </a> ``` #### 修飾符(modifier) 修飾符是以半角句號 . 指明的特殊后綴,用于指出一個指令應該以特殊方式綁定。例如：`.prevent`修飾符告訴`v-on`指令對于觸發的事件調用`event.preventDefault()`： ``` <form v-on:submit.prevent="onSubmit">...</form> ``` ### 縮寫 v- 是用來識別Vue特定的前綴，如果高頻使用，稍顯繁瑣。如果在SPA應用中，只有使用Vue框架時，v-前綴就更顯得累贅。因此Vue為v-bind和v-on提供了特定的簡寫。 #### v-bind簡寫 ``` <!-- 完整語法 --> <a v-bind:href="url">...</a> <!-- 縮寫 --> <a :href="url">...</a> <!-- 動態參數的縮寫 (2.6.0+) --> <a :[key]="url"> ... </a> ``` #### v-on 縮寫 ``` <!-- 完整語法 --> <a v-on:click="doSomething">...</a> <!-- 縮寫 --> <a @click="doSomething">...</a> <!-- 動態參數的縮寫 (2.6.0+) --> <a @[event]="doSomething"> ... </a> ```