Vue.js 使用了基於 HTML 的模版語法，允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規範的瀏覽器和 HTML 解析器解析。 在底層的實現上， Vue 將模板編譯成虛擬 DOM 渲染函數。結合響應系統，在應用狀態改 ...
Vue.js 使用了基於 HTML 的模版語法，允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規範的瀏覽器和 HTML 解析器解析。
在底層的實現上， Vue 將模板編譯成虛擬 DOM 渲染函數。結合響應系統，在應用狀態改變時， Vue 能夠智能地計算出重新渲染組件的最小代價並應用到 DOM 操作上。
1、插入純文本 “Mustache” 語法
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="vue.js"></script> 7 </head> 8 <body> 9 <div id="id"> 10 <span>{{message}}</span><!--綁定數據message對象上的數據改變時插值處的內容也會更新--> 11 <span v-once>{{message}}</span> 12 <!--通過使用 v-once 指令，你也能執行一次性地插值，當數據改變時，插值處的內容不會更新。但請留心這會影響到該節點上所有的數據綁定--> 13 </div> 14 </body> 15 <script> 16 var vm = new Vue({ 17 el: '#id', 18 data:{ 19 message:'插入的是純文本' 20 } 21 }) 22 </script> 23 </html>
Mustache 不能在 HTML 屬性中使用，應使用 v-bind 指令
<div v-bind:id="dynamicId"></div>
對boolean值同樣也有作用，如果判斷條件為false，該屬性會被移除
<button v-bind:disabled="someDynamicCondition">Button</button>
2、使用 v-html 指令插入html,數據綁定會被忽略
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="vue.js"></script> 7 </head> 8 <body> 9 <div id="id"> 10 <span v-html="message"></span> 11 </div> 12 </body> 13 <script> 14 var vm = new Vue({ 15 el: '#id', 16 data:{ 17 message:'插入的是html' 18 } 19 }) 20 </script> 21 </html>
3、對於所有數據綁定，Vue.js 都提供了完全的 JavaScript 表達式支持，每個綁定只能是單個表達式
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="vue.js"></script> 7 </head> 8 <body> 9 <div id="id"> 10 <p>{{message + "-----不信你試試"}}</p></br> 11 <p>{{message.split('').reverse().join('')}}</p></br> 12 <p>{{num + 12}}</p></br> 13 <p>{{ok ? 'ok是true':'ok是false'}}</p> 14 </div> 15 </body> 16 <script> 17 var vm = new Vue({ 18 el: '#id', 19 data:{ 20 message:'Vue.js 都提供了完全的 JavaScript 表達式支持', 21 num: 12, 22 ok: true 23 } 24 }) 25 </script> 26 </html>
列印結果：
4、部分指令後面還能跟一個參數，指令背後用冒號指明
<a v-bind:href="url"></a> //更新html屬性
<a v-on:click="doSomething"> //監聽事件
5、過濾器
過濾器只能在 mustache 綁定和 v-bind 表達式（從 2.1.0 開始支持）中使用，因為過濾器設計目的就是用於文本轉換。過濾器函數總接受表達式的值作為第一個參數。
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="vue.js"></script> 7 </head> 8 <body> 9 <div id="id"> 10 <p>{{message|capitalize}}</p></br> 11 <p>{{num|test1}}</p></br> 12 <p>{{num|test1|test2(10,20)}}</p></br><!--過濾器函數總接受表達式的值作為第一個參數--> 13 <!--對於過濾器test2來說，第一個參數是num,第二個參數是10，第三個參數是20--> 14 </div> 15 </body> 16 <script> 17 var vm = new Vue({ 18 el: '#id', 19 data:{ 20 message:'aaabbbccc', 21 num: 12, 22 ok: true 23 }, 24 filters:{ 25 test1:function(num){ 26 if(num == 0) return 0 27 return num = num * 100 28 }, 29 test2:function(num,arg1,arg2){ 30 if(num == arg1 ) return num 31 return arg2 32 }, 33 capitalize: function (value) { 34 if (!value) return '' 35 value = value.toString() 36 return value.charAt(0).toUpperCase() + value.slice(1) 37 } 38 } 39 }) 40 </script> 41 </html>
列印結果：
6、指令縮寫格式
<div> <!-- 完整語法 --> <a v-bind:href="url"></a> <!-- 縮寫 --> <a :href="url"></a> <!-- 完整語法 --> <a v-on:click="doSomething"></a> <!-- 縮寫 --> <a @click="doSomething"></a> </div>
