vue 自定义指令总结

一、定义语法

（1）、局部指令：

.... 
methods: {},
directives: {
    // 局部指令写法一
    big(el, binding) { 
      // el 被绑定的元素
      // binding 被绑定的对象值
      console.log(el, binding)
    },
    // 局部指令写法二
    bigs: {
      // 配置对象
      bind(el, binding) { }, // 指令与元素成功绑定时调用
      inserted(el, binding) { }, // 指令所在元素被插入页面时调用
      update(el, binding) { } // 指令所在模板结构被更新时调用
    }
  }
....

(2)、全局指令

// 写法一
Vue.directive("big", (el, binding) => { 

})
// 写法二
Vue.directive("bigs", {
  bind(el, binding) { },
  inserted(el, binding) { }, 
  update(el, binding) { } 
})

备注：

1、指令定义时不加v-，但是使用时要加v-；如v-big

2、指令名如果是多个单词，要使用kebab-case命名方式，不要用cameCase命名