MyTetra Share
Делитесь знаниями!
Пользовательские директивы в Vue
24.02.2018
12:02
Автор: br0ke
Текстовые метки: javascript, js, vue, vuejs, vue.js, v-, directives, directive, custom directive, custom, arg, value, modifiers
Раздел: Информационные технологии - JavaScript - Vue

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>



Так же в этом разделе:
 
MyTetra Share v.0.52
Яндекс индекс цитирования