在Vue中有很多的指令蝇棉，這些指令方便了我們操作數(shù)據(jù)网严，下面我們來看一下在Vue中到底有哪些指令：

# v-text

更新元素的 textContent墓怀。如果要更新部分的 textContent呀闻，需要使用 {{}} 插值拇惋。

<span v-text="msg"></span>
<!-- 和下面的一樣 -->
<span>{{msg}}</span>

如上代碼，可見v-text并不是很常用陶舞，我們平時(shí)在更新textContent時(shí)直接用雙花括號(hào){{}}即可嗽测。

# v-html

更新元素的 innerHTML。注意：內(nèi)容按普通 HTML 插入 - 不會(huì)作為 Vue 模板進(jìn)行編譯肿孵。如果試圖使用 v-html 組合模板唠粥，可以重新考慮是否通過使用組件來替代。

<div id="app1">
    <p>{{ rawHtml }}</p>
    <p><span v-html="rawHtml"></span></p>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false;
    new Vue({
        el : '#app1',
        data : {
            rawHtml : '<span style="color: red">紅色</span>'
        }
    })
</script>

運(yùn)行結(jié)果.png

# v-show

v-show 的元素始終會(huì)被渲染并保留在 DOM 中。v-show 只是簡(jiǎn)單地切換元素的 CSS property display河咽。

<h1 v-show="ok">Hello!</h1>
<script type="text/javascript">
    Vue.config.productionTip = false;
    new Vue({
        el : '#app1',
        data : {
            ok : true
        }
    })
</script>

# v-if钠右、v-else、v-else-if

v-if忘蟹、v-else飒房、v-else-if會(huì)改變頁面的DOM結(jié)構(gòu)搁凸，如果頻繁使用這些來進(jìn)行頁面上的顯示隱藏，就會(huì)導(dǎo)致性能非常差情屹，但如果不是要頻繁切換的話坪仇，v-if比v-show更好。

<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>

# v-for

看名字就可以看出v-for是有關(guān)循環(huán)的指令垃你。

<div v-for="item in items">
  {{ item.text }}
</div>

data : {
  items: [1,2,3,4]
}

另外也可以為數(shù)組索引指定別名 (或者用于對(duì)象的鍵)：

<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>

v-for 的默認(rèn)行為會(huì)嘗試原地修改元素而不是移動(dòng)它們。要強(qiáng)制其重新排序元素喂很，你需要用特殊 attribute key 來提供一個(gè)排序提示：

<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

當(dāng) v-if與 v-for 一起使用時(shí)惜颇，v-for 具有比 v-if 更高的優(yōu)先級(jí)。

# v-on

一般來說少辣，我們?yōu)榱朔奖銜?huì)把v-on可以縮寫為@凌摄，它的用法如下：

綁定事件監(jiān)聽器。事件類型由參數(shù)指定漓帅。表達(dá)式可以是一個(gè)方法的名字或一個(gè)內(nèi)聯(lián)語句锨亏，如果沒有修飾符也可以省略。
用在普通元素上時(shí)忙干，只能監(jiān)聽原生 DOM 事件器予。用在自定義元素組件上時(shí)，也可以監(jiān)聽子組件觸發(fā)的自定義事件捐迫。
在監(jiān)聽原生 DOM 事件時(shí)乾翔，方法以事件為唯一的參數(shù)。如果使用內(nèi)聯(lián)語句施戴，語句可以訪問一個(gè) $event property：v-on:click="handle('ok', $event)"反浓。

<!-- 方法處理器 -->
<button v-on:click="doThis"></button>

<!-- 動(dòng)態(tài)事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>

<!-- 內(nèi)聯(lián)語句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 縮寫 -->
<button @click="doThis"></button>

<!-- 動(dòng)態(tài)事件縮寫 (2.6.0+) -->
<button @[event]="doThis"></button>

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默認(rèn)行為 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默認(rèn)行為，沒有表達(dá)式 -->
<form @submit.prevent></form>

<!--  串聯(lián)修飾符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 鍵修飾符赞哗，鍵別名 -->
<input @keyup.enter="onEnter">

<!-- 鍵修飾符雷则，鍵代碼 -->
<input @keyup.13="onEnter">

<!-- 點(diǎn)擊回調(diào)只會(huì)觸發(fā)一次 -->
<button v-on:click.once="doThis"></button>

在子組件上監(jiān)聽自定義事件 (當(dāng)子組件觸發(fā)“my-event”時(shí)將調(diào)用事件處理器)：

<my-component @my-event="handleThis"></my-component>

<!-- 內(nèi)聯(lián)語句 -->
<my-component @my-event="handleThis(123, $event)"></my-component>

<!-- 組件中的原生事件 -->
<my-component @click.native="onClick"></my-component>

# v-bind

通常在寫代碼的時(shí)候，為了使用方便肪笋，我們一般吧v-bind縮寫成 : 月劈，它的用法如下：

