Пользовательские директивы

Введение

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

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

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

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

directives: {
focus: {
// определение директивы
}
}

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

<input v-focus>

Хуки

Для жизненного цикла директивы можно указать следующие хуки (все они опциональны):

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

Аргументы хуков

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

Все аргументы кроме el следует понимать как только для чтения и никогда не изменять их. В случае необходимости передать информацию между хуками рекомендуем воспользоваться dataset.

Пример пользовательской директивы, использующей некоторые из описанных возможностей:

<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
Vue.directive('demo', {
bind: function (el, binding, vnode) {
var s = JSON.stringify
el.innerHTML =
'name: ' + s(binding.name) + '<br>' +
'value: ' + s(binding.value) + '<br>' +
'expression: ' + s(binding.expression) + '<br>' +
'argument: ' + s(binding.arg) + '<br>' +
'modifiers: ' + s(binding.modifiers) + '<br>' +
'vnode keys: ' + Object.keys(vnode).join(', ')
}
})
new Vue({
el: '#hook-arguments-example',
data: {
message: 'hello!'
}
})

Сокращённая запись

Часто нам может потребоваться одинаковое поведение на bind и update, а остальные хуки не нужны. В таком случае можно использовать сокращённую запись:

Vue.directive('color-swatch', function (el, binding) {
el.style.backgroundColor = binding.value
})

Передача объекта данных в директиву

В случае, если директива должна принимать несколько параметров, можно указать объект JavaScript — годится любое валидное выражение, помните?

<div v-demo="{ color: 'white', text: 'hello!' }"></div>
Vue.directive('demo', function (el, binding) {
console.log(binding.value.color) // => "white"
console.log(binding.value.text) // => "hello!"
})