本章節會介紹一些Vue的簡易指令以協助在開發時像要達到的一些效果
會介紹的指令有：
用途：
向其所在的節點渲染文本內容
使用方式：
v-text : ‘value’ → {{value}}
其效果和插值語法相同
但差別於v-text會覆蓋標籤內容
所以同時使用v-text和插值語法,呈現的是v-text的內容
常用標籤：
span, label, p, h1...
用途：
向其所在的節點渲染 html結構的內容
使用方式：
和v-text使用方式一樣
使用上比v-text更有彈性
能配合標籤做到許多效果
並且會呈現html的結構（只讀取html其他標籤, 特殊標籤沒辦法編譯）
注意：
在使用v-html的時候會有安全疑慮的問題
容易受到XSS的攻擊
舉例來說若今天前端畫面的內容被有意人士竄改, 且紀錄了資料內容
那只要針對文本內容添加a標籤並賦予連結
哪會造成使用者造不知情的情況下進入危險的網站,或是因此資料被盜取
雖然在後端程式中,可以用Filter做有效XSS的防範
但盡可能有效避免還是最好的
用途：
有些設計中,會需要js的延遲載入
用意是加快頁面讀取的速度再引用寫好的js
但以Vue.js為例
若今天將Vue.js延遲載入
那Vue未建立虛擬DOM的情況下
初始數據的結構就會一併秀出來
v-cloak可以防止這類事情的發生
使用方式：
v-cloak在使用上,會需要搭配寫上css做配合
目的是為了將受延遲影響的資料
用css樣式的包裝現做呈現, 隱藏
簡單的範例：
<style>
[v-cloak]{
display : none;
}
<style>
<body>
<div id="root">
<h2 v-cloak>{{name}}</h2>
</div>
</body>
依照上面的寫法可以達到將為編譯的{{name}}隱藏起來
另外在js載入完後,Vue很貼心的會將v-cloak移除
所以載入完後頁面上是不會看到v-cloak指令
用途：
Vue綁定的數據在異動時都會重新編譯到頁面上
但在需要初始值的需求時
為此在配置一個data對象豈不是不好維護,並且容易造成data結構混亂
這時候就能使用v-once搭配使用
使用方式：
<h2 v-once>資料1 : {{name}}</h2>
<h2 >資料2 : {{name}}</h2>
使用v-once後,Vue在第一次編譯完後
會將其渲染結束就成為靜態資料
之後的數據更新,都不在異動該資料
而資料2一樣能夠接受vue的數據更新呈現的最新結果
用途：
在vue的編譯中, vue會遍歷所有的標籤尋找哪些是需要受vue做數據代理
但並未所有標籤都需要渲染數據
這些標籤就不用再受Vue的編譯
如果能讓Vue在遍歷時略過這些標籤
那整體效能能大幅提升不少
使用方式：
v-pre所指定的標籤將不受vue編譯
在編譯過程中v-pre將被跳過
使用上只要在標籤內添加v-pre即可
注意：
其並不代表一定要使用,只是使用上效能更好
另外使用v-pre不可搭配其他vue指令
下一章節會再提及Vue的相關指令-自定義指令
iThome鐵人賽
看影片追技術