Vue 3.0 指令

#v-text

• 預(yù)期：string

• 詳細(xì)：

更新元素的 textContent。如果要更新部分的 textContent，需要使用 Mustache 插值。

• 示例：

  <span v-text="msg"></span>
  <!-- 等價(jià)于 -->
  <span>{{msg}}</span>

• 參考：數(shù)據(jù)綁定語法 - 插值

#v-html

• 預(yù)期：string

• 詳細(xì)：

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

WARNING

在網(wǎng)站上動(dòng)態(tài)渲染任意 HTML 是非常危險(xiǎn)的，因?yàn)槿菀讓?dǎo)致 XSS 攻擊。只在可信內(nèi)容上使用 v-html，永不用在用戶提交的內(nèi)容上。

在單文件組件里，scoped 的樣式不會(huì)應(yīng)用在 v-html 內(nèi)部，因?yàn)槟遣糠?HTML 沒有被 Vue 的模板編譯器處理。如果你希望針對(duì) v-html 的內(nèi)容設(shè)置帶作用域的 CSS，你可以替換為 CSS modules 或用一個(gè)額外的全局 <style> 元素手動(dòng)設(shè)置類似 BEM 的作用域策略。

• 示例：

  <div v-html="html"></div>

• 參考：數(shù)據(jù)綁定語法 - 插值

#v-show

• 預(yù)期：any

• 用法：

根據(jù)表達(dá)式的真假值，切換元素的 display CSS property。

當(dāng)條件變化時(shí)該指令觸發(fā)過渡效果。

• 參考：條件渲染 - v-show

#v-if

• 預(yù)期：any

• 用法：

根據(jù)表達(dá)式的真假值來有條件地渲染元素。在切換時(shí)元素及它的數(shù)據(jù)綁定 / 組件被銷毀并重建。如果元素是 <template>，將提取它的內(nèi)容作為條件塊。

當(dāng)條件變化時(shí)該指令觸發(fā)過渡效果。

當(dāng)和 v-if 一起使用時(shí)，v-for 的優(yōu)先級(jí)比 v-if 更高。詳見列表渲染教程

• 參考：條件渲染 - v-if

#v-else

• 不需要表達(dá)式

• 限制：前一兄弟元素必須有 v-if 或 v-else-if。

• 用法：

為 v-if 或者 v-else-if 添加“else 塊”。

  <div v-if="Math.random() > 0.5">
    Now you see me
  </div>
  <div v-else>
    Now you don't
  </div>

• 參考：條件渲染 - v-else

#v-else-if

• 預(yù)期：any

• 限制：前一兄弟元素必須有 v-if 或 v-else-if。

• 用法：

表示 v-if 的“else if 塊”?？梢枣?zhǔn)秸{(diào)用。

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

#v-for

• 預(yù)期：Array | Object | number | string | Iterable

• 用法：

基于源數(shù)據(jù)多次渲染元素或模板塊。此指令之值，必須使用特定語法 alias in expression，為當(dāng)前遍歷的元素提供別名：

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

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

  <div v-for="(item, index) in items"></div>
  <div v-for="(value, key) in object"></div>
  <div v-for="(value, 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>

v-for 也可以在實(shí)現(xiàn)了可迭代協(xié)議的值上使用，包括原生的 Map 和 Set。

v-for 的詳細(xì)用法可以通過以下鏈接查看教程詳細(xì)說明。

• 參考：

• 列表渲染

#v-on

• 縮寫：@

• 預(yù)期：Function | Inline Statement | Object

• 參數(shù)：event

• 修飾符：

• .stop - 調(diào)用 event.stopPropagation()。
• .prevent - 調(diào)用 event.preventDefault()。
• .capture - 添加事件偵聽器時(shí)使用 capture 模式。
• .self - 只當(dāng)事件是從偵聽器綁定的元素本身觸發(fā)時(shí)才觸發(fā)回調(diào)。
• .{keyAlias} - 僅當(dāng)事件是從特定鍵觸發(fā)時(shí)才觸發(fā)回調(diào)。
• .once - 只觸發(fā)一次回調(diào)。
• .left - 只當(dāng)點(diǎn)擊鼠標(biāo)左鍵時(shí)觸發(fā)。
• .right - 只當(dāng)點(diǎn)擊鼠標(biāo)右鍵時(shí)觸發(fā)。
• .middle - 只當(dāng)點(diǎn)擊鼠標(biāo)中鍵時(shí)觸發(fā)。
• .passive - { passive: true } 模式添加偵聽器

• 用法：

綁定事件監(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)"。

v-on 同樣支持不帶參數(shù)綁定一個(gè)事件/監(jiān)聽器鍵值對(duì)的對(duì)象。注意當(dāng)使用對(duì)象語法時(shí)，是不支持任何修飾器的。

• 示例：

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

  
  <!-- 動(dòng)態(tài)事件 -->
  <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)事件縮寫 -->
  <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" />

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

  
  <!-- 對(duì)象語法 -->
  <button v-on="{ mousedown: doThis, mouseup: doThat }"></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>

• 參考：

