# Кастомные директивы в Vue

06:25
poster
В этом уроке мы с вами разберем, как создавать и регистрировать кастомные директивы в Vue.
Понравилось? Поделитесь с друзьями!
Понравилось?
Поделитесь с друзьями!
Комментарии
Текст видео

В этом уроке мы с вами разберем, как создавать и регистрировать кастомные директивы в Vue.

Но сначала мы должны прояснить один важный момент. Когда мы должны писать компонент, а когда директиву. В 90% случаев мы хотим создавать компонент. Когда нам нужен реюзабельный виджет мы делаем компонент. Если мы хотим передавать на вход разные данные в разных местах, то мы создаем компонент.

Поэтому эта тема сводится к вопросу "Когда нам нужно писать кастомную директиву?".

  1. Когда мы хотим расширить функционал элемента, без того, чтобы делать DOM дерево глубже. Чтобы это понять, давайте посмотрим на стандартные директивы. Например, на директиву v-for. Она позволяет нам проходить по коллекции и рендерить ее. Но главный ее плюс это то, что она не делает DOM дерево глубже. Иначе нам бы было сложнее стайлить эти элементы. То есть например у вас есть css фреймворк, который работает с элементами в определенной вложенности. Если вы ее нарушите, то css не применится.
  2. Когда например у нас есть html тег с различной функциональностью. Например, элемент тригерит http запрос и имеет кастомный тултип. Так как это две абсолютно разные функциональности, то мы просто разносим их в 2 разные директивы, а не кладем в один компонент.

Теперь, когда мы понимаем, когда же нам нужны кастомные директивы, давайте попробуем их создать. Для этого их нужно регистрировать. Давайте добавим директиву success в main.js

main.js

Vue.directive('success', {
  bind (el) {
  }
})

Мы указали что хотим создать директиву success и вторым параметром передали обьект с проперти bind внутри. В случае с директивами bind - это хук. Хуки - это коллбеки, которые вызываются после какого-то евента. У директив есть 5 хуков, которые мы можем использовать:

  1. Bind - вызывается когда директива аттачится к элементу
  2. Inserted - когда элемент вставился в parent ноду
  3. Update - когда компонент был обновлен
  4. ComponentUpdated - когда компонент и все его дочерние элементы были обновлены
  5. Unbind - когда директива была удалена

Чаще всего из них используются 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
  }
})

Если мы посмотрим в браузер, то у нас применился и фон и цвет.

Если у вас возникли какие-то вопросы или комментарии, пишите их прямо под этим видео.

Только зарегистрированные пользователи могут оставлять комментарии.  Войдите, пожалуйста.
ivan
4 месяцев назад
А насколько уместно добавлять помимо хуков, кастомные методы, например в bind я хочу навесить события, а в unbind например отвязать их. Считается ли нормальным помимо хуков, например добавить какой-то хендлер при событии?
monsterlessons
4 месяцев назад
Конечно нормально. Вы можете манипулировать любыми событиями. Единственное, если навешиваете события на window или document не забывайте при отвязывать при дестрое или у вас будет memory leak.
ivan
4 месяцев назад
Спасибо за быстрый ответ
Олександр Новосилецький
5 месяцев назад
Дякую за вашу роботу! Ваші прогнози популярності Vue?)
monsterlessons
5 месяцев назад
На здоровье. Если вы ищете фрейморк в плане работы, то я по прежнему советую React и Angular 5. А как фреймворк он вполне неплох, и если вам нравится, то юзайте. В плане популярности он все еще далеко позади, но есть компании, которые его используют.
Alexandr Taldykin
5 месяцев назад
Спасибо за старания! Классные видео!
monsterlessons
5 месяцев назад
На здоровье)