Lektionen
Lektionen
Vue macht aus HTML-Vorlagen und etwas JavaScript Web-Apps, die sich selbst aktualisieren. Damit baust du eine Bestell-App für ein Café, mit Speisekarte, Bestellung und Summe.
Lektionen
Lektion 1
Finde dich in den Dateien einer Vue-App und den Teilen einer .vue-Datei zurecht, zeige Daten an und behebe Fehler.
Für die Lektion bekommst du 75 XP
Lektion 2
Schreibe Ausdrücke in geschweiften Klammern in Vorlagen und setze Attribute, Klassen und Stile aus Daten.
Für die Lektion bekommst du 95 XP
Lektion 3
Lass die Seite mit ref() und .value reagieren, behandle Klicks, Eingaben und Tasten und aktualisiere Arrays und Objekte.
Für die Lektion bekommst du 120 XP
Lektion 4
Wähle mit v-if und v-show, was angezeigt wird, und mache aus Arrays Listen mit v-for, gefiltert und sortiert.
Für die Lektion bekommst du 100 XP
Checkpoint
Baue eine Packliste, die Sachen packt, zählt, Gepacktes ausblendet und entfernt, was du nicht brauchst.
Für die Lektion bekommst du 35 XP

Lektion 6
Binde Textfelder, Auswahllisten und Checkboxen mit v-model, schicke Formulare ab und zeige Fehlermeldungen.
Für die Lektion bekommst du 100 XP
Lektion 7
Berechne Summen und gefilterte Listen mit computed() und führe mit watch() Code aus, wenn sich Daten ändern.
Für die Lektion bekommst du 80 XP
Checkpoint
Baue einen Budget-Tracker, der neue Ausgaben prüft, sie nach Kategorie zusammenzählt und den Monat speichert.
Für die Lektion bekommst du 35 XP

Lektion 9
Teile eine Seite in .vue-Komponenten auf, verbinde sie mit import und export und schicke ihnen Daten mit Props.
Für die Lektion bekommst du 85 XP
Lektion 10
Sende Ereignisse mit emit nach oben, halte eine Datenquelle und nutze v-model bei eigenen Komponenten.
Für die Lektion bekommst du 70 XP
Lektion 11
Gib Komponenten mit Slots Inhalt mit, lege Fallback-Inhalt fest und fülle benannte Slots.
Für die Lektion bekommst du 60 XP
Checkpoint
Baue eine Fotogalerie mit Kacheln, einem großen Foto in einer Lightbox und Buttons für das nächste und vorherige Foto.
Für die Lektion bekommst du 35 XP

Lektion 13
Lade Daten in onMounted, melde Ladefehler, stoppe Timer und behalte Favoriten, auch wenn die Seite neu lädt.
Für die Lektion bekommst du 85 XP
Lektion 14
Lagere Logik in Composables aus, die du wiederverwendest, etwa einen Ref, der sich selbst speichert.
Für die Lektion bekommst du 65 XP
Lektion 15
Baue einen Gewohnheits-Tracker, der Gewohnheiten lädt, den Fortschritt zeigt, Abgehaktes speichert und Tage zählt.
Für die Lektion bekommst du 75 XP

Vue ist ein beliebtes Framework zum Bauen von Web-Apps, bekannt dafür, dass der Einstieg leichtfällt. Der Kurs behandelt Vorlagen, reaktiven State und Ereignisse, Listen und Bedingungen, Formulare mit v-model, berechnete Werte und Watcher, Komponenten mit Props, Ereignissen und Slots, das Laden von Daten und Composables.
Er richtet sich an alle, die HTML, CSS und JavaScript kennen. Du baust Schritt für Schritt eine Bestell-App für ein Café, eine Packliste, einen Budget-Tracker und eine Fotogalerie, und im Abschlussprojekt entsteht ein Gewohnheits-Tracker, der sich deinen Fortschritt merkt.