我們學過的vue內置指令：
v-bind：單向綁定解析表達式，可簡寫為：:xxx
v-model：雙向數據綁定
v-for：遍歷數組/對象/字符串
v-on：綁定事件監聽，可簡寫為@
v-if：條件渲染(動態控制節點是否存在)
v-else：條件渲染(動態控制節點是否存在)
v-show：條件渲染(動態控制節點是否展示)
其他指令：
v-text指令：
1、作用:向其所在的節點中渲染文本內容。
2、與插值語法的區別：v-text會替換掉節點中的內容，{{xx}}則不會。
v-html指令：
1、作用：向指定節點中渲染包含html結構的內容。
2、與插值語法的區別：
(1).v-html會替換掉節點中所有的內容，{{xx}}則不會。
(2).v-html可以識別html結構。
3、嚴重注意：v-html有安全性問題！！
(1).在網站上動態渲染任意HTML是非常危險的，容易導致XSS攻擊。
(2).一定要在可信的內容上使用v-html，永遠不要用在用戶提交的內容上。
v-cloak指令(沒有值)：
1、本質是一個特殊屬性，Vue實例創建完畢并接管容器后，會刪掉v-cloak屬性。
2、使用css配合v-cloak可以解決網速慢時頁面展示出{{xxx}}的問題。用法：這個指令保持在元素上直到關聯實例結束編譯。和 CSS 規則如 [v-cloak] { display: none } 一起用時，這個指令可以隱藏未編譯的 Mustache 標簽直到實例準備完畢。(可以解決當網速過慢時，不讓未經解析的模板跑到頁面上)
[v-cloak] {display: none;
}<div v-cloak>{{ message }}
</div>v-once指令：
1.v-once所在節點在初次動態渲染后，就視為靜態內容了。
2.以后數據的改變不會引起v-once所在結構的更新。
v-pre指令：
1.跳過其所在節點的編譯過程。
2.可利用它跳過那些：沒有使用指令語法、和沒有使用插值語法的節點，這樣會加快編譯。簡單解釋：有該指令(v-pre)，vue會不去解析它。
示例：
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><script type="text/javascript" src="../js/vue.js"></script><title>Vue內置指令</title>
</head><body><div id="root"><!-- 差值語法更靈活，能和文本無縫拼接。 --><div>你好，{{name}}</div><!-- v-text會替換掉作用域內的內容(div) ，等同于：<div>{{name}}</div> --><div v-text="name">你好，</div><!-- v-text不會去解析標簽，所有內容都當中文本處理 --><div v-text="str"></div><!-- v-html可以識別html結構,解析標簽。 --><div v-html="str"></div><!-- v-once只解析一次，后續數據改變也不再更新 --><h3 v-once>初始化的n值是：{{n}}</h3><h3>當前的n值是：{{n}}</h3><button @click="n++">點我n+1</button><!-- 跳過以下標簽的編譯，vue將不去解析，加快vue編譯進程 --><h3 v-pre>李四真帥!</h3><h3 v-pre>李四真帥!</h3><h3 v-pre>李四真帥!</h3></div><script>new Vue({el: '#root',data:{name:'張三',str:'<h3>張三真帥!</h3>',n:10}})</script>
</body></html>
)
