Własne dyrektywy
Zarejestruje Pan/Pani globalne i lokalne dyrektywy z hookami cyklu życia, takimi jak mounted i updated, aby wydzielić logikę manipulowania DOM-em poza komponenty.
Własne dyrektywy to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Czym są dyrektywy?
Dyrektywy to wielokrotnie używana logika manipulowania DOM-em, dołączana do elementów za pomocą prefiksu v-. Przykłady wbudowanych dyrektyw: v-if, v-for, v-model, v-show. Własne dyrektywy pozwalają tworzyć własne rozwiązania.
Przypadek użycia: automatyczne ustawianie fokusu
Dyrektywa może zawierać niewielkie fragmenty logiki manipulowania DOM-em, które nie uzasadniają tworzenia komponentu opakowującego.
<template>
<input v-focus>
</template>
<script setup>
const vFocus = {
mounted: (el) => el.focus()
};
</script>Lokalna rejestracja dyrektywy
W <script setup> należy deklarować dyrektywy z prefiksem v — Vue automatycznie rejestruje je lokalnie.
<script setup>
const vColor = {
mounted: (el, binding) => {
el.style.color = binding.value;
}
};
</script>
<template>
<p v-color="'red'">Hello</p>
</template>Globalna rejestracja dyrektywy
Należy użyć app.directive(name, definition), aby udostępnić dyrektywę w całej aplikacji.
// main.ts
const app = createApp(App);
app.directive('focus', {
mounted: (el) => el.focus()
});
app.mount('#app');Haki cyklu życia dyrektyw
Dyrektywy mają haki odzwierciedlające cykl życia komponentu: created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted.
const vColor = {
beforeMount(el, binding) {
el.style.color = binding.value;
},
updated(el, binding) {
el.style.color = binding.value;
}
};Obiekt binding
Haki otrzymują obiekt binding: value, oldValue, arg, modifiers, instance.
<p v-pin:bottom.left="200">Pinned</p>
// binding inside the directive:
// { value: 200, oldValue: ..., arg: 'bottom', modifiers: { left: true } }Praktyczny przykład: v-click-outside
Popularna dyrektywa — wywołuje procedurę obsługi, gdy użytkownik kliknie poza elementem.
const vClickOutside = {
mounted(el, binding) {
el._handler = (e) => {
if (!el.contains(e.target)) binding.value(e);
};
document.addEventListener('click', el._handler);
},
unmounted(el) {
document.removeEventListener('click', el._handler);
}
};
// Usage:
<div v-click-outside="closeMenu">...</div>Praktyczny przykład: v-tooltip
Dyrektywa dołącza etykietę narzędzia Tippy/Popper — dzięki temu szablony pozostają przejrzyste.
import tippy from 'tippy.js';
const vTooltip = {
mounted(el, binding) {
el._tippy = tippy(el, { content: binding.value });
},
updated(el, binding) {
el._tippy?.setContent(binding.value);
},
unmounted(el) {
el._tippy?.destroy();
}
};v-debounce: ograniczanie zdarzeń wejściowych
Za pomocą własnej dyrektywy można dodać debounce do procedury obsługi @input elementu wejściowego.
const vDebounce = {
mounted(el, binding) {
let timer;
el.addEventListener('input', () => {
clearTimeout(timer);
timer = setTimeout(() => binding.value(el.value), 300);
});
}
};
<input v-debounce="search">Dyrektywa a komponent i composable
Composables: logika ze stanem (dane, refs). Komponenty: wielokrotnie używana struktura interfejsu z własnym szablonem. Dyrektywy: czyste zachowanie DOM-u na istniejącym elemencie. Dyrektywę należy wybrać, gdy nie jest potrzebny szablon ani znaczniki.
Kwestie wydajności
Dyrektywy są wykonywane przy każdej aktualizacji. Należy zachować ich niewielki koszt. W przypadku kosztownych operacji warto sprawdzać binding.value !== binding.oldValue, aby pomijać zbędną pracę.
Szybkie sprawdzenie
Jaka jest różnica między użyciem dyrektywy Vue a użyciem komponentu Vue do dodania zachowania?
Podsumowanie: własne dyrektywy
Wielokrotnie używana logika DOM-u z prefiksem v. Można ją rejestrować lokalnie (stała vName w script setup) lub globalnie (app.directive). Haki cyklu życia: mounted, updated, unmounted. binding udostępnia value, oldValue, arg, modifiers. Dyrektywy służą do czystego zachowania DOM-u (fokus, kliknięcie poza elementem, etykieta narzędzia, debounce). Komponenty służą do znaczników, composables do logiki ze stanem, a dyrektywy do rozszerzania zachowania DOM-u.
Często zadawane pytania
Czy lekcja „Własne dyrektywy” jest bezpłatna?
Tak — pełny tekst „Własne dyrektywy” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Własne dyrektywy”?
Zarejestruje Pan/Pani globalne i lokalne dyrektywy z hookami cyklu życia, takimi jak mounted i updated, aby wydzielić logikę manipulowania DOM-em poza komponenty. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Własne dyrektywy”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?
Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- provide() i inject() do wstrzykiwania zależności
- Komponenty asynchroniczne i Suspense
- Własne dyrektywy
- System wtyczek: app.use()