Vue поддерживает как встроенные директивы, так и пользовательские. Директива -- это обычный JavaScript-объект, имеющий определенные методы, которые изменяют DOM и которые Vue вызывает в определенные моменты времени.

Жизненный цикл директивы (хуки)

======================

Рассмотрим список этих методов (хуков):

1. bind: вызывается однократно, при первичном связывании директивы с элементом. Здесь можно поместить код инициализации.
2. inserted: вызывается после вставки связанного элемента внутрь элемента родителя (заметьте, что сам родитель может на этот момент и не принадлежать ещё основному дереву элементов).
3. update: вызывается после обновления VNode компонента-контейнера, но, возможно, до обновления дочерних элементов. Значение директивы к этому моменту может измениться, а может и нет. Сравнивая текущее и прошлое значения, вы можете избежать избыточных операций (см. ниже об аргументах хуков).
4. componentUpdated: вызывается после обновления как VNode компонента-контейнера, так и VNode его потомков.
5. unbind: вызывается однократно, при отвязывании директивы от элемента.

В следующем разделе мы рассмотрим аргументы, передаваемые в эти хуки (а именно: el, binding, vnode и oldVnode).

Параметры хуков

===========

В хуки передаются следующие параметры:

• el: Элемент, к которому привязана директива. Можно использовать для прямых манипуляций с DOM.
• binding: Объект, содержащий следующие свойства:
• name: Название директивы, без указания префикса v-.
• value: Значение, переданное в директиву. Например, для v-my-directive="1 + 1" значением будет 2.
• oldValue: Предыдущее переданное в директиву значение. Доступно только для хуков update и componentUpdated, и передаётся независимо от того, произошло ли в действительности его изменение.
• expression: Выражение-строка, переданное в директиву. Например, для v-my-directive="1 + 1" это будет "1 + 1".
• arg: Аргумент, переданный в директиву, в случае его наличия. Например, для v-my-directive:foo это будет "foo".
• modifiers: Объект, содержащий модификаторы, если они есть. Например, для v-my-directive.foo.bar, объектом модификаторов будет { foo: true, bar: true }.
• vnode: Виртуальный элемент, созданный компилятором Vue. См. VNode API для подробностей.
• oldVnode: Предыдущий виртуальный элемент, доступный только для хуков update и componentUpdated.

Все аргументы, кроме el, следует понимать как только для чтения и никогда не изменять их.

Глобальная и локальная регистрация директив

==============================

Глобальная регистрация:

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

Локальная регистрация (внутри определения компонента):

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

Использование (к имени директивы при использовании нужно добавлять префикс v-):

<input v-focus>

Пример -- самописный аналог директивы v-on:

===========================================

<template>

<div class="container">

<div class="row">

<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">

<h1>Directives Exercise</h1>

<button v-my-on:click="onClick">Click me!</button>

</div>

</div>

</div>

</template>

<script>

export default {

methods: {

onClick() {

alert('clicked!');

}

},

directives: {

'my-on': {

bind(el, binding, vnode) {

el.addEventListener(binding.arg, binding.value)

}

}

}

}

</script>

<style>

</style>