Как написать кастомную директивы

В Vue.js кастомные директивы позволяют добавлять пользовательское поведение DOM-элементам. Они создаются с помощью Vue.directive() или в опциях компонента через directives.

Пример глобальной директивы, которая фокусирует элемент:

Vue.directive('focus', {
  inserted: function (el) {
    el.focus()
  }
})

Локальная директива в компоненте:

directives: {
  highlight: {
    bind(el, binding) {
      el.style.backgroundColor = binding.value || 'yellow'
    }
  }
}

Основные хуки директив:

• bind - вызывается один раз при привязке
• inserted - элемент вставлен в DOM
• update - вызывается при обновлении родительского компонента
• componentUpdated - после обновления дочерних компонентов
• unbind - при удалении элемента

Пример с аргументами и модификаторами:

Vue.directive('pin', {
  bind: function (el, binding) {
    el.style.position = 'fixed'
    if (binding.arg === 'left') {
      el.style.left = binding.value + 'px'
    } else {
      el.style.top = binding.value + 'px'
    }
  }
})