動(dòng)態(tài)地綁定一個(gè)或多個(gè) attribute，或一個(gè)組件 prop 到表達(dá)式涂乌。
在綁定 class 或 style attribute 時(shí)艺栈，支持其它類型的值，如數(shù)組或?qū)ο蟆?br> 在綁定 prop 時(shí)湾盒，prop 必須在子組件中聲明湿右。可以用修飾符指定不同的綁定類型罚勾。
沒有參數(shù)時(shí)毅人，可以綁定到一個(gè)包含鍵值對(duì)的對(duì)象吭狡。注意此時(shí) class 和 style 綁定不支持?jǐn)?shù)組和對(duì)象。

<!-- 綁定一個(gè) attribute -->
<img v-bind:src="imageSrc">

<!-- 動(dòng)態(tài) attribute 名 (2.6.0+) -->
<button v-bind:[key]="value"></button>

<!-- 縮寫 -->
<img :src="imageSrc">

<!-- 動(dòng)態(tài) attribute 名縮寫 (2.6.0+) -->
<button :[key]="value"></button>

<!-- 內(nèi)聯(lián)字符串拼接 -->
<img :src="'/path/to/images/' + fileName">

<!-- class 綁定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

<!-- style 綁定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 綁定一個(gè)全是 attribute 的對(duì)象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- 通過 prop 修飾符綁定 DOM attribute -->
<div v-bind:text-content.prop="text"></div>

<!-- prop 綁定丈莺』螅“prop”必須在 my-component 中聲明。-->
<my-component :prop="someThing"></my-component>

<!-- 通過 $props 將父組件的 props 一起傳給子組件 -->
<child-component v-bind="$props"></child-component>

# v-model

在表單控件或者組件上創(chuàng)建雙向綁定缔俄。

v-model 在內(nèi)部為不同的輸入元素使用不同的 property 并拋出不同的事件：
1弛秋、text 和 textarea 元素使用 value property 和 input 事件；
2俐载、checkbox 和 radio 使用 checked property 和 change 事件蟹略；
3、select 字段將 value 作為 prop 并將 change 作為事件遏佣。

<!-- 文本 -->
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

<!-- 多行文本 -->
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

<!-- 復(fù)選框 -->
<!-- 單個(gè)復(fù)選框挖炬，綁定到布爾值 -->
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<!-- 多個(gè)復(fù)選框，綁定到同一個(gè)數(shù)組 -->
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>

new Vue({
  el: '...',
  data: {
    checkedNames: []
  }
})
<!-- ---------------------- -->
<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no"
>
// 當(dāng)選中時(shí)
vm.toggle === 'yes'
// 當(dāng)沒有選中時(shí)
vm.toggle === 'no'

<!-- 單選按鈕 -->
<div id="example-4">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span>
</div>

new Vue({
  el: '#example-4',
  data: {
    picked: ''
  }
})

<input type="radio" v-model="pick" v-bind:value="a">
<!-- ---------------------- -->
// 當(dāng)選中時(shí)
vm.pick === vm.a

<!-- 選擇框 -->
<div id="example-6">
  <select v-model="selected" multiple style="width: 50px;">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>

new Vue({
  el: '#example-6',
  data: {
    selected: []
  }
})
<!-- ---------------------- -->
<select v-model="selected">
    <!-- 內(nèi)聯(lián)對(duì)象字面量 -->
  <option v-bind:value="{ number: 123 }">123</option>
</select>
// 當(dāng)選中時(shí)
typeof vm.selected // => 'object'
vm.selected.number // => 123

<!-- 用 v-for 渲染的動(dòng)態(tài)選項(xiàng) -->

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>

new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})

# v-slot

提供具名插槽或需要接收 prop 的插槽状婶。

<!-- 具名插槽 -->
<base-layout>
  <template v-slot:header>
    Header content
  </template>

  Default slot content

  <template v-slot:footer>
    Footer content
  </template>
</base-layout>

<!-- 接收 prop 的具名插槽 -->
<infinite-scroll>
  <template v-slot:item="slotProps">
    <div class="item">
      {{ slotProps.item.text }}
    </div>
  </template>
</infinite-scroll>

<!-- 接收 prop 的默認(rèn)插槽意敛，使用了解構(gòu) -->
<mouse-position v-slot="{ x, y }">
  Mouse position: {{ x }}, {{ y }}
</mouse-position>

# v-pre

跳過這個(gè)元素和它的子元素的編譯過程√懦妫可以用來顯示原始 {{}} 標(biāo)簽草姻。跳過大量沒有指令的節(jié)點(diǎn)會(huì)加快編譯。

<span v-pre>{{ this will not be compiled }}</span>

# v-cloak

這個(gè)指令保持在元素上直到關(guān)聯(lián)實(shí)例結(jié)束編譯走敌。和 CSS 規(guī)則如 [v-cloak] { display: none } 一起用時(shí)碴倾，這個(gè)指令可以隱藏未編譯的 {{}}標(biāo)簽直到實(shí)例準(zhǔn)備完畢。

[v-cloak] {
  display: none;
}
<div v-cloak>
  {{ message }}
</div>

不會(huì)顯示掉丽，直到編譯結(jié)束跌榔。

# v-once

只渲染元素和組件一次。隨后的重新渲染捶障，元素/組件及其所有的子節(jié)點(diǎn)將被視為靜態(tài)內(nèi)容并跳過僧须。這可以用于優(yōu)化更新性能。

<!-- 單個(gè)元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>
<!-- 組件 -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令-->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>