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

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
  }
})

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

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

Только зарегистрированные пользователи могут оставлять комментарии.  Войдите, пожалуйста.
Станислав Викторович
5 лет назад
Самая адекватная, понятная и полная статья по кастомным директивам, автору респект и "пiшы_йесчо"! )
ivan
6 лет назад
А насколько уместно добавлять помимо хуков, кастомные методы, например в bind я хочу навесить события, а в unbind например отвязать их. Считается ли нормальным помимо хуков, например добавить какой-то хендлер при событии?
monsterlessons
6 лет назад
Конечно нормально. Вы можете манипулировать любыми событиями. Единственное, если навешиваете события на window или document не забывайте при отвязывать при дестрое или у вас будет memory leak.
ivan
6 лет назад
Спасибо за быстрый ответ
Олександр Новосилецький
6 лет назад
Дякую за вашу роботу! Ваші прогнози популярності Vue?)
monsterlessons
6 лет назад
На здоровье. Если вы ищете фрейморк в плане работы, то я по прежнему советую React и Angular 5. А как фреймворк он вполне неплох, и если вам нравится, то юзайте. В плане популярности он все еще далеко позади, но есть компании, которые его используют.
Sendoo
5 лет назад
А состоянием на сегодня что скажете?) Vue окреп за год прилично, имхо И да, спасибо за уроки, реально как видеосправочник. По делу, без воды :)
monsterlessons
5 лет назад
Не знаю в чем он окреп, но особо много вакансий на нем нет. 70% реакт, 30% ангуляр. Больше ничего нет на рынке. Ну разве что старые AngularJS проекты мигрировать/саппортить. Вью особо не развивается, а планируемая версия 3.0 не вызывает даже у его поклонников особенного восторга. P.S. если в плане поиска работы, то я бы его не рассматривал.
Sendoo
5 лет назад
Спасибо за ответ! На самом деле пришел к изучению этого фреймворка как раз из-за достаточно высокого спроса на собеседованиях(Киев). Реакт да, он сейчас по-прежнему держит пальму первенства, но разница между ним и Vue год назад и сейчас, по ощущениям существенно сократилась.
monsterlessons
5 лет назад
По моим ощущениям как раз наоборот react fiber (полностью переписаные кишки реакта и то как он шикарно работает с браузером), react suspense и react hooks дают невероятные возможности по сравнению с другими фреймворками. По моему мнению это уже совсем другая лига.
Sendoo
5 лет назад
Надо будет изучить внимательнее новые фичи React, спасибо за наводку.
Alexandr Taldykin
6 лет назад
Спасибо за старания! Классные видео!
monsterlessons
6 лет назад
На здоровье)