Vue.js 使用了基於 HTML 的模板語法，允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規范的瀏覽器和 HTML 解析器解析。
在底層的實現上，Vue 將模板編譯成虛擬 DOM 渲染函數。結合響應系統，在應用狀態改變時，Vue 能夠智能地計算出重新渲染組件的最小代價並應用到 DOM 操作上。
如果你熟悉虛擬 DOM 並且偏愛 JavaScript 的原始力量，你也可以不用模板，直接寫渲染 (render) 函數，使用可選的 JSX 語法。
一、插值
1、通過Vue向dom中插入文本
(1)、常用的數據綁定
數據綁定最常見的形式就是使用"Mustache"語法(雙大括號)的文本插值:
<span>Message: {{ msg }}</span>
Mustache標簽會被替代為數據對象中的msg屬性,無論何時,綁定的數據對象上的msg發生了改變,插值處的內容都會被更新.
(2)、只綁定一次的Vue指令
通過使用v-once指令,可以執行一次插值,當數據改變時,插值處的內容不會發生改變。注:這會影響該節點上所有的數據綁定.代碼如下:
<body> <div id="currentPage"> <p v-once>這個將不會改變:{{msg}}</p> </div> </body> <script type="text/javascript"> var page=new Vue({ el:"#currentPage", data:{ msg:"只綁定一次,就算模型發生改變,dom中的數據也不會更新" } }); </script>
2、通過Vue向dom中插入原始html代碼
Vue會將雙大括號中的數據渲染未純文本,而非html代碼,為了能輸出html,Vue提供了v-html指令來輸出html代碼,代碼如下:
<div v-html="rawHtml"></div>
這個div的內容將會被替換成屬性值rawHtml,注:當屬性值被渲染成html的時候,會忽略屬性值中其他的數據綁定,Vue 不是基於字符串的模板引擎.
注:你的站點上動態渲染的任意 HTML 可能會非常危險，因為它很容易導致 XSS 攻擊。請只對可信內容使用 HTML 插值，絕不要對用戶提供的內容使用插值。
3、特性
Mustache語法不能作用在Html特性上,所以綁定Html特性必須使用Vue提供的v-bind指令,具體請參考Vue.js系列之一初識Vue
在布爾特性的情況下，它們的存在即暗示為 true，v-bind 工作起來略有不同，代碼如下:
<div id="currentPage"> <button v-bind:disabled="isButtonDisabled">Button</button> </div> </body> <script type="text/javascript"> var page=new Vue({ el:"#currentPage", data:{ isButtonDisabled:null } }); </script>
只有isButtonDisabled 的屬性值是true的時候,才會被渲染到html代碼中,當isButtonDisabled 的屬性值是null、undefined、false,將不會被渲染到html代碼中.
4、在Mustache表達式(模版表達式)中使用JavaScript 表達式
前面的內容介紹了簡單的數據屬性綁定到dom上。但實際上,對於所有的數據綁定,Vue都提供了完全的Js支持.代碼如下:
<body> <div id="currentPage"> <p>{{num+1}}</p> <p>{{ok?'Yes':'No'}}</p> <p>{{ message.split('').reverse().join('') }}</p> </div> </body> <script type="text/javascript"> var currPage=new Vue({ el:"#currentPage", data:{ num:111, ok:true, message:"Hello Vue.js" } }); </script>
注:這些表達式會在所屬Vue實例的數據作用域下作為Js表達式被解析,唯一美中不足的是每個綁定只能包含單個表達式,所以下面的例子不會生效:
<!-- 這是語句，不是表達式 --> {{ var a = 1 }} <!-- 流控制也不會生效，請使用三元表達式 --> {{ if (ok) { return message } }}
注:不能在模版表達式中訪問用戶定義的全局變量。只能訪問全局變量的一個白名單，如 Math 和Date
5、Vue指令
指令是帶有v-前綴的特殊屬性,指令屬性的預期值是單個Js表達式(v-for是例外情況),指令的作用是當表達式的值發生改變時,將其產生的連帶影響，響應式地作用於 DOM,代碼如下:
<body> <div id="currentPage"> <p v-if="seen">顯示</p> </div> </body> <script type="text/javascript"> var currPage=new Vue({ el:"#currentPage", data:{ seen:true } }); </script>
這里，v-if 指令將根據表達式 seen 的值的真假來插入/移除 <p> 元素。
6、指令參數
一些指令能夠接受一個"參數",在指令之后以冒號表示。例如,v-bind指令可以用於響應式的更新html屬性,代碼如下:
<body> <div id="currentPage"> <a v-bind:href="url">baidu</a> </div> </body> <script type="text/javascript"> var currPage=new Vue({ el:"#currentPage", data:{ url:"https://www.baidu.com" } }); </script>
在這里href是參數,告知v-bind指令將該元素的href屬性與url的值綁定.另一個例子是v-on指令,它用於監聽dom事件,這里不多做介紹.
7、Vue 修飾符
8、關於Vue指令的縮寫
<!-- 完整語法 --> <a v-on:click="doSomething">...</a> <!-- 縮寫 --> <a @click="doSomething">...</a> <!-- 完整語法 --> <a v-bind:href="url">...</a> <!-- 縮寫 --> <a :href="url">...</a> <!--完整語法 --> <input v-on:keyup.enter="submit"> <!-- 縮寫語法 --> <input @keyup.enter="submit">