vue 自定义指令如何使用和应用场景

作用：

是用来操作DOM的。尽管Vue推崇数据驱动视图的理念，但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展，不仅可用于定义任何的DOM操作，并且是可复用的。

自定义指令编写的方式有2种
            1、全局自定义指令
                全局的指令必须要在实例化之前进行定义

                Vue.directive(参数1,参数2)
                参数1: 指令的名称
                参数2: 指令实现的函数
                    参数1: el 指令作用的元素
                    参数2: 对象 {modifiers:修饰符 value:表达式的结果}

            2、局部自定义指令
                在vue中添加一个熟悉 directives key值是指令名称  value是指令实现的函数

指令定义函数提供了几个钩子函数

(1) bind：只调用一次，指令第一次绑定到元素时调用

(2) inserted：被绑定元素插入父节点时调用

(3) update：所在组件的虚拟节点更新时调用

(4) componentUpdated：所在组件的虚拟节点及子虚拟节点全部更新后调用

(5) unbind：只调用一次，指令与元素解绑时调用

钩子函数参数

（el）

指令所绑定的元素，可以用来直接操作 DOM。

(binding)

一个对象

使用自定义指令背景

代码复用和抽象的主要形式是组件。
当需要对普通 DOM 元素进行底层操作，此时就会用到自定义指令
但是，对于大幅度的 DOM 变动，还是应该使用组件

常用案例

1、 输入框自动聚焦

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

2 、下拉菜单

点击下拉菜单本身不会隐藏菜单
点击下拉菜单以外的区域隐藏菜单

Vue.directive('clickoutside', {
  bind(el, binding) {
    function documentHandler(e) {
      if (el.contains(e.target)) {
       return false 
      }
      
      if (binding.expression) {
        binding.value(e)
      }
    }
    
    el.__vueMenuHandler__ = documentHandler
    document.addEventListener('click', el.__vueMenuHandler__)
  },
  unbind(el) {
    document.removeEventListener('click', el.__vueMenuHandler__)
    delete el.__vueMenuHandler__
  }
})

new Vue({
  el: '#app',
  data: {
    show: false
  },
  methods: {
    handleHide() {
      this.show = false
    }
  }
})
<div class="main" v-menu="handleHide">
  <button @click="show = !show">点击显示下拉菜单</button>
  <div class="dropdown" v-show="show">
    <div class="item"><a href="#">选项 1</a></div>
    <div class="item"><a href="#">选项 2</a></div>
    <div class="item"><a href="#">选项 3</a></div>
  </div>
</div>

3. 相对时间转换

类似微博、朋友圈发布动态后的相对时间，比如刚刚、两分钟前等等

<span v-relativeTime="time"></span>
new Vue({
  el: '#app',
  data: {
    time: 1565753400000
  }
})

Vue.directive('relativeTime', {
  bind(el, binding) {
    // Time.getFormatTime() 方法，自行补充
    el.innerHTML = Time.getFormatTime(binding.value)
    el.__timeout__ = setInterval(() => {
      el.innerHTML = Time.getFormatTime(binding.value)
    }, 6000)
  },
  unbind(el) {
    clearInterval(el.innerHTML)
    delete el.__timeout__
  }
})