自定义指令

1注册全局指令

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

2注册局部指令

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

3使用

<input v-focus>

 

4参数意义

1、钩子
// 只调用一次 指令第一次绑定到元素时触发
bind(el, binding, vnode, oldvnode) {}
// 被绑定元素插入到父节点时调用
inserted(el, binding, vnode, oldvnode) {}
// 组件所在的VNode更新时触发，
update(el, binding, vnode, oldvnode) {}
// 指令所在组件的VNode及其子VNode 更新之后触发
componentUpdated(el, binding, vnode, oldvnode) {}
// 只调用一次 指定与元素解绑时触发
unbind(el, bingding, vnode, oldvnode) {}
2、参数
el 指的是所绑定的Dom元素
el.dataset 指的是元素自定义的参数值，可以修改，可以用来和上面的钩子函数之前传递信息

bingding 是一个对象
name: 去掉"v-"及后缀后的名称
rawName: 自定义的全部名称
express: 是个字符串，展示指令绑定的值value
value: 指令绑定的值
arg: 传给指令的参数，如果没有传给指令参数则不会出现此参数

 

 

5自定义指令实现权限控制

 

checkArray()方法是检测指令传值是否有权限