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

Синтаксис

• Vue.directive(id, definition);
• Vue.directive(id, update); //when you need only the update function.

параметры

основы

Помимо стандартного набора директив, поставляемых в ядре, Vue.js также позволяет регистрировать пользовательские директивы. Пользовательские директивы предоставляют механизм для преобразования изменений данных в произвольное поведение DOM.

Вы можете зарегистрировать глобальную настраиваемую директиву с помощью Vue.directive(id, definition) , передавая идентификатор директивы, за которым следует объект определения. Вы также можете зарегистрировать локальную настраиваемую директиву, включив ее в параметр directives компонента.

Крюковые функции

• bind : вызов только один раз, когда директива сначала привязана к элементу.
• update : вызывается в первый раз сразу после bind с начальным значением, затем снова, когда изменяется значение привязки. В качестве аргумента представлены новое значение и предыдущее значение.
• unbind : вызов только один раз, когда директива не связана с элементом.

Vue.directive('my-directive', {
     bind: function () {
       // do preparation work
       // e.g. add event listeners or expensive stuff
       // that needs to be run only once
     },
     update: function (newValue, oldValue) {
       // do something based on the updated value
       // this will also be called for the initial value
     },
     unbind: function () {
       // do clean up work
       // e.g. remove event listeners added in bind()
     }    
})

После регистрации, вы можете использовать его в шаблонах Vue.js , как это ( не забудьте добавить v- префикс):

<div v-my-directive="someValue"></div>

Когда вам нужна только функция update , вы можете передать только одну функцию вместо объекта определения:

Vue.directive('my-directive', function (value) {
  // this function will be used as update()
})

Свойства экземпляра директивы

Все функции крючков будут скопированы в фактическую директиве объект, который вы можете получить доступ к этим функциям в качестве this контекста. Объект директивы предоставляет некоторые полезные свойства:

• el : элемент, к которому привязана директива.
• vm : контекст ViewModel, которому принадлежит эта директива.
• выражение : выражение привязки, исключая аргументы и фильтры.
• arg : аргумент, если он присутствует.
• name : имя директивы, без префикса.
• модификаторы : объект, содержащий модификаторы, если они есть.
• дескриптор : объект, содержащий результат синтаксического анализа всей директивы.
• params : объект, содержащий атрибуты param. Разъясняется ниже.

Вы должны рассматривать все эти свойства как доступные только для чтения и никогда не изменять их. Вы также можете прикреплять настраиваемые свойства к объекту директивы, но будьте осторожны, чтобы случайно не перезаписать существующие внутренние.

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

HTML

<div id="demo" v-demo:hello.a.b="msg"></div>

JavaScript

Vue.directive('demo', {
  bind: function () {
    console.log('demo bound!')
  },
  update: function (value) {
    this.el.innerHTML =
      'name - '       + this.name + '<br>' +
      'expression - ' + this.expression + '<br>' +
      'argument - '   + this.arg + '<br>' +
      'modifiers - '  + JSON.stringify(this.modifiers) + '<br>' +
      'value - '      + value
  }
})
var demo = new Vue({
  el: '#demo',
  data: {
    msg: 'hello!'
  }
})

Результат

name - demo
expression - msg
argument - hello
modifiers - {"b":true,"a":true}
value - hello!

Объект Literal

Если ваша директива требует нескольких значений, вы также можете передать литерал объекта JavaScript. Помните, что директивы могут принимать любое допустимое выражение JavaScript:

HTML

<div v-demo="{ color: 'white', text: 'hello!' }"></div>

JavaScript

Vue.directive('demo', function (value) {
  console.log(value.color) // "white"
  console.log(value.text) // "hello!"
})

Литературный модификатор

Когда директива используется с модификатором literal, ее значение атрибута будет интерпретироваться как простая строка и передаваться непосредственно в метод update . Метод update также будет вызываться только один раз, потому что простая строка не может быть реактивной.

HTML

<div v-demo.literal="foo bar baz">

JavaScript

Vue.directive('demo', function (value) {
  console.log(value) // "foo bar baz"
})