Ответ
Кастомные директивы в Vue позволяют добавлять пользовательскую логику к DOM-элементам. Например, создадим директиву v-focus, которая автоматически фокусирует элемент при монтировании:
// Регистрация глобальной директивы
app.directive('focus', {
mounted(el) {
el.focus();
}
});Использование в шаблоне:
<input v-focus placeholder="Автофокус">Другой пример — директивы с аргументами:
app.directive('color', {
mounted(el, binding) {
el.style.color = binding.value;
}
});<p v-color="'red'">Текст станет красным</p>Кастомные директивы полезны для:
- Работы с нативным DOM
- Интеграции сторонних библиотек
- Повторяющихся действий с элементами
Ответ 18+ 🔞
А, ну вот, блядь, кастомные директивы в Vue! Это ж как раз та самая штука, когда тебе нужно навесить на элемент какую-то свою, ебучую логику, прям в DOM лезть. Не через компоненты, а вот так, на прямую, чтоб всё по-взрослому, с нативным апишником.
Смотри, вот тебе пример, проще говоря. Допустим, тебе надо, чтобы инпут сам фокусился, как только появится. Ну, чтобы юзеру не тыкать, ленивая жопа. Вот как это делается, ёпта:
// Регистрируем директиву на всю твою аппу, глобально, блядь
app.directive('focus', {
mounted(el) {
el.focus(); // И всё, пиздец! Фокус тут как тут.
}
});А в шаблоне потом просто пишешь, как будто так и надо:
<input v-focus placeholder="Смотри-ка, я уже готов печатать!">Во, блядь, удобно же? А то вечно через ref и в onMounted пиздюкаться.
А вот ещё прикол, с аргументами. Допустим, ты хочешь, чтобы цвет текста менялся по твоей указке. Ну, не через классы, а чтоб прям директивой, для пафоса.
app.directive('color', {
mounted(el, binding) {
el.style.color = binding.value; // binding.value — это то, что ты туда передал, ёпта!
}
});И юзаешь:
<p v-color="'red'">Вот этот текст, сука, красный как мак!</p>Вот зачем это всё, спрашиваешь? Да по разным, блядь, причинам!
- Работа с нативным DOM — когда Vue-шные абстракции — это пиздец, а надо копаться в
element.styleилиelement.addEventListener. Директива — твой легальный способ туда влезть. - Интеграция сторонних библиотек — которые тоже любят, чтобы им DOM-элемент скормили. Типа какой-нибудь старой jQuery-хуйни, которая хочет
$(el).datepicker(). Завернул в директиву — и порядок, не палишься. - Повторяющиеся действия — ну, типа того же фокуса или кликов снаружи. Чтобы не копипастить один и тот же код в каждом компоненте, выносишь в директиву и спишь спокойно.
Короче, инструмент, блядь, мощный. Не злоупотребляй, конечно, а то опять начнёшь jQuery в проекте 2024 года использовать, пидарас шерстяной. Но где надо — в самый раз, ёпта.