• 事件處理器
• 組件 - 自定義事件

#v-bind

• 縮寫：:

• 預(yù)期：any (with argument) | Object (without argument)

• 參數(shù)：attrOrProp (optional)

• 修飾符：

• .camel - 將 kebab-case attribute 名轉(zhuǎn)換為 camelCase。

• 用法：

動(dòng)態(tài)地綁定一個(gè)或多個(gè) attribute，或一個(gè)組件 prop 到表達(dá)式。

在綁定 class 或 style attribute 時(shí)，支持其它類型的值，如數(shù)組或?qū)ο?。可以通過下面的教程鏈接查看詳情。

在綁定 prop 時(shí)，prop 必須在子組件中聲明?？梢杂眯揎椃付ú煌慕壎愋?。

沒有參數(shù)時(shí)，可以綁定到一個(gè)包含鍵值對(duì)的對(duì)象。注意此時(shí) class 和 style 綁定不支持?jǐn)?shù)組和對(duì)象。

• 示例：

  <!-- 綁定 attribute -->
  <img v-bind:src="imageSrc" />

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

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

  
  <!-- 動(dòng)態(tài) attribute 名縮寫 -->
  <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 綁定。"prop" 必須在 my-component 聲明 -->
    <my-component :prop="someThing"></my-component>

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

  
    <!-- XLink -->
    <svg><a :xlink:special="foo"></a></svg>
  </div>

.camel 修飾符允許在使用 DOM 模板時(shí)將 v-bind property 名稱駝峰化，例如 SVG 的 viewBox property：

  <svg :view-box.camel="viewBox"></svg>

在使用字符串模板或通過 vue-loader / vueify 編譯時(shí)，無需使用 .camel。

• 參考：

• Class 和 Style 綁定
• 組件 - Props

#v-model

• 預(yù)期：隨表單控件類型不同而不同。

• 限制于：

• <input>
• <select>
• <textarea>
• components

• 修飾符：

• .lazy - 監(jiān)聽 change 而不是 input 事件
• .number - 輸入字符串轉(zhuǎn)為有效的數(shù)字
• .trim - 輸入首尾空格過濾

• 用法：

在表單控件或者組件上創(chuàng)建雙向綁定。細(xì)節(jié)請(qǐng)看下面的教程鏈接。

• 參考：

• 表單控件綁定
• 組件 - 在輸入組件上使用自定義事件

#v-slot

• 縮寫：#

• 預(yù)期：可放置在函數(shù)參數(shù)位置的 JavaScript 表達(dá)式 (在支持的環(huán)境下可使用解構(gòu))?？蛇x，即只需要在為插槽傳入 prop 的時(shí)候使用。

• 參數(shù)：插槽名 (可選，默認(rèn)值是 default)

• 限用于：

• <template>
• 組件 (對(duì)于一個(gè)單獨(dú)的帶 prop 的默認(rèn)插槽)

• 用法：

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

• 示例：

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

  
    <template v-slot:default>
      Default slot content
    </template>

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

更多細(xì)節(jié)請(qǐng)查閱以下鏈接。

• 參考：

• 組件 - 插槽

#v-pre

• 不需要表達(dá)式

• 用法：

跳過這個(gè)元素和它的子元素的編譯過程?？梢杂脕盹@示原始 Mustache 標(biāo)簽。跳過大量沒有指令的節(jié)點(diǎn)會(huì)加快編譯。

• 示例：

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

#v-cloak

• 不需要表達(dá)式

• 用法：

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

• 示例：

  [v-cloak] {
    display: none;
  }

  <div v-cloak>
    {{ message }}
  </div>

<div>?不會(huì)顯示，直到編譯結(jié)束。

#v-once

• 不需要表達(dá)式

• 詳細(xì)：

只渲染元素和組件一次。隨后的重新渲染，元素/組件及其所有的子節(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>

• 參考：

• 數(shù)據(jù)綁定語法- 插值

#v-is

注意：本節(jié)僅影響直接在頁面的 HTML 中寫入 Vue 模板的情況。

• 預(yù)期：字符串文本
• 限制于：原生 HTML 元素
• 用法：在 DOM 內(nèi)模板使用時(shí)，模板受原生 HTML 解析規(guī)則的約束。某些 HTML 元素，如：<ul>、<ol>、<table> 和 <select> 等，對(duì)哪些元素可以出現(xiàn)在它們內(nèi)部有限制，而某些元素 (如：<li>、<tr> 和 <option> 只能出現(xiàn)在某些其他元素中。作為解決方法，我們可以對(duì)以下元素使用 v-is 指令：

<table>
  <tr v-is="'blog-post-row'"></tr>
</table>

WARNING

v-is 函數(shù)類似于動(dòng)態(tài) 2.x :is 綁定——因此要按組件的注冊(cè)名稱渲染組件，其值應(yīng)為 JavaScript 字符串文本：

<!-- 不正確，不會(huì)渲染任何內(nèi)容 -->
<tr v-is="blog-post-row"></tr>


<!-- 正確 -->
<tr v-is="'blog-post-row'"></tr>