Директива - это возможность “навесить” свой функционал, не расширяя дочерний компонент. Например вы хотите чтоб у каждого htmlкомпонента мог быть tooltip (подскази при наведении). Но не писать же логику для каждого элемента? Такие вещи выносят в директивы и просто передают атрибутами внутрь.

Самые популярные директивы: v-click-outside - Закрывает выпадающие списки, модалки или меню, если пользователь кликнул в любое место за пределами элемента. v-mask — для input-ов. Автоматически форматирует ввод: номер телефона +7 (XXX) …, даты или номера карт. v-lazy - для оптимизации. Загружает изображения только тогда, когда пользователь доскроллил до них (ленивая загрузка). v-debounce - ограничивает частоту вызова функции. v-copy - автоматически копируется в буфер обмена. v-tooltip - вешает всплывающую подсказку. v-badge - отображения цифра кол-ва.

Потыкать: https://github.com/gost1k/examples_directives

#frontend #vue #директивы