Benutzerdefinierte Direktiven
Registrieren Sie globale und lokale Direktiven mit Lifecycle-Hooks wie mounted und updated, um Logik zur DOM-Manipulation außerhalb von Komponenten zu kapseln.
Benutzerdefinierte Direktiven ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was sind Direktiven?
Direktiven sind wiederverwendbare Logik zur DOM-Manipulation, die über das Präfix v- an Elemente angehängt wird. Beispiele für integrierte Direktiven: v-if, v-for, v-model, v-show. Mit benutzerdefinierten Direktiven können Sie eigene Direktiven erstellen.
Anwendungsfall: Auto-Fokus
Eine Direktive kann kleine Teile der DOM-Manipulation kapseln, für die sich eine Wrapper-Komponente nicht lohnt.
<template>
<input v-focus>
</template>
<script setup>
const vFocus = {
mounted: (el) => el.focus()
};
</script>Lokale Registrierung von Direktiven
Deklarieren Sie Direktiven in <script setup> mit dem Präfix v – Vue registriert sie automatisch lokal.
<script setup>
const vColor = {
mounted: (el, binding) => {
el.style.color = binding.value;
}
};
</script>
<template>
<p v-color="'red'">Hello</p>
</template>Globale Registrierung von Direktiven
Verwenden Sie app.directive(name, definition), um eine Direktive überall verfügbar zu machen.
// main.ts
const app = createApp(App);
app.directive('focus', {
mounted: (el) => el.focus()
});
app.mount('#app');Lebenszyklus-Hooks von Direktiven
Direktiven verfügen über Hooks, die den Lebenszyklus-Hooks von Komponenten entsprechen: 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;
}
};Das binding-Objekt
Hooks erhalten ein 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 } }Praxisbeispiel: v-click-outside
Eine häufig verwendete Direktive – ruft einen Handler auf, wenn der Benutzer außerhalb des Elements klickt.
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>Praxisbeispiel: v-tooltip
Binden Sie ein Tippy/Popper-Tooltip über eine Direktive ein – so bleiben Templates übersichtlich.
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: Eingabeereignisse verzögern
Umschließen Sie den @input-Handler eines Eingabefelds mit einem Debounce in einer benutzerdefinierten Direktive.
const vDebounce = {
mounted(el, binding) {
let timer;
el.addEventListener('input', () => {
clearTimeout(timer);
timer = setTimeout(() => binding.value(el.value), 300);
});
}
};
<input v-debounce="search">Direktive vs. Komponente vs. Composable
Composables: zustandsbehaftete Logik (Daten, Refs). Komponenten: wiederverwendbare UI-Struktur mit eigenem Template. Direktiven: reine DOM-Funktionalität auf einem vorhandenen Element. Wählen Sie eine Direktive, wenn kein Template oder Markup erforderlich ist.
Überlegungen zur Performance
Direktiven werden bei jeder Aktualisierung ausgeführt. Halten Sie sie kostengünstig. Bei aufwendigen Operationen können Sie mit binding.value !== binding.oldValue unnötige Arbeit überspringen.
Kurze Überprüfung
Was ist der Unterschied zwischen einer Vue-Direktive und einer Vue-Komponente, wenn Sie Verhalten hinzufügen möchten?
Zusammenfassung: Benutzerdefinierte Direktiven
Wiederverwendbare DOM-Logik mit v-Präfix. Lokal registrieren (vName const in script setup) oder global (app.directive). Lebenszyklus-Hooks: mounted, updated, unmounted. binding stellt value, oldValue, arg und modifiers bereit. Verwenden Sie Direktiven für reine DOM-Funktionalität (Fokus, Klicks außerhalb, Tooltips, Debounce). Komponenten sind für Markup zuständig, Composables für zustandsbehaftete Logik und Direktiven für die Erweiterung des DOM.
Häufig gestellte Fragen
Ist die Lektion „Benutzerdefinierte Direktiven“ kostenlos?
Ja — der vollständige Text von „Benutzerdefinierte Direktiven“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Benutzerdefinierte Direktiven“?
Registrieren Sie globale und lokale Direktiven mit Lifecycle-Hooks wie mounted und updated, um Logik zur DOM-Manipulation außerhalb von Komponenten zu kapseln. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Benutzerdefinierte Direktiven“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- provide() und inject() für Abhängigkeitsinjektion
- Asynchrone Komponenten und Suspense
- Benutzerdefinierte Direktiven
- Plugin-System: app.use()