vue:自定义指令的使用

几种定义方式

1. 全局指令，写在main.js文件中
2. 局部指令，写在组件或页面的vue实例中
3. 从架构层面抽离出一个directive文件，用于存放自定义指令

具体定义方式

1.全局指令

将指令写在main.js文件中，指令就会在全局生效，具体实现方法：
main.js文件

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

// 写在main.js中全局生效
Vue.directive('red', {// red是我们的自定义指令名称，使用v-red即调用该指令
   bind: function (el) {// 指令第一次绑定到元素时调用
    el.style.color = 'red'
  },
  updata: function (el) {// 所在组件的 VNode 更新时调用
    el.style.color = 'red'
  }
})

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

返回
顶部👆

2.局部指令

将指令写在组件或页面vue实例的directives属性中，即可设置为私有指令，仅在该组件或页面中生效，具体实现方法：

<template>
  <div class="about">
    <h1 v-red>This is an about page</h1>
    <h1 v-pink>This is an about page</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  directives: {
    pink: {
      bind: function(el, binding) {
        el.style.color = "pink";
      },
      update: function(el, binding) {
        el.style.color = "pink";
      }
    }
  }
};
</script>

返回
顶部👆

3.抽离出一个directive文件，用于存放项目的自定义指令

为什么要单独建一个文件来存放指令
在一个前端项目中为了架构清晰，同时也为了更好的维护，我们通常会抽离出一个directive文件，用来存放自定义指令。

定义

在directive文件中定义的一个指令

export default ((Vue) => {
    Vue.directive('green', function (el, binding) {
        el.style.color = 'green'
    })
})

这样我们就可以将指令引入到main.js中，作为全局指令；也可以引用在vue实例中，作为私有指令
返回
顶部👆

引用

1. 引用到main.js中，作为全局指令
   （其实引用在main.js和引用在实力中写法是一样的，需要注意的是，如果引用在vue实例中要单独再引入一下Vue）

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

import blue from '@/directive/blue' // 1.导入写好的指令
Vue.use(blue); // 2.安装这个指令 然后使用这个全局指令了

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

2. 引用到vue实例中，作为私有指令
   引用到vue实例时一定要引入Vue

<template>
  <div class="about">
    <h1 v-green>This is an about page</h1>
  </div>
</template>

<script>
import Vue from "vue"; // 需要重新引入Vue
import green from "@/directive/green";
Vue.use(green);

export default {
  data() {
    return {};
  }
};
</script>

返回
顶部👆

怎么调用

在将自定义的指令名称前加上v-前缀就可以调用了。
前面已经分别写了 red和blue两个指令，这里我们给指令加上v-前缀，就可以使用了。

<template>
  <div class="about">
    <h1 v-red>This is an about page</h1>
    <h1 v-blue>This is an about page</h1>
  </div>
</template>

返回
顶部👆

自定义指令的函数简写

更多时候我们的某个指令会只关心bind和update时触发相同行为，而不关心其它的钩子。就可以这样写：

export default ((Vue) => {
    Vue.directive('green', function (el, binding) {
        el.style.color = 'green'
    })
})

返回
顶部👆

自定义指令的钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。
• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
• unbind：只调用一次，指令与元素解绑时调用。

钩子函数的参数

钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。
指令钩子函数会被传入以下参数：

• el：指令所绑定的元素，可以用来直接操作 DOM 。
• binding：一个对象，包含以下属性：
  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 钩子中可用。

除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

带参数的自定义指令实例

<template>
  <div>
    <div>
      {{value}}的平方为：
      <span v-operation='value'></span>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import operation from "@/directive/operation.js";
Vue.use(operation);

export default {
  data() {
    return {
      value: 2
    };
  }
};
</script>

<style lang="scss" scoped>
</style>

/* 
    将文本值置为值平方
*/
export default ((Vue) => {
    Vue.directive('operation',function (el,binding) {
        el.textContent= Math.pow(binding.value,2)
    })
})

结果：

自定义指令的使用场景

这个功能没有复杂到用一个组件去做这件事情，比如给一个单向的数据过来，对这个数据做很多处理，他没有上升到很复杂的一个过程，但是又不是一个表达式能解决的，这时候自定义指令就是非常合适的。

结尾

我是圆圆，如果我的文章对你的学习成长有所帮助，欢迎 点 赞 👍 支持，您的 点 赞 👍 支持是我进行创作和分享的动力！

如果有问题可以留言评论或者私信我，我都会一一解答~笔芯🤞