В этом уроке мы с вами разберем, как создавать и регистрировать кастомные директивы в Vue.
Но сначала мы должны прояснить один важный момент. Когда мы должны писать компонент, а когда директиву. В 90% случаев мы хотим создавать компонент. Когда нам нужен реюзабельный виджет мы делаем компонент. Если мы хотим передавать на вход разные данные в разных местах, то мы создаем компонент.
Поэтому эта тема сводится к вопросу "Когда нам нужно писать кастомную директиву?".
Теперь, когда мы понимаем, когда же нам нужны кастомные директивы, давайте попробуем их создать. Для этого их нужно регистрировать. Давайте добавим директиву success в main.js
main.js
Vue.directive('success', {
bind (el) {
}
})
Мы указали что хотим создать директиву success и вторым параметром передали обьект с проперти bind внутри. В случае с директивами bind - это хук. Хуки - это коллбеки, которые вызываются после какого-то евента. У директив есть 5 хуков, которые мы можем использовать:
Чаще всего из них используются bind и update хуки.
Соответственно, сейчас мы можем написать какой-то код внутри bind и он выполнится, когда директива прикрепится к элементу. Давайте наша директива будет менять цвет элемента на зеленый. Первым аргументом метода bind является сам элемент. Это нативный DOM и мы можем легко поменять его цвет.
main.js
bind(el) {
el.style.color = 'green'
}
С помощью Vue.directive мы зарегистрировали нашу директиву глобально. Поэтому нам достаточно использовать ее на любом элементе, чтобы применить.
App.vue
<div v-success>Hi directives</div>
Как вы видите, для вызова директивы мы дописываем префикс v к названию.
Но что, если мы хотим указать какой-то другой цвет? Было бы хорошо, если бы мы могли прокидывать цвет в директиву. Мы можем сделать это с помощью второго аргумента директивы. Он называется binding и содержить много полезный пропертей. Но на данный момент нас интересует только проперти value. Все, что мы прокинем в директиву при вызове будет внутри binding.valie.
main.js
bind(el, binding) {
el.style.color = binding.value
}
App.vue
<div v-success="'orange'">Hi directives</div>
Как вы видите, мы прокинули в директиву строку orange и теперь у нас применился оранжевый цвет. Не забываем оборачивать orange в кавычки, так как мы передаем на вход строку, а не переменную.
Но что, если мы хотим передать в директиву больше, чем один параметр? В этом случае мы можем передать параметры как обьект.
App.vue
<div v-success="{color: 'red', background: 'green'}">Hi directives</div>
Мы прокинули цвет и фон в нашу директиву. Теперь нам нужно немного изменить то, как мы ее используем.
main.js
Vue.directive('success', {
bind(el, binding) {
el.style.color = binding.value.color
el.style.background = binding.value.background
}
})
Если мы посмотрим в браузер, то у нас применился и фон и цвет.
Если у вас возникли какие-то вопросы или комментарии, пишите их прямо под этим видео.