Введение

Помимо встроенных директив (таких как v-model и v-show), Vue позволяет использовать ваши собственные. При этом важно понимать, что основным механизмом создания повторно используемого кода во Vue 2.0 всё-таки являются компоненты. Тем не менее, для выполнения низкоуровневых операций с DOM пользовательские директивы могут очень пригодиться. В качестве примера реализуем фокус на элементе input:

После загрузки страницы этот элемент получает фокус ввода (примечание: autofocus не работает на мобильном Safari). Рассмотрим директиву подробнее:

// Регистрируем глобальную пользовательскую директиву `v-focus`
Vue.directive('focus', {
  // Когда привязанный элемент вставлен в DOM...
  inserted: function (el) {
    // Переключаем фокус на элемент
    el.focus()
  }
})

Чтобы зарегистрировать директиву локально, можно передать опцию directives при определении компонента:

directives: {
  focus: {
    // определение директивы
    inserted: function (el) {
      el.focus()
    }
  }
}

Теперь в шаблонах можно использовать новый атрибут v-focus:

<input v-focus>