Vue.js指令

在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

這個(gè) span 的內(nèi)容將會(huì)被替換成為 rawHtml，直接作為 HTML——會(huì)忽略解析屬性值中的數(shù)據(jù)綁定。注意，你不能使用 v-html 來復(fù)合局部模板，因?yàn)?Vue 不是基于字符串的模板引擎。反之，對(duì)于用戶界面 (UI)，組件更適合作為可重用和可組合的基本單位。

# v-show

v-show 的元素始終會(huì)被渲染并保留在 DOM 中。v-show 只是簡單地切換元素的 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 綁定?！皃rop”必須在 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>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 最近開始學(xué)習(xí)Vue.js,除了默認(rèn)設(shè)置的核心指令( v-model 和 v-show ), Vue 也允許注冊(cè)自定...
    趙客縵胡纓v吳鉤霜雪明閱讀 554評(píng)論 0贊 5
  • 一. v-if和v-show v-if 如果條件不成立不會(huì)渲染當(dāng)前指令所在節(jié)點(diǎn)的 dom 元素 v-show 只是...
    YCool閱讀 260評(píng)論 0贊 0
  • 我在這里學(xué)習(xí)內(nèi)置指令 v-model v-if v-show v-else v-for v-bind v-on v...
    努力努力的老姑娘閱讀 512評(píng)論 0贊 1
  • 入門程序 1、在表單控件中使用v-model=“” 可實(shí)現(xiàn)雙向綁定2、vue指令都是 v-xxx格式的 v-clo...
    金石_832e閱讀 323評(píng)論 0贊 0
  • 指令用在我們的html中。 指令 (Directives) 是帶有v-前綴的特殊特性。指令特性的值預(yù)期是單個(gè) Ja...
    Rising_life閱讀 490評(píng)論 0贊 3

友情鏈接更多精彩內(nèi)容