Vue lernen

Kapitel 3. Komponenten zusammenstellen

Diese Arbeit wurde mithilfe von KI übersetzt. Wir freuen uns über dein Feedback und deine Kommentare: [e-mail]

Im vorigen Kapitel hast du die Grundlagen von Vue kennengelernt und erfahren, wie du eine Vue-Komponente mit gängigen Direktiven unter Verwendung der Options API schreibst. Jetzt bist du bereit, in die nächste Stufe einzutauchen: das Erstellen komplexerer Vue-Komponenten mit Reaktivität und Hooks.

In diesem Kapitel werden der Vue Single File Component (SFC)-Standard, Komponenten-Lebenszyklus-Hooks und andere fortgeschrittene reaktive Funktionen wie berechnete Eigenschaften, Watchers, Methoden und Refs vorgestellt. Außerdem lernst du, Slots zu verwenden, um verschiedene Teile der Komponente dynamisch zu rendern und dabei die Struktur der Komponente mit Stilen zu erhalten. Am Ende dieses Kapitels wirst du in der Lage sein, komplexe Vue-Komponenten für deine Anwendung zu schreiben.

Vue Single File Component Struktur

Vue führt einen neuen Dateiformat-Standard ein, Vue SFC, der durch die Erweiterung .vue gekennzeichnet ist. Mit SFC kannst du den HTML-Templating-Code, die JavaScript-Logik und die CSS-Stylings für eine Komponente in ein und derselben Datei schreiben, und zwar jeweils in einem eigenen Codeabschnitt. Eine Vue SFC enthält drei wesentliche Codeabschnitte :

Template

Dieser HTML-Codeblock rendert die UI-Ansicht der Komponente. Er sollte nur einmal pro Komponente auf dem Element der höchsten Ebene erscheinen. ...