Vue 3.0 指令

2021-07-16 11:27 更新

#v-text

  • 預(yù)期：string

  • 詳細(xì)：

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

  • 示例：

  1.   <span v-text="msg"></span>
  2.   <!-- 等價于 -->
  3.   <span>{{msg}}</span>

#v-html

  • 預(yù)期：string

  • 詳細(xì)：

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

WARNING

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

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

  • 示例：

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

#v-show

  • 預(yù)期：any

  • 用法：

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

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

#v-if

  • 預(yù)期：any

  • 用法：

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

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

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

#v-else

  • 不需要表達(dá)式

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

  • 用法：

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

  1.   <div v-if="Math.random() > 0.5">
  2.     Now you see me
  3.   </div>
  4.   <div v-else>
  5.     Now you don't
  6.   </div>

#v-else-if

  • 預(yù)期：any

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

  • 用法：

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

  1.   <div v-if="type === 'A'">
  2.     A
  3.   </div>
  4.   <div v-else-if="type === 'B'">
  5.     B
  6.   </div>
  7.   <div v-else-if="type === 'C'">
  8.     C
  9.   </div>
  10.   <div v-else>
  11.     Not A/B/C
  12.   </div>

#v-for

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

  • 用法：

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

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

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

  1.   <div v-for="(item, index) in items"></div>
  2.   <div v-for="(value, key) in object"></div>
  3.   <div v-for="(value, name, index) in object"></div>

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

  1.   <div v-for="item in items" :key="item.id">
  2.     {{ item.text }}
  3.   </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 - 添加事件偵聽器時使用 capture 模式。
  • .self - 只當(dāng)事件是從偵聽器綁定的元素本身觸發(fā)時才觸發(fā)回調(diào)。
  • .{keyAlias} - 僅當(dāng)事件是從特定鍵觸發(fā)時才觸發(fā)回調(diào)。
  • .once - 只觸發(fā)一次回調(diào)。
  • .left - 只當(dāng)點(diǎn)擊鼠標(biāo)左鍵時觸發(fā)。
  • .right - 只當(dāng)點(diǎn)擊鼠標(biāo)右鍵時觸發(fā)。
  • .middle - 只當(dāng)點(diǎn)擊鼠標(biāo)中鍵時觸發(fā)。
  • .passive - { passive: true } 模式添加偵聽器

  • 用法：

綁定事件監(jiān)聽器。事件類型由參數(shù)指定。表達(dá)式可以是一個方法的名字或一個內(nèi)聯(lián)語句，如果沒有修飾符也可以省略。

用在普通元素上時，只能監(jiān)聽原生 DOM 事件。用在自定義元素組件上時，也可以監(jiān)聽子組件觸發(fā)的自定義事件。

監(jiān)聽原生 DOM 事件時，方法以事件為唯一的參數(shù)。如果使用內(nèi)聯(lián)語句，語句可以訪問一個 $event property：v-on:click="handle('ok', $event)"。

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

  • 示例：

  1.   <!-- 方法處理器 -->
  2.   <button v-on:click="doThis"></button>
  4.   
  5.   <!-- 動態(tài)事件 -->
  6.   <button v-on:[event]="doThis"></button>
  8.   
  9.   <!-- 內(nèi)聯(lián)語句 -->
  10.   <button v-on:click="doThat('hello', $event)"></button>
  12.   
  13.   <!-- 縮寫 -->
  14.   <button @click="doThis"></button>
  16.   
  17.   <!-- 動態(tài)事件縮寫 -->
  18.   <button @[event]="doThis"></button>
  20.   
  21.   <!-- 停止冒泡 -->
  22.   <button @click.stop="doThis"></button>
  24.   
  25.   <!-- 阻止默認(rèn)行為 -->
  26.   <button @click.prevent="doThis"></button>
  28.   
  29.   <!-- 阻止默認(rèn)行為，沒有表達(dá)式 -->
  30.   <form @submit.prevent></form>
  32.   
  33.   <!-- 串聯(lián)修飾符 -->
  34.   <button @click.stop.prevent="doThis"></button>
  36.   
  37.   <!-- 鍵修飾符，鍵別名 -->
  38.   <input @keyup.enter="onEnter" />
  40.   
  41.   <!-- 點(diǎn)擊回調(diào)只會觸發(fā)一次 -->
  42.   <button v-on:click.once="doThis"></button>
  44.   
  45.   <!-- 對象語法 -->
  46.   <button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

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

  1.   <my-component @my-event="handleThis"></my-component>
  3.   
  4.   <!-- 內(nèi)聯(lián)語句 -->
  5.   <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。

  • 用法：

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

