以下内容參考部落格
Vue指令大全
1， v-text
v-text主要用來更新textContent，可以等同于JS的text屬性, 但是沒有使用{{ }}靈活，v-text會覆寫原有的。
<span v-text="msg"></span>
// 等價于
<span>{{msg}}</span>
2， v-html
雙大括号的方式會将資料解釋為純文字，而非HTML。為了輸出真正的HTML，可以用v-html指令。它等同于JS的 innerHtml屬性 。
這個div的内容将會替換成屬性值rawHtml，直接作為HTML進行渲染。
3， v-pre
v-pre主要用來跳過這個元素和它的子元素編譯過程。可以用來 顯示原始的Mustache标簽。跳過大量沒有指令的節點加快編譯。
<div id="app">
<span v-pre>{{message}}</span> //這條語句不進行編譯,直接顯示{{message}}
<span>{{message}}</span>
</div>
4， v-cloak
鬥篷…這個指令是用來保持在元素上 直到關聯執行個體結束時進行編譯
<div id="app" v-cloak> {{message}} </div>
// 如果沒有加v-cloak，則會顯示{{message}}後再顯示message實際代表的資料，這樣的話，頁面會閃爍
5， v-once
v-once關聯的執行個體，隻會渲染一次。之後的重新渲染，執行個體極其所有的子節點将被視為靜态内容跳過，這可以用于優化更新性能
6, v-if
v-if可以實作條件渲染，Vue會根據表達式的值的真假條件來渲染元素。
7, v-else
v-else是搭配v-if使用的，它必須緊跟在v-if或者v-else-if後面，否則不起作用
<a v-if="ok">yes</a>
<a v-else>No</a>
8, v-else-if
v-else-if充當v-if的else-if塊，可以鍊式的使用多次。可以更加友善的實作switch語句。
<div v-if="type==='A'">
A
</div>
<div v-else-if="type==='B'">
B
</div>
<div v-else-if="type==='C'">
C
</div>
<div v-else>
Not A,B,C
</div>
9. v-show
也是用于根據條件展示元素。和v-if不同的是，如果v-if的值是false，則這個元素被銷毀，不在dom中。但是v-show的元素會始終被渲染并儲存在dom中，它隻是簡單的切換css的dispaly屬性。
v-if 有更高的切換開銷
v-show 有更高的初始渲染開銷。
如果要非常頻繁的切換，則使用v-show較好；如果在運作時條件不太可能改變，則v-if較好
10, v-for
用v-for指令根據周遊數組來進行渲染，在v-for中，擁有對父作用域屬性的完全通路權限。
####### v-for 周遊數組
<div v-for="(item,index) in items"></div> //使用 in， index表示目前項的索引
<div v-for="item of items"></div> // 使用 of
####### v-for 周遊對象
<div id="app">
<!--1, 在周遊對象的過程中，如果隻是擷取一個值，那麼擷取到的是value-->
<ul><li v-for="item in info" >{{item}}</li></ul>
<!--2， 擷取key和value 格式： (value,key) 注意順序！！！！-->
<ul><li v-for="(value,key) in info" >{{value}} -- {{key}}</li></ul>
<!--3， 擷取key和value和index 格式： (value,key，index) 注意順序！！！！-->
<ul><li v-for="(value,key, index) in info" >{{value}}--{{key}}--{{index}}</li></ul>
</div>
<script src="vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data :{
info: {
name: 'fzx',
age:24,
study:'vue'
}
}
})
結果為：
當v-for和v-if同處于一個節點時，v-for的優先級比v-if更高。這意味着v-if将運作在每個v-for循環中。
11， v-on
v-on主要用來監聽dom事件，以便執行一些代碼塊。表達式可以是一個方法名。
簡寫為： @
<div id="app">
<button @click="consoleLog"></button>
</div>
<script>
var app = new Vue({
el: '#app',
methods:{
consoleLog:function (event) {
console.log(1)
}
}
})
</script>
v-on 參數傳遞問題
1， 方法不需要額外的參數，調用方法時可以不添加（）；
2， 方法中僅僅有一個event參數，如果調用方法時省略了小括号，此時vue會預設将浏覽器生産的event 事件對象作為參數傳入到方法中；
3， 如果函數需要參數，但是沒有傳入，那麼函數的形參為 undefined；
3， 若果需要同時傳入某個參數，同時需要event，調用方法時 以 $event 傳入事件。
v-on 事件修飾符
- .stop 阻止事件繼續冒泡 —— 調用 event.stopPropagation()
- .prevent 事件不再重載頁面 —— 調用 event.preventDefault()
- .capture 使用事件捕獲模式,即元素自身觸發的事件先在此處處理，然後才交由内部元素進行處理
- .self 隻當在 event.target 是目前元素自身時觸發處理函數
- .once 事件将隻會觸發一次
- .passive 告訴浏覽器你不想阻止事件的預設行為
<!-- 阻止單擊事件停止冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 送出事件不再重載頁面 阻止預設行為 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符串聯 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 隻有修飾符 沒有表達式 -->
<form v-on:submit.prevent></form>
<!--鍵修飾符，鍵别名-->
<input @keyup.enter="onEnter">
<!--鍵修飾符，鍵代碼-->
<input @keyup.13="onEnter">
<!-- 添加事件監聽器時使用事件捕獲模式 -->
<!-- 即元素自身觸發的事件先在此處處理，然後才交由内部元素進行處理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 隻當在 event.target 是目前元素自身時觸發處理函數 -->
<!-- 即事件不是從内部元素觸發的 -->
<div v-on:click.self="doThat">...</div>
<!-- 點選事件将隻會觸發一次 -->
<a v-on:click.once="doThis"></a>
<!-- 滾動事件的預設行為 (即滾動行為) 将會立即觸發 -->
<!-- 而不會等待 `onScroll` 完成 -->
<!-- 這其中包含 `event.preventDefault()` 的情況 -->
<div v-on:scroll.passive="onScroll">...</div>
![vue項目：npm打包-S和-D差別：[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)