93.描述一下vue的自定义指令

84 阅读1分钟

需要对普通的DOM元素进行底层操作,就需要用到自定义指令

尽量只操作DOM展示,不修改内部的值

  1. 全局定义 Vue.directive('focus',{})
  2. 局部定义 directives:{focus:{}}

钩子函数:

  1. bind 绑定,只调用一次
  2. inserted 插入父节点时调用
  3. update 所在组件更新
  4. componentupdate 所有更新
  5. unbind 解绑,只调用一次

案例:

  • 鼠标聚焦
  • 下拉菜单
  • 相对时间转换
  • 滚动动画
  • 自定义指令实现图片懒加载
  • 自定义指令控制按钮权限