Syntax der use:-Direktive
Wenden Sie mit der use:-Direktive eine Svelte-Action auf ein DOM-Element an.
Syntax der use:-Direktive ist eine kostenlose Sveltejs Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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 Sveltejs Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
Actions in Svelte
Eine Action ist eine Funktion, die ausgeführt wird, wenn ein Element eingebunden wird. Sie wird mit der use:-Direktive aufgerufen.
Einfache Action
Eine Action erhält den DOM-Knoten als Argument.
function highlight(node) {
node.style.background = "yellow";
}Mit use: anwenden
Hängen Sie die Action über use:action an ein beliebiges Element an.
<p use:highlight>I am highlighted</p>Warum Actions
Actions kapseln imperatives DOM-Verhalten (Fokus, Intersection, Drag-and-drop usw.) zur Wiederverwendung.
Kein Markup erforderlich
Actions rendern nichts, sondern erweitern vorhandene Elemente.
Mehrere Actions
Sie können mit mehreren use:-Direktiven mehrere Actions auf ein Element anwenden.
<div use:trap use:scroll>Bereitstellung in Bibliotheken
Viele Svelte-Bibliotheken stellen ihr Verhalten als Actions bereit, um eine komfortable Integration zu ermöglichen.
Importe
Actions sind einfache Funktionen. Importieren Sie sie wie jedes andere Modul.
import { clickOutside } from "$lib/actions";Typ-Hinweise
Typisieren Sie Actions mit dem Generic Action<Element, Params> aus svelte/action.
Kenntnis des Lebenszyklus
Actions werden nach dem Mounten ausgeführt, daher ist der Knoten bei ihrer Ausführung im DOM vorhanden.
Von einfach bis leistungsfähig
Actions können aus einer einzigen Zeile bestehen oder so umfangreich wie ein Bibliotheks-Wrapper sein.
Kurzer Test
Wie hängen Sie eine Action an?
Zusammenfassung
Actions sind Funktionen, die über use: aufgerufen werden. Sie erhalten den DOM-Knoten und fügen imperatives Verhalten hinzu.
Häufig gestellte Fragen
Ist die Lektion „Syntax der use:-Direktive“ kostenlos?
Ja — der vollständige Text von „Syntax der use:-Direktive“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Sveltejs Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Syntax der use:-Direktive“?
Wenden Sie mit der use:-Direktive eine Svelte-Action auf ein DOM-Element an. Du übst Sveltejs 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 Sveltejs Academy zu starten?
Keine Vorkenntnisse erforderlich. Sveltejs 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 1 von 4.
Wie lange dauert die Lektion „Syntax der use:-Direktive“?
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 Sveltejs Academy-Lektion Code schreiben und ausführen?
Ja. Jede Sveltejs 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
- Syntax der use:-Direktive
- Action-Parameter und Aktualisierungen
- Die destroy()-Aufräumfunktion
- Praxisnahe Actions: clickOutside tooltip autofocus