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

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

1. 什么是自定義指令？

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

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

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

比如我們看面的代碼：

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

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

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

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

搭建命令：

vue create 項(xiàng)目名稱

運(yùn)行起來：

3. 如何注冊(cè)自定義指令？

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

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

3.1 全局注冊(cè)

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

Vue提供了一個(gè)directive方法給我們注冊(cè)自定義指令，我們?cè)趍ain.js中注冊(cè)一個(gè)全局的自定義指令。

代碼如下：

// 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方法來注冊(cè)全局的自定義指令，該方法接收兩個(gè)參數(shù)：指令名稱、包含指令鉤子函數(shù)的對(duì)象。

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

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

3.2 局部注冊(cè)

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

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

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

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

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

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

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

4.1 鉤子函數(shù)介紹

bind：

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

inserted：

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

update：

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

componentUpdated：

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

unbind：

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

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

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

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

el：

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

binding：

一個(gè)對(duì)象，包含以下屬性：

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

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

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

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

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

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

vnode：

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

oldVnode：

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

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

5. 簡(jiǎn)單案列實(shí)戰(zhàn)

上面兩節(jié)介紹了如何注冊(cè)自定義指令以及相關(guān)參數(shù)，接下來就該實(shí)戰(zhàn)了，我們?cè)贏PPVue中定義一個(gè)自定義指令，先來驗(yàn)證一下鉤子函數(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)我們刷新頁(yè)面時(shí)，執(zhí)行了自定義指令中的bind和inserted鉤子函數(shù)，其余函數(shù)均要元素有更新才會(huì)執(zhí)行。

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

需求背景：

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

需求描述：

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

代碼實(shí)現(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)我們更改瀏覽器窗口大小時(shí)，頁(yè)面上會(huì)實(shí)時(shí)打印出最新的高度和寬度，當(dāng)然這兒只是一個(gè)最簡(jiǎn)單的案例，實(shí)際項(xiàng)目中我們通常會(huì)在窗口大小發(fā)生變化后去調(diào)用自定義的一些方法。

5.2 指令傳參和傳值

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

示例代碼：

<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 指令簡(jiǎn)寫

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

代碼如下：

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

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

6. 自定義指令使用場(chǎng)景

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

6.1 v-copy

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

6.2 v-longpress

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

6.3 v-debounce

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

6.4 v-LazyLoad

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

6.5 v-draggable

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

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

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

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

廣告

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