在綁定 class 或 style attribute 時，支持其它類型的值，如數(shù)組或?qū)ο蟆？梢酝ㄟ^下面的教程鏈接查看詳情。

在綁定 prop 時，prop 必須在子組件中聲明?？梢杂眯揎椃付ú煌慕壎愋汀?/p>

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

  • 示例：

  1.   <!-- 綁定 attribute -->
  2.   <img v-bind:src="imageSrc" />
  4.   
  5.   <!-- 動態(tài) attribute 名 -->
  6.   <button v-bind:[key]="value"></button>
  8.   
  9.   <!-- 縮寫 -->
  10.   <img :src="imageSrc" />
  12.   
  13.   <!-- 動態(tài) attribute 名縮寫 -->
  14.   <button :[key]="value"></button>
  16.   
  17.   <!-- 內(nèi)聯(lián)字符串拼接 -->
  18.   <img :src="'/path/to/images/' + fileName" />
  20.   
  21.   <!-- class 綁定 -->
  22.   <div :class="{ red: isRed }"></div>
  23.   <div :class="[classA, classB]"></div>
  24.   <div :class="[classA, { classB: isB, classC: isC }]">
  25.     <!-- style 綁定 -->
  26.     <div :style="{ fontSize: size + 'px' }"></div>
  27.     <div :style="[styleObjectA, styleObjectB]"></div>
  29.   
  30.     <!-- 綁定一個全是 attribute 的對象 -->
  31.     <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
  33.   
  34.     <!-- prop 綁定。"prop" 必須在 my-component 聲明 -->
  35.     <my-component :prop="someThing"></my-component>
  37.   
  38.     <!-- 通過 $props 將父組件的 props 一起傳給子組件 -->
  39.     <child-component v-bind="$props"></child-component>
  41.   
  42.     <!-- XLink -->
  43.     <svg><a :xlink:special="foo"></a></svg>
  44.   </div>

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

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

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

  • 參考：

#v-model

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

  • 限制于：

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

  • 修飾符：

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

  • 用法：

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

  • 參考：

#v-slot

  • 縮寫：#

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

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

  • 限用于：

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

  • 用法：

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

  • 示例：

  1.   <!-- 具名插槽 -->
  2.   <base-layout>
  3.     <template v-slot:header>
  4.       Header content
  5.     </template>
  7.   
  8.     <template v-slot:default>
  9.       Default slot content
  10.     </template>
  12.   
  13.     <template v-slot:footer>
  14.       Footer content
  15.     </template>
  16.   </base-layout>
  18.   
  19.   <!-- 接收 prop 的具名插槽 -->
  20.   <infinite-scroll>
  21.     <template v-slot:item="slotProps">
  22.       <div class="item">
  23.         {{ slotProps.item.text }}
  24.       </div>
  25.     </template>
  26.   </infinite-scroll>
  28.   
  29.   <!-- 接收 prop 的默認(rèn)插槽，使用了解構(gòu) -->
  30.   <mouse-position v-slot="{ x, y }">
  31.     Mouse position: {{ x }}, {{ y }}
  32.   </mouse-position>

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

  • 參考：

#v-pre

  • 不需要表達(dá)式

  • 用法：

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

  • 示例：

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

#v-cloak

  • 不需要表達(dá)式

  • 用法：

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

  • 示例：

  1.   [v-cloak] {
  2.     display: none;
  3.   }

  1.   <div v-cloak>
  2.     {{ message }}
  3.   </div>

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

#v-once

  • 不需要表達(dá)式

  • 詳細(xì)：

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

  1.   <!-- 單個元素 -->
  2.   <span v-once>This will never change: {{msg}}</span>
  3.   <!-- 有子元素 -->
  4.   <div v-once>
  5.     <h1>comment</h1>
  6.     <p>{{msg}}</p>
  7.   </div>
  8.   <!-- 組件 -->
  9.   <my-component v-once :comment="msg"></my-component>
  10.   <!-- `v-for` 指令 -->
  11.   <ul>
  12.     <li v-for="i in list" v-once>{{i}}</li>
  13.   </ul>

  • 參考：

#v-is

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

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

  1. <table>
  2.   <tr v-is="'blog-post-row'"></tr>
  3. </table>

WARNING

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

  1. <!-- 不正確，不會渲染任何內(nèi)容 -->
  2. <tr v-is="blog-post-row"></tr>
  5. <!-- 正確 -->
  6. <tr v-is="'blog-post-row'"></tr>
以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號