Benutzerdefinierte Direktiven schreiben
app.directive(), mounted/updated/unmounted-Hooks, Direktivenargumente und Modifikatoren.
Benutzerdefinierte Direktiven schreiben ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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 Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Wenn Komponenten nicht ausreichen
Der größte Teil der Wiederverwendung in Vue erfolgt über Komponenten und Composables. Manche Logik zielt jedoch auf das rohe DOM ab — etwa das automatische Fokussieren eines Input-Felds, die Integration einer Bibliothek ohne Vue oder das Vermessen eines Elements. Benutzerdefinierte Direktiven sind genau dafür gedacht.
Eine einfache Direktive
Registrieren Sie eine Direktive mit app.directive in der App. Der mounted-Hook erhält das Element, daher fokussiert diese Direktive ein Input-Feld, sobald es erscheint.
const app = createApp(App)
app.directive('focus', {
mounted(el) { el.focus() }
})Direktive verwenden
Wenden Sie sie in einem Template mit dem Präfix v- und dem registrierten Namen an.
<template>
<input v-focus />
</template>Lokale Direktiven in script setup
Innerhalb von <script setup> wird jede Variable auf oberster Ebene, die mit v beginnt und in camelCase geschrieben ist, zu einer verwendbaren Direktive. Nennen Sie sie vFocus und verwenden Sie sie als v-focus.
<script setup>
const vFocus = {
mounted: (el) => el.focus()
}
</script>
<template>
<input v-focus />
</template>Das Binding-Objekt
Jeder Hook erhält als zweites Argument ein binding-Objekt. Es enthält den Direktivenwert, das Argument und die im Template übergebenen Modifikatoren.
app.directive('demo', {
mounted(el, binding) {
console.log(binding.value, binding.arg, binding.modifiers)
}
})Einen Wert übergeben
Der Ausdruck nach dem Gleichheitszeichen wird zu binding.value. Hier wird eine Farbe übergeben und auf das Element angewendet.
<!-- template -->
<p v-color="'red'">Hello</p>
<!-- directive -->
app.directive('color', {
mounted(el, binding) { el.style.color = binding.value }
})Ein Argument übergeben
Der Teil nach dem Doppelpunkt wird zu binding.arg. So kann sich eine Direktive je nach Bezeichnung unterschiedlich verhalten.
<!-- v-pin:top means binding.arg === 'top' -->
<div v-pin:top="20"></div>Modifikatoren verwenden
Modifikatoren stehen nach Punkten und werden in binding.modifiers als boolesche Zuordnung übergeben. Verwenden Sie sie, um das Verhalten anzupassen.
<!-- v-pin.fixed -> binding.modifiers.fixed === true -->
<div v-pin.fixed="10"></div>Hooks im Lebenszyklus von Direktiven
Direktiven verfügen über Hooks, die den Lebenszyklus-Hooks von Komponenten entsprechen: created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount und unmounted.
Auf Aktualisierungen reagieren
Der updated-Hook wird ausgeführt, nachdem das Element erneut gerendert wurde. Vergleichen Sie binding.value mit binding.oldValue, um nur auf tatsächliche Änderungen zu reagieren, und führen Sie die Bereinigung in unmounted durch.
app.directive('color', {
mounted(el, binding) { el.style.color = binding.value },
updated(el, binding) {
if (binding.value !== binding.oldValue) el.style.color = binding.value
}
})Direktiven vs. Komponenten
Bevorzugen Sie Komponenten für alles, was Struktur oder Zustand umfasst. Verwenden Sie Direktiven nur, wenn Sie direkten Zugriff auf das DOM auf niedriger Ebene benötigen, der nicht zu einer Komponente passt, etwa für Fokusverwaltung oder DOM-Widgets von Drittanbietern.
Kurzer Test
Testen Sie Ihr Wissen über benutzerdefinierte Direktiven.
Zusammenfassung
Sie haben gelernt, benutzerdefinierte Direktiven zu erstellen:
- Registrieren Sie sie global mit
app.directiveoder lokal alsvNamein script setup. binding.value,binding.argundbinding.modifiersübergeben Daten.- Lebenszyklus-Hooks: created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted.
- Verwenden Sie Direktiven für DOM-Arbeiten auf niedriger Ebene; bevorzugen Sie ansonsten Komponenten.
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 42
- Lektionen
- 156
Häufig gestellte Fragen
Ist die Lektion „Benutzerdefinierte Direktiven schreiben“ kostenlos?
Ja — der vollständige Text von „Benutzerdefinierte Direktiven schreiben“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Benutzerdefinierte Direktiven schreiben“?
app.directive(), mounted/updated/unmounted-Hooks, Direktivenargumente und Modifikatoren. Du übst Vue 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 Vue Academy zu starten?
Keine Vorkenntnisse erforderlich. Vue 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 4 von 4.
Wie lange dauert die Lektion „Benutzerdefinierte Direktiven schreiben“?
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 Vue Academy-Lektion Code schreiben und ausführen?
Ja. Jede Vue 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
- v-model: Interna der bidirektionalen Bindung
- v-on-Ereignismodifikatoren
- Dynamische und mehrere Bindings mit v-bind
- Benutzerdefinierte Direktiven schreiben