Vue.js
Пользовательские директивы
Поиск…
Синтаксис
-
Vue.directive(id, definition);
-
Vue.directive(id, update); //when you need only the update function.
параметры
параметр | подробности |
---|---|
id | String - идентификатор директивы, который будет использоваться без префикса v- . (Добавьте префикс v- при его использовании) |
definition | Объект. Объект определения может предоставлять несколько функций перехвата (все необязательные): bind , update и unbind |
основы
Помимо стандартного набора директив, поставляемых в ядре, 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"
})