Vue基础——自定义指令

Vue自定义指令

---

前言

初学Vue基础，大家都学会了vue的一些基础指令，有v-model、v-show、v-if、v-for等，其实除了这些指令，我们还可以实现自定义指令。如果想对DOM元素进行底层操作，可以通过自定义组件来完成

---

一、自定义指令的分类？

自定义局部指令：在opyions api选项中的directives中设置

自定义全局指令：在app的directive方法

二、实现方法(input框聚焦案例)

1.普通实现

代码如下（示例）：

<template>
  <input ref="myInput" type="text">
</template>
 
<script>
export default {
  mounted() {
    this.$refs.myInput.focus(); //通过ref获取元素节点然后实现聚焦
  }
}
</script>

2.自定义局部指令

代码如下（示例）：

<template>
  <input v-focus type="text">
</template>
 
<script>
export default {
  directives:{
      focus:{
          mounted(el){
              el.focus();
          }
      }
  }
}
</script>

通过directives这个api实现

3.自定义全局指令

代码如下（示例）：

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


// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
Vue.config.productionTip = false

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


//使用
<input v-focus></input> 

三、指令的生命周期及参数

1.生命周期

created：在绑定元素的attribute或者事件监听器之前被使用
beforeMount：当指令第一次绑定元素，并且挂载父组件之前被使用。
mounted：在绑定元素的组件被挂载后调用。
beforeUpdate：在指令绑定的组件更新其Vnode之前被调用
updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用
beforeUnmount：在卸载绑定元素的父组件之前调用
unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次。

2.参数

el：表示当前的元素
binding：可以从中取出一些参数的内容，包含以下属性：

• name：指令名，不包含v-前缀
• value：指令的绑定值
• oldValue：指令绑定的前一个值，仅在updata和componentUpdated钩子中可用，无论值是否改变都可用
• expression：绑定值的表达式或变量名
• arg：传给指令的参数
• modifiers：包含修饰符的对象

vnode：可以获取当前的vnode节点。
preVnode：可以获取之前的vnode节点。

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

四、批量注册指令

在src新建directives/index.js文件

import copy from './copy'
import longpress from './longpress'
// 自定义指令
const directives = {
  copy,
  longpress,
}
 
export default {
  install(Vue) {
    Object.keys(directives).forEach((key) => {
      Vue.directive(key, directives[key])
    })
  },
}

在main.js中：

import Vue from 'vue'
import Directives from './JS/directives'
Vue.use(Directives)

---

总结

自定义指令有局部和全局，局部在组件用directive注册，directive与data同级。全局则在main.js中注册，使用Vue.directive()命令注册。directive有7个生命周期和4个参数。其中binding有6个参数。