這篇文章主要介紹“vue中的自定義指令如何使用”，在日常操作中，相信很多人在vue中的自定義指令如何使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue中的自定義指令如何使用”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

員工經(jīng)過長期磨合與沉淀，具備了協(xié)作精神，得以通過團(tuán)隊的力量開發(fā)出優(yōu)質(zhì)的產(chǎn)品。創(chuàng)新互聯(lián)公司堅持“專注、創(chuàng)新、易用”的產(chǎn)品理念，因為“專注所以專業(yè)、創(chuàng)新互聯(lián)網(wǎng)站所以易用所以簡單”。公司專注于為企業(yè)提供成都做網(wǎng)站、網(wǎng)站設(shè)計、外貿(mào)營銷網(wǎng)站建設(shè)、微信公眾號開發(fā)、電商網(wǎng)站開發(fā)，重慶小程序開發(fā)，軟件按需定制開發(fā)等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。

1. 什么是自定義指令？

想要使用自定義指令，首先我們得搞清楚什么是自定義指令？

自定義指令非常好理解，我們使用的v-for、v-if、v-model等等稱之為指令，也被稱之為Vue的內(nèi)置指令。這些指令都是我們可以直接使用的。

為了更好的滿足需求，最大化的讓開發(fā)者個性化開發(fā)，Vue暴漏了自定義指令的API給我們，讓我們除了使用內(nèi)置指令外，我們還可以自己定義指令，定義好后和內(nèi)置指令的方式非常類似。

比如我們看面的代碼：

<p v-pin="200">我是一段話</p>

上面那段代碼中v-pin可能很多小伙伴不知道是什么，看起來像是指令，但是有沒有遇到過。其實v-pin就是一個自定義指令，只是我們這兒省略注冊它的代碼。

2. 環(huán)境準(zhǔn)備

我們?yōu)榱朔块g，直接使用Vue2.x的腳手架工具快速搭建一個項目。

搭建命令：

vue create 項目名稱

運(yùn)行起來：

3. 如何注冊自定義指令？

要想使用自定義指令，我們必須先提前把它注冊好，就好比我們的組件一樣，得先注冊，才能使用。

注冊指令也分為全局注冊和局部注冊，和全局注冊組件和局部注冊組件一個道理。全局注冊的指令可以在任何組件中直接使用，局部注冊的指令只能在注冊的地方使用。

3.1 全局注冊

全局注冊顧名思義，自定義指令注冊好后，在項目的所有組件內(nèi)都可以直接使用。

Vue提供了一個directive方法給我們注冊自定義指令，我們在main.js中注冊一個全局的自定義指令。

代碼如下：

// src/main.js
import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;
Vue.directive("resize", {
  bind() {},
  inserted() {},
  update() {},
  componentUpdated() {},
  unbind() {},
});
new Vue({
  render: (h) => h(App),
}).$mount("#app");

上段代碼中我們就直接調(diào)用了Vue提供的directive方法來注冊全局的自定義指令，該方法接收兩個參數(shù)：指令名稱、包含指令鉤子函數(shù)的對象。

指令注冊完畢后，我們就可以在項目中任意組件中的元素上使用“v-指令名稱”的形式使用指令了。

需要注意的是，指令鉤子函數(shù)不是必須的，大家可以把它與vue的生命周期鉤子函數(shù)做類比，它們的作用就是用來讓指令在不同的過程中做不同的事情。

3.2 局部注冊

通常來說，如果自定義指令不是每個組件都會用到的話，我們一般局注冊自定義指令就好了。

我們改造一下APP.vue文件，在其內(nèi)部注冊自定義指令，代碼如下：

<script>
export default {
  name: "App",
  components: {},
  directives: {
    resize: {
      bind() {},
      inserted() {},
      update() {},
      componentUpdated() {},
      unbind() {},
    },
  },
};
</script>

如上所示，Vue提供了一個directives選項供我們注冊自定義指令，它與data、methods同級別，上段代碼中我們注冊了一個名叫resize的自定義指令，該指令只允許在組件內(nèi)部使用。

注意：全局注冊指令使用的是directive，局部注冊指令使用的是directives，很好理解，局部指令一次性注意注冊很多個，全局指令依次只能注冊一個。

4. 自定義指令參數(shù)詳解

上一節(jié)簡單介紹了局部注冊自定義指令和全局注冊自定義指令，可以看到指令里面有幾個鉤子函數(shù)，我們的操作邏輯主要在這幾個鉤子函數(shù)當(dāng)中，所以我們有必要介紹下這幾個鉤子函數(shù)。

4.1 鉤子函數(shù)介紹

bind：

只調(diào)用一次，指令第一次綁定到元素時調(diào)用。在這里可以進(jìn)行一次性的初始化設(shè)置。

inserted：

被綁定元素插入父節(jié)點時調(diào)用 (僅保證父節(jié)點存在，但不一定已被插入文檔中)。

update：

所在組件的 VNode 更新時調(diào)用，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新

componentUpdated：

指令所在組件的 VNode及其子 VNode全部更新后調(diào)用。

unbind：

只調(diào)用一次，指令與元素解綁時調(diào)用。

上面5個就是自定義指令的全部鉤子函數(shù)，每個鉤子函數(shù)都是可選的，視情況而定。大家可以簡單理解鉤子函數(shù)順序：指令綁定到元素時（bind）、元素插入時（inserted）、組件更新時（update）、組件更新后（componentUpdated）、指令與元素解綁時（unbind）。這些和組件的生命周期函數(shù)有點類似。

4.2 鉤子函數(shù)參數(shù)介紹

為了方便我們的邏輯操作，每個鉤子函數(shù)都會接收參數(shù)，我們可以用這些參數(shù)做我們想做的事。

el：

指令所綁定的元素，可以用來直接操作 DOM。

binding：

一個對象，包含以下屬性：

• name：指令名，不包括 v- 前綴。

• value：指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值為 2。

• oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。

• expression：字符串形式的指令表達(dá)式。例如 v-my-directive="1 + 1" 中，表達(dá)式為 "1 + 1"。

• arg：傳給指令的參數(shù)，可選。例如 v-my-directive:foo 中，參數(shù)為 "foo"。

• modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。

vnode：

Vue 編譯生成的虛擬節(jié)點。

oldVnode：

上一個虛擬節(jié)點，僅在update和componentUpdated鉤子中可用。

在使用的時候，el和binding參數(shù)是我們使用得最平凡的，有了這些參數(shù)，我們的操作就變得簡單起來。

5. 簡單案列實戰(zhàn)

上面兩節(jié)介紹了如何注冊自定義指令以及相關(guān)參數(shù)，接下來就該實戰(zhàn)了，我們在APPVue中定義一個自定義指令，先來驗證一下鉤子函數(shù)的執(zhí)行情況。

代碼如下：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <div v-resize></div>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  directives: {
    resize: {
      bind() {
        console.log("bind")
      },
      inserted() {
        console.log("inserted")
      },
      update() {
        console.log("update")
      },
      componentUpdated() {
        console.log("componentUpdated")
      },
      unbind() {
        console.log("unbind")
      },
    },
  },
};
</script>

上面代碼中我們將自定義指令resize綁定到了div元素上面，當(dāng)我們刷新頁面時，執(zhí)行了自定義指令中的bind和inserted鉤子函數(shù)，其余函數(shù)均要元素有更新才會執(zhí)行。

5.1 實現(xiàn)v-resize指令

需求背景：

在做數(shù)據(jù)大屏或者自適應(yīng)開發(fā)的時候，我們通常需要根據(jù)瀏覽器窗口大小的變化重新渲染頁面，比如重新繪制echarts圖表等功能。

需求描述：

實現(xiàn)自定義指令v-resize指令，窗口大小發(fā)生變化時，實時打印最新的窗口寬高。

代碼實現(xiàn)：

// src/APP.vue
<template>
  <div id="app">
    <h2>窗口寬度：{{ innerWidth }}</h2>
    <h2>窗口高度：{{ innerHeight }}</h2>
    <div style="height: 300px; width: 80%; background: blue" v-resize></div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      innerHeight: window.innerHeight,
      innerWidth: window.innerWidth,
    };
  },
  components: {},
  directives: {
    resize: {
      bind() {
        console.log("bind");
      },
      inserted(el, binding, vnode) {
        console.log("inserted");
        console.log(el, binding);
        let that = vnode.context;
        // 監(jiān)聽瀏覽器的resize事件
        window.addEventListener("resize", () => {
          that.innerHeight = window.innerHeight;
          that.innerWidth = window.innerWidth;
        });
      },
      update() {
        console.log("VNode更新了");
      },
      componentUpdated() {
        console.log("componentUpdated");
      },
      unbind() {
        console.log("unbind");
        window.removeEventListener("resize");
      },
    },
  },
};
</script>

效果如下：

當(dāng)我們更改瀏覽器窗口大小時，頁面上會實時打印出最新的高度和寬度，當(dāng)然這兒只是一個最簡單的案例，實際項目中我們通常會在窗口大小發(fā)生變化后去調(diào)用自定義的一些方法。

5.2 指令傳參和傳值

我們使用v-bind、v-model等內(nèi)置指令時，都是可以傳參和傳值的，我們自定義指令也一樣。

示例代碼：

<template>
  <div id="app">
    <h2>窗口寬度：{{ innerWidth }}</h2>
    <h2>窗口高度：{{ innerHeight }}</h2>
    <div
      style="height: 300px; width: 80%; background: blue"
      v-resize:[args]="value"
    ></div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      innerHeight: window.innerHeight,
      innerWidth: window.innerWidth,
      args: "我是參數(shù)",
      value: "我是傳的值",
    };
  },
  components: {},
  directives: {
    resize: {
      bind(el, binding) {
        console.log("bind");
        console.log("值", binding.value);
        console.log("參數(shù)", binding.arg);
      },
    },
  },
};
</script>

效果如下：

args和value就是我們傳給指令的參數(shù)和值，需要注意的是value接收變量或者表達(dá)式，arg接收字符串或者變量，具體解釋可以參上參數(shù)詳解那一節(jié)。

5.3 指令簡寫

很多時候我們不需要用到自定義指令中的所有鉤子函數(shù)，常用的就那么幾個，所以官方給我們提供了一種簡寫的方式。

代碼如下：

resize(el, binding) {
   console.log("我是簡寫的自定義指令", binding.value);
},

上面代碼的寫法讓我們的指令變得很簡潔，上段代碼的意思就是把bind和update鉤子函數(shù)合二為一了，通常我們想要這兩個鉤子函數(shù)做同樣的事的時候使用。

6. 自定義指令使用場景

知道了自定義指令如何使用，我們可以擴(kuò)充一下使用場景，加深一下大家對自定義指令的理解。

6.1 v-copy

實現(xiàn)一鍵復(fù)制文本內(nèi)容，用于鼠標(biāo)右鍵粘貼。

6.2 v-longpress

實現(xiàn)長按，用戶需要按下并按住按鈕幾秒鐘，觸發(fā)相應(yīng)的事件。

6.3 v-debounce

防止按鈕在短時間內(nèi)被多次點擊，使用防抖函數(shù)限制規(guī)定時間內(nèi)只能點擊一次。

6.4 v-LazyLoad

實現(xiàn)一個圖片懶加載指令，只加載瀏覽器可見區(qū)域的圖片。

6.5 v-draggable

實現(xiàn)一個拖拽指令，可在頁面可視區(qū)域任意拖拽元素。

到此，關(guān)于“vue中的自定義指令如何使用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

分享標(biāo)題：vue中的自定義指令如何使用
網(wǎng)頁URL：http://jinyejixie.com/article26/ggidcg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設(shè)、面包屑導(dǎo)航、響應(yīng)式網(wǎng)站、標(biāo)簽優(yōu)化、網(wǎng)站制作、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)