Anpassade direktiv
Registrera globala och lokala direktiv med livscykelhooks som mounted och updated för att kapsla in logik för DOM-manipulering utanför komponenterna.
Anpassade direktiv är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Vad är direktiv?
Direktiv är återanvändbar logik för DOM-manipulation som kopplas till element med prefixet v-. Inbyggda exempel är v-if, v-for, v-model och v-show. Med anpassade direktiv kan ni skapa egna.
Användningsfall: autofokus
Ett direktiv kan kapsla in mindre delar av DOM-manipulation som inte motiverar en wrapper-komponent.
<template>
<input v-focus>
</template>
<script setup>
const vFocus = {
mounted: (el) => el.focus()
};
</script>Lokal registrering av direktiv
I <script setup> deklarerar ni direktiv med prefixet v – Vue registrerar dem automatiskt lokalt.
<script setup>
const vColor = {
mounted: (el, binding) => {
el.style.color = binding.value;
}
};
</script>
<template>
<p v-color="'red'">Hello</p>
</template>Global registrering av direktiv
Använd app.directive(name, definition) för att göra ett direktiv tillgängligt överallt.
// main.ts
const app = createApp(App);
app.directive('focus', {
mounted: (el) => el.focus()
});
app.mount('#app');Direktivens livscykelhakar
Direktiv har hakar som motsvarar komponentens livscykel: created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount och unmounted.
const vColor = {
beforeMount(el, binding) {
el.style.color = binding.value;
},
updated(el, binding) {
el.style.color = binding.value;
}
};Binding-objektet
Hakarna tar emot ett binding-objekt: value, oldValue, arg, modifiers och instance.
<p v-pin:bottom.left="200">Pinned</p>
// binding inside the directive:
// { value: 200, oldValue: ..., arg: 'bottom', modifiers: { left: true } }Verkligt exempel: v-click-outside
Ett vanligt direktiv – anropa en hanterare när användaren klickar utanför 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>Verkligt exempel: v-tooltip
Koppla ett Tippy/Popper-verktygstips via ett direktiv – mallarna hålls rena.
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änsa inmatningshändelser
Koppla en debounce runt ett inmatningsfälts @input-hanterare med ett anpassat 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: tillståndsbaserad logik, till exempel data och refs. Komponenter: återanvändbar UI-struktur med en egen mall. Direktiv: rent DOM-beteende på ett befintligt element. Välj ett direktiv när ingen mall eller markup behövs.
Prestandaöverväganden
Direktiv körs vid varje uppdatering. Håll dem billiga. För kostsamma operationer kan ni villkora körningen med binding.value !== binding.oldValue för att hoppa över onödigt arbete.
Snabbkontroll
Vad är skillnaden mellan att använda ett Vue-direktiv och en Vue-komponent för att lägga till beteende?
Sammanfattning: anpassade direktiv
Återanvändbar DOM-logik med v-prefix. Registrera lokalt, som konstanten vName i script setup, eller globalt med app.directive. Livscykelhakar: mounted, updated och unmounted. binding ger value, oldValue, arg och modifiers. Använd direktiv för rent DOM-beteende, till exempel fokus, klick utanför, verktygstips och debounce. Komponenter används för markup, composables för tillståndsbaserad logik och direktiv för att utöka DOM-beteendet.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 41
- Lektioner
- 163
Vanliga frågor
Är lektionen ”Anpassade direktiv” gratis?
Ja – hela texten till ”Anpassade direktiv” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Frontend Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Anpassade direktiv”?
Registrera globala och lokala direktiv med livscykelhooks som mounted och updated för att kapsla in logik för DOM-manipulering utanför komponenterna. Ni övar på Frontend Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Frontend Academy?
Du behöver inga förkunskaper. Utbildningen i Frontend Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.
Hur lång tid tar lektionen ”Anpassade direktiv”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Frontend Academy-lektionen?
Ja. Varje Frontend Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- provide() och inject() för beroendeinjektion
- Asynkrona komponenter och Suspense
- Anpassade direktiv
- Pluginsystem: app.use()