Vue.js源码分析之自定义指令详解

什么是自定义指令？

在使用Vue.js开发过程中，我们可以使用内置的指令来处理DOM元素。例如v-show, v-if, v-for等指令，它们都能让我们在DOM节点上添加一些行为。除了这些内置指令，Vue.js还支持自定义指令来扩展DOM行为。

自定义指令的语法

在Vue.js中，自定义指令需要使用Vue.directive()方法来注册。

Vue.directive('directive-name', {
  bind: function (el, binding, vnode) {
    // 指令绑定到元素上时所触发的函数
  },
  inserted: function (el, binding, vnode) {
    // 指令插入到元素后时所触发的函数
  },
  update: function (el, binding, vnode, oldVnode) {
    // 元素更新时所触发的函数
  },
  unbind: function (el, binding, vnode) {
    // 指令从元素上解绑时所触发的函数
  }
})

其中，directive-name为自定义指令的名称，其它选项中包含了指令的生命周期函数。binding参数包含了指令的信息，例如value属性表示绑定值，name属性表示指令名称。

自定义指令的示例

示例1：自定义指令实现聚焦输入框

在Vue.js中，我们通常需要在页面加载之后让某个输入框自动聚焦，可以使用以下指令来实现：

Vue.directive('focus', {
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

在页面中只需要简单的使用v-focus即可使用该指令：

<input v-focus>

这样就可以在页面加载后自动让输入框聚焦。

示例2：自定义指令实现拖放排序

以下是使用自定义指令实现的拖放排序效果：

Vue.directive('sortable', {
  inserted: function (el, binding) {
    let dragableItem = null
    let handleDragOver = function (e) {
      if (e.preventDefault) {
        e.preventDefault()
      }
      e.dataTransfer.dropEffect = 'move'
      return false
    }
    let handleDragEnd = function () {
      if (dragableItem) {
        dragableItem.style.backgroundColor = ''
        dragableItem.removeAttribute('data-dragable')
        dragableItem = null
      }
    }
    let handleDragStart = function (e) {
      dragableItem = e.target
      dragableItem.style.backgroundColor = 'lightgray'
      e.dataTransfer.effectAllowed = 'move'
      e.dataTransfer.setData('text/html', dragableItem.innerHTML)
      dragableItem.setAttribute('data-dragable', true)
    }
    let handleDrop = function (e) {
      if (e.stopPropagation) {
        e.stopPropagation()
      }
      if (dragableItem && dragableItem !== this) {
        dragableItem.innerHTML = this.innerHTML
        this.innerHTML = e.dataTransfer.getData('text/html')
      }
      return false
    }
    el.setAttribute('data-sortable', true)
    el.addEventListener('dragover', handleDragOver, false)
    el.addEventListener('dragend', handleDragEnd, false)
    el.addEventListener('dragstart', handleDragStart, false)
    el.addEventListener('drop', handleDrop, false)
  },
  unbind: function (el) {
    el.removeAttribute('data-sortable')
    el.removeEventListener('dragover', handleDragOver, false)
    el.removeEventListener('dragend', handleDragEnd, false)
    el.removeEventListener('dragstart', handleDragStart, false)
    el.removeEventListener('drop', handleDrop, false)
  }
})

该指令实现了拖放排序功能，并包含了一些事件来处理拖放过程，如handleDragEnd函数用于将元素的背景颜色调回原来的颜色，handleDrop函数用于当元素被拖放到其他元素上时触发，并使用innerHTML交换了两个元素的内容。

使用该指令只需要将v-sortable添加到需要拖放排序的元素上即可：

<ul v-sortable>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

这样就可以在页面中使用自定义指令实现拖放排序的功能了。