Vue自定义指令的使用

除了核心功能默认内置的指令 ( 和 )，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。三、自定义指令的钩子函数直接取自Vue官网，因为自己说不了那么细（Vue官网-自定义指令）可以通过value和arg进行数据的传递，达到动态的效果...

勇敢小陈

4416人浏览 · 2022-06-23 13:55:36

勇敢小陈 · 2022-06-23 13:55:36 发布

一、什么是自定义指令

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

二、自定义指令简单实例（取自Vue官网）

//设置自定义指令
import Vue from 'vue'
Vue.directive('focus', {
    // 当被绑定的元素插入到 DOM 中时……
    inserted: function (el) {
      // 聚焦元素
      el.focus()
    }
  })
//在main.js中引入
import '@/utlis/focus'
//在组件中使用
<input type="text" name="" id="" v-focus>

三、自定义指令的钩子函数

直接取自Vue官网，因为自己说不了那么细（Vue官网-自定义指令）

四、钩子函数参数

可以通过value和arg进行数据的传递，达到动态的效果

传递value ：v-num='1'
接收值 ：bind: function (el, binding, vnode) {
    el.style.position = 'fixed'
    el.style.top = binding.value + 'px'
  }
传递mrg:v-pin:[direction]="200"
接收值：bind: function (el, binding, vnode) {
    el.style.position = 'fixed'
    var s = (binding.arg == 'left' ? 'left' : 'top')
    el.style[s] = binding.value + 'px'
  }