Brugerdefinerede direktiver
Registrér globale og lokale direktiver med livscyklushooks som mounted og updated for at indkapsle DOM-manipulationslogik uden for komponenterne.
Brugerdefinerede direktiver er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.
Hvad er direktiver?
Direktiver er genanvendelig logik til DOM-manipulation, der knyttes til elementer via præfikset v-. Indbyggede eksempler: v-if, v-for, v-model, v-show. Med brugerdefinerede direktiver kan du bygge dine egne.
Anvendelse: automatisk fokus
Et direktiv kan indkapsle små stykker DOM-manipulation, som ikke berettiger til en wrapper-komponent.
<template>
<input v-focus>
</template>
<script setup>
const vFocus = {
mounted: (el) => el.focus()
};
</script>Lokal registrering af direktiver
I <script setup> skal du erklære direktiver med præfikset v — Vue registrerer dem automatisk lokalt.
<script setup>
const vColor = {
mounted: (el, binding) => {
el.style.color = binding.value;
}
};
</script>
<template>
<p v-color="'red'">Hello</p>
</template>Global registrering af direktiver
Brug app.directive(name, definition) for at gøre et direktiv tilgængeligt overalt.
// main.ts
const app = createApp(App);
app.directive('focus', {
mounted: (el) => el.focus()
});
app.mount('#app');Direktivernes livscyklusfunktioner
Direktiver har funktioner, der afspejler komponenternes livscyklus: 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;
}
};Objektet binding
Livscyklusfunktionerne modtager et binding-objekt: 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 } }Rigtigt eksempel: v-click-outside
Et almindeligt direktiv — kald en hændelseshandler, når brugeren klikker uden for elementet.
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>Rigtigt eksempel: v-tooltip
Tilknyt et Tippy/Popper-værktøjstip via et direktiv — det holder skabelonerne rene.
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: Begræns inputhændelser
Omgiv et inputfelts @input-handler med debounce ved hjælp af et brugerdefineret direktiv.
const vDebounce = {
mounted(el, binding) {
let timer;
el.addEventListener('input', () => {
clearTimeout(timer);
timer = setTimeout(() => binding.value(el.value), 300);
});
}
};
<input v-debounce="search">Direktiv kontra komponent kontra composable
Composables: tilstandsbaseret logik (data, refs). Komponenter: genanvendelig brugerfladestruktur med deres egen skabelon. Direktiver: ren DOM-adfærd på et eksisterende element. Vælg et direktiv, når der ikke er brug for skabelon eller opmærkning.
Ydeevneovervejelser
Direktiver kører ved hver opdatering. Hold dem effektive. Ved dyre handlinger kan du bruge binding.value !== binding.oldValue til at springe unødvendigt arbejde over.
Hurtigt tjek
Hvad er forskellen på at bruge et Vue-direktiv og en Vue-komponent til at tilføje adfærd?
Opsummering: Brugerdefinerede direktiver
Genanvendelig DOM-logik med v-præfiks. Registrér lokalt (vName const i script setup) eller globalt (app.directive). Livscyklusfunktioner: mounted, updated, unmounted. binding giver value, oldValue, arg og modifiers. Brug direktiver til ren DOM-adfærd (fokus, click-outside, tooltip, debounce). Komponenter er til opmærkning, composables til tilstandsbaseret logik og direktiver til udvidelse af DOM-elementer.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 41
- Lektioner
- 163
Ofte stillede spørgsmål
Er lektionen “Brugerdefinerede direktiver” gratis?
Ja — hele teksten til “Brugerdefinerede direktiver” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Brugerdefinerede direktiver”?
Registrér globale og lokale direktiver med livscyklushooks som mounted og updated for at indkapsle DOM-manipulationslogik uden for komponenterne. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Frontend Academy?
Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.
Hvor lang tid tager lektionen “Brugerdefinerede direktiver”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Frontend Academy-lektion?
Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- provide() og inject() til dependency injection
- Asynkrone komponenter og Suspense
- Brugerdefinerede direktiver
- Plugin-system: app.use()