前言

正文

Vue指令的含義

Vue指令的特點

Vue內置指令

v-text

v-html

v-show

v-if

v-else

v-else-if

v-for

v-on

v-bind

v-model

v-slot

v-pre

v-cloak

v-once

v-memo

v-is

Vue自定義指令

全域自定義指令

注冊區域指令

鉤子函式

鉤子函式引數

前言

Vue指令無論是在面試中還是在作業中，都是高頻知識點，因此，學會Vue指令非常有必要，本文將帶你快速了解Vue內置指令和自定義指令，

正文

如果一個面試官問你：Vue的指令有哪些？

你可以這么回答：

截止到Vue3.2，Vue一共有16個內置指令，包括 v-text、v-html、v-show、v-if、v-else、v-else-if、v-for、v-on、v-bind、v-model、v-slot、v-pre、v-cloak、v-once、v-memo、v-is，其中 v-memo是3.2新增的，v-is在3.1.0中廢棄，

如果面試官進一步問你：如何封裝自定義指令？

你可以這么回答：

自定義指令分為全域自定義指令和區域指令；在Vue中可以通過應用實體身上的 directive()注冊一個全域自定義指令，也可在組件中配置 directives選項來注冊區域指令，（往下展開如何封裝自定義指令）

Vue指令的含義

在Vue中，指令其實就是一種特殊的屬性，Vue會根據指令執行不同的操作，當運算式的值改變時，將其產生的連帶影響，回應式地作用于 DOM，具體下面展開，

Vue指令的特點

Vue指令有個明顯的特點就是，都是以v-開頭，例如：v-text

<span v-text="name"></span>

接下來，我們將一一介紹Vue中內置指令，

Vue內置指令

內置指令指的就是Vue自帶指令，可以直接在專案中使用，

一共有16個自帶指令，包括了：

v-text、v-html、v-show、v-if、v-else、v-else-if、v-for、v-on、v-bind、v-model、v-slot、v-pre、v-cloak、v-once、v-memo、v-is，

v-text

v-text用于更新元素的 textContent（文本內容）

<h1 v-text="message"></h1>

h1元素的內容最終取決于message的值

v-html

與v-text相似，只是v-html用于更新元素的 innerHTML

<div v-html="'<h1>我是A組件</h1>'"></div>

指令里面的內容是按普通 HTML 插入

v-show

v-show可以根據運算式的真偽值，切換元素的display，控制元素的展示和隱藏

<h1 v-show="true">顯示</h1>
<h1 v-show="false">隱藏</h1>

可以看到，當條件變化時該指令控制的是css中的display，隱藏時為 display: none，

v-show 不支持 <template> 元素，也不支持 v-else，

v-if

v-if用于根據運算式的真偽值來有條件地渲染元素，與v-show不同的是，v-if在切換時是控制著元素的銷毀或創建，而不是簡單的樣式顯示或隱藏

<h1 v-if="true">顯示</h1>
<h1 v-if="false">隱藏</h1>

可以看到，當運算式為假時，v-if是直接銷毀元素，而上面的v-show只是視覺上隱藏了而已，

v-if支持 <template>，如果元素是 <template>，將提取它里面的內容作為條件塊，

v-else

v-else無需運算式，表示添加一個“else 塊”，當v-if滿足條件時展示v-if的元素，否則展示v-else的元素（類似于我們的條件陳述句 if-else ）

<h1 v-if="true">顯示</h1>
<h1 v-else>隱藏</h1>

如果v-if為假，則展示v-else（控制的也是元素的創建與銷毀）

<h1 v-if="false">隱藏</h1>
<h1 v-else>顯示</h1>

注意：v-else前一個兄弟元素必須有 v-if 或 v-else-if

v-else-if

同理，表示 v-if 的“else if 塊”，和v-else一樣，前一個兄弟元素必須有v-if或 v-else-if

<h1 v-if="false">隱藏</h1>
<h1 v-else-if="true">顯示v-else-if</h1>
<h1 v-else>隱藏</h1>

v-for

v-for一個用于迭代的指令，可以根據資料源多次渲染元素或模板塊

<h1 v-for="item in titleList">{{item}}</h1>

在檢查工具中，上面的v-for出現了紅色波浪線，因為我們在使用v-for中，需要添加key

key的好處是更好的復用節點，提高渲染效率，

也可以為陣列索引指定別名或者用于物件的鍵

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

<!-- 也可以遍歷一個數字，此時從1開始 -->
<div v-for="number in 6">{{number}}</div>

v-on

v-on用于給元素系結事件，可以縮寫為 @

修飾符

.stop - 呼叫 event.stopPropagation()
.prevent - 呼叫 event.preventDefault()
.capture - 添加事件偵聽器時使用 capture 模式
.self - 只當事件是從偵聽器系結的元素本身觸發時才觸發回呼
.{keyAlias} - 僅當事件是從特定鍵觸發時才觸發回呼
.once - 只觸發一次事件
.left - 只當點擊滑鼠左鍵時觸發
.right - 只當點擊滑鼠右鍵時觸發
.middle - 只當點擊滑鼠中鍵時觸發
.passive - { passive: true } 模式添加偵聽器

<!-- 阻止冒泡 -->
<button @click.stop="doSomething"></button>

注意：用在普通元素上時，只能監聽原生 DOM 事件，用在自定義元素組件上時，也可以監聽子組件觸發的自定義事件，

v-bind

v-bind用于系結資料和元素屬性，可以縮寫為 : 或.(當使用 .prop 修飾符時)，

<div :someProperty.prop="someObject"></div>

<!-- 相當于 -->
<div .someProperty="someObject"></div>

如上面我們在v-for中使用的 :key="index" 實際上就是 v-bind:key="index"的縮寫，

v-bind的3個修飾符

.camel - 將 kebab-case attribute 名轉換為 camelCase
.prop - 將一個系結強制設定為一個 DOM property，3.2+
.attr - 將一個系結強制設定為一個 DOM attribute，3.2+

v-model

v-model限制于：<input> <select> <textarea> components

v-model的3個修飾符：

.lazy - 惰性更新，監聽 change 而不是 input 事件
.number - 輸入字串轉為有效的數字
.trim - 輸入首尾空格過濾

在表單控制元件或者組件上可以創建雙向系結

<input v-model="message">
<p>{{message}}</p>

v-slot

v-slot用于提供具名插槽或需要接收 prop 的插槽

可選擇性傳遞引數，表示插槽名，默認值default

Vue 插槽（slot）詳細介紹（對比版本變化，避免踩坑）_前端不釋卷leo的博客-CSDN博客Vue中的插槽（slot）在專案中用的也是比較多的，今天就來介紹一下插槽的基本使用以及Vue版本更新之后的插槽用法變化，插槽是什么？插槽就是子組件中的提供給父組件使用的一個占位符，用<slot></slot> 表示，父組件可以在這個占位符中填充任何模板代碼，如 HTML、組件等，填充的內容會替換子組件的<slot></slot>標簽，簡單理解就是子組件中留下個“坑”，父組件可以使用指定內容來補“坑”，以下舉例子幫助理解，怎么使用插槽？基本用法https://blog.csdn.net/qq_41809113/article/details/121640035?spm=1001.2014.3001.5502

v-pre

v-pre指令用于跳過這個元素及其子元素的編譯程序

<h1 v-pre>{{message}}</h1>

可以看到里面的東西沒有被編譯，而是展示原始內容，

v-cloak

v-cloak指令主要用于解決插值運算式在頁面閃爍問題

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

這樣h1只會在編譯結束后顯示，

v-once

v-once指令用于表示只渲染一次，當要重新渲染，元素/組件及其所有的子節點將被視為靜態內容并跳過

如上，首次渲染，頁面顯示"leo"，在不用v-once修飾時，點擊按鈕，修改內容，頁面顯示"lion"；當加上指令v-once，首次渲染之后，再次渲染時跳過該部分，即點擊按鈕改變message，但是由于h1不會重新渲染，自然頁面顯示的內容也不會改變，一直都是"leo"，

v-memo

Vue3.2+，用于快取一個模板的子樹，該指令接收一個固定長度的陣列作為依賴值進行記憶比對，如果陣列中的每個值都和上次渲染的相同，則整個該子樹的更新會被跳過

<div v-memo="[valueA, valueB]"></div>

在重新渲染時，如果 valueA 與 valueB 都保持不變，那么對這個 <div> 以及它的所有子節點的更新都將被跳過，

v-is

已在 3.1.0 中廢棄，改用 :is，用于動態渲染組件

<component :is="currentView"></component>

Vue自定義指令

全域自定義指令

在Vue中可以通過應用實體身上的directive()注冊一個全域自定義指令

Vue2

// 注冊一個全域自定義指令 `v-focus`
Vue.directive('focus', {
  // 當被系結的元素掛載到 DOM 中時...
  inserted(el) {
    // 聚焦元素
    el.focus()
  }
})

Vue3

const app = Vue.createApp({})
// 注冊一個全域自定義指令 `v-focus`
app.directive('focus', {
  // 當被系結的元素掛載到 DOM 中時...
  inserted(el) {
    // 聚焦元素
    el.focus()
  }
})

簡單使用

<input v-focus />

注冊區域指令

如果想注冊區域指令，可在組件中配置directives選項來注冊區域指令

directives: {
  focus: {
    // 指令的定義
    inserted(el) {
      el.focus();
    }
  }
}

鉤子函式

一個指令定義物件可以提供如下幾個鉤子函式 (均為可選)：

bind：只呼叫一次，指令第一次系結到元素時呼叫，在這里可以進行一次性的初始化設定，
inserted：被系結元素插入父節點時呼叫 (僅保證父節點存在，但不一定已被插入檔案中)，
update：所在組件的 VNode 更新時呼叫，但是可能發生在其子 VNode 更新之前，指令的值可能發生了改變，也可能沒有，但是你可以通過比較更新前后的值來忽略不必要的模板更新，
componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后呼叫，
unbind：只呼叫一次，指令與元素解綁時呼叫，

鉤子函式引數

指令鉤子函式會被傳入以下引數：

el：指令所系結的元素，可以用來直接操作 DOM，
binding：一個物件，包含以下 property：
- name：指令名，不包括 v- 前綴，
- value：指令的系結值，例如：v-my-directive="1 + 1" 中，系結值為 2，
- oldValue：指令系結的前一個值，僅在 update 和 componentUpdated 鉤子中可用，無論值是否改變都可用，
- expression：字串形式的指令運算式，例如 v-my-directive="1 + 1" 中，運算式為 "1 + 1"，
- arg：傳給指令的引數，可選，例如 v-my-directive:foo 中，引數為 "foo"，
- modifiers：一個包含修飾符的物件，例如：v-my-directive.foo.bar 中，修飾符物件為 { foo: true, bar: true }，
vnode：Vue 編譯生成的虛擬節點，移步 VNode API 來了解更多詳情，
oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用，

舉例

Vue.directive('demo', {
  bind: function (el, binding, vnode) {
    let s = JSON.stringify
    el.innerHTML =
      'name: ' + s(binding.name) + '<br>' +
      'value: ' + s(binding.value) + '<br>' +
      'expression: ' + s(binding.expression) + '<br>' +
      'argument: ' + s(binding.arg) + '<br>' +
      'modifiers: ' + s(binding.modifiers) + '<br>' +
      'vnode keys: ' + Object.keys(vnode).join(', ')
  }
})

<div v-demo:foo.a.b="message"></div>

頁面展示

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/413928.html

標籤：其他

上一篇：前端案例：我的備忘錄（支持事件的增加、洗掉和修改，代碼完整）

下一篇：快過年了，用五種不同的JS特效帶你看煙花（包郵送元宇宙圖書）

10分鐘，從0到1學會Vue內置指令與自定義指令（圖文并茂版）

前言

正文

Vue指令的含義

Vue指令的特點

Vue內置指令

v-text

v-html

v-show

v-if

v-else

v-else-if

v-for

v-on

v-bind

v-model

v-slot

v-pre

v-cloak

v-once

v-memo

v-is

Vue自定義指令

全域自定義指令

注冊區域指令

鉤子函式

鉤子函式引數