注冊(cè)全局指令

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

import Vue from 'vue'
// 注冊(cè)全局指令
Vue.directive("resize", {
  bind() {},
  inserted() {},
  update() {},
  componentUpdated() {},
  unbind() {},
});

new Vue({
  render: h => h(App)
}).$mount('#app')

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

接收兩個(gè)參數(shù)：指令名稱、包含指令鉤子函數(shù)的對(duì)象。

注冊(cè)局部指令

Vue提供了一個(gè)directives方法給我們注冊(cè)自定義指令，注冊(cè)局部自定義指令

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

<script>
export default {
  directives: {
    resize: {
      bind() {
        console.log("hu初始化");
      },
      inserted() {
        console.log("元素被插入到父節(jié)點(diǎn)");
      },
      update() {},
      componentUpdated() {},
      unbind() {},
    },
  },
};
</script>

*注意點(diǎn)：directive是注冊(cè)全局 directives是注冊(cè)局部

批量注冊(cè)指令

src目錄下新建utils文件夾，然后建兩個(gè)文件名字自取
1、tools.js 用于寫自定義的指令

const resize = {
  bind() {
    console.log("resize初始化")
  },
  inserted() {
    console.log("元素被插入到父節(jié)點(diǎn)")
  },
  update() {},
  componentUpdated() {},
  unbind() {},
}

const copy = {
    bind() {
      console.log("copy初始化")
    },
    inserted() {
      console.log("元素被插入到父節(jié)點(diǎn)")
    },
    update() {},
    componentUpdated() {},
    unbind() {},
  }

export { resize, copy }

2、directives.js 用于批量注冊(cè)指令

// 自定義指令
import * as directives from './tools'

// 批量注冊(cè)指令
export default {
    install(Vue) {
        Object.keys(directives).forEach((key) => {
            Vue.directive(key, directives[key])
        })
    }
}

3、main.js 中引入

import Directives from './utils/directives'
Vue.use(Directives)

4、頁面上使用

<img alt="Vue logo" src="./assets/logo.png" v-resize />
<img alt="Vue logo" src="./assets/logo.png" v-copy />

5、效果

效果

自定義指令生命周期

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)用。

鉤子函數(shù)順序：
指令綁定到元素時(shí)（bind）
元素插入時(shí)（inserted）
組件更新時(shí)（update）
組件更新后（componentUpdated）
指令與元素解綁時(shí)（unbind）

生命周期參數(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鉤子中可用。

el和binding參數(shù)是我們使用得最頻繁的

自定義指令傳參和傳值

<template>
    <div
      style="height: 300px; width: 80%; background: blue"
      v-resize:[args]="value"
    ></div>
</template>

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

v-resize:[args]="value"
1、:[args(寫變量名)]
2、value是要傳的值
3、expression和arg要區(qū)分開 expression是傳字符串 arg是傳變量

場(chǎng)景

復(fù)制、縮放、拖拽等都可以使用自定義指令。