vue中常用的指令

1：v-text
用法：
<p v-text="message"></p>
功能類似於 <p>{{message}}</p>。區別是：當我們網速很慢或者javascript出錯時，頁面中會顯示{{xxx}}。Vue指令v-text,就是解決這個問題的。
2：v-html
用法：
<span v-html="messageHtml"></span>
如果想要插入html標籤，用v-text是輸不出來的。這時候我們就需要用v-html標籤了。雙大括號會將資料解釋為純文字，而非HTML。為了輸出真正的HTML，你就需要使用v-html 指令。
需要注意的是：在生產環境中動態渲染HTML是非常危險的，因為容易導致XSS攻擊。所以只能在可信的內容上使用v-html，永遠不要在使用者提交和可操作的網頁上使用。
3：v-show 和 v-if
用法：
<p v-show="isTrue"> </p>
<p v-if="isTrue"> </p>
作用都是判斷html中的DOM是否載入或者顯示。
v-if 和 v-show 的區別：
v-if： 判斷是否載入，可以減輕伺服器的壓力，在需要時載入。
v-show：控制的是css的display屬性，可以使客戶端操作更加流暢。
4：v-for
用法：
<div v-for="item in items">
{{ item.text }}
</div>
v-for就是解決多次渲染的陣列，如：陣列，物件等。專案中需要哪個html標籤渲染，v-for指令就放在哪個標籤上。
5：v-on
用法：
<div v-on:click="function()"> </div>
v-on 就是事件監聽器，監聽DOM事件觸發一些js程式碼。
v-on的縮寫： @ ，如： <div @click="function()"> </div>
還有一些修飾符:
.stop - 呼叫 event.stopPropagation()。
.prevent - 呼叫 event.preventDefault()。
.capture - 新增事件偵聽器時使用 capture 模式。
.self - 只當事件是從偵聽器繫結的元素本身觸發時才觸發回撥。
.{keyCode | keyAlias} - 只當事件是從特定鍵觸發時才觸發回撥。
.native - 監聽元件根元素的原生事件。
.once - 只觸發一次回撥。
.left - (2.2.0) 只當點選滑鼠左鍵時觸發。
.right - (2.2.0) 只當點選滑鼠右鍵時觸發。
.middle - (2.2.0) 只當點選滑鼠中鍵時觸發。
.passive - (2.3.0) 以 { passive: true } 模式新增偵聽器
6：v-bind
用法：
給img標籤繫結src：
<img v-bind:src="imageSrc">
v-bind 的縮寫語法：
<img :src="imageSrc">
作用：動態地繫結一個或多個特性，或一個元件 prop 到表示式，在繫結 class 或 style 特性時，支援其它型別的值，如陣列或物件。
注意此時 class 和 style 繫結不支援陣列和物件
7：v-model
用法：
<input type="text" v-model="modelText">
v-model 實現資料雙向繫結，一般繫結在表單元素上，在表單控制元件或者元件上建立雙向繫結。
8：v-pre
用法：
<span v-pre>{{ message }}</span>
在模板中跳過vue的編譯，直接輸出原始值。如：以上標籤輸出的結果是 {{message}}
9：v-cloak
用法：
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
在vue渲染完指定的整個DOM後才進行顯示。它必須和CSS樣式一起使用，
10：v-once
用法：
<span v-once>This will never change: {{msg}}</span>
<div v-once>
<h1>comment</h1>
<p>{{msg}}</p>
</div>
只渲染元素和元件一次。隨後的重新渲染，元素/元件及其所有的子節點將被視為靜態內容並跳過。這可以用於優化更新效能。