Vue.js für Einsteiger: Kompaktkurs in zwei Tagen mit Vite

Vue.js kennenlernen

• Vue.js einordnen: progressives Framework, das sich schrittweise in Seiten einbauen lässt
• Zwei Einstiegswege: Script-Tag aus dem CDN oder Projekt mit Build-Werkzeug
• Minimale Einrichtung: createApp, Mount-Element und erste reaktive Daten
• Kurs-Setup: Node.js in der LTS-Version, VS Code und die Vue DevTools im Browser

Template-Syntax und Direktiven

• Textinterpolation mit {{ }} und einfache JavaScript-Ausdrücke im Template
• Attribute wie src, href und disabled per v-bind bzw. : setzen
• Listen mit v-for und eindeutigem :key ausgeben
• Über Objekte und Zahlenbereiche iterieren, gefilterte Listen statt v-if in v-for
• Inhalte bedingt zeigen: v-if und v-else gegenüber v-show

Reaktivität und Ereignisse

• Reaktive Werte mit ref: .value im Skript, automatisches Entpacken im Template
• Eingabefelder mit v-model an Daten koppeln: Text, Checkbox, Auswahlliste
• Abgeleitete Werte mit computed, etwa Zähler oder gefilterte Einträge
• Klick- und Tastaturereignisse mit @click, @keyup.enter und .prevent
• Lebenszyklus: onMounted für Startdaten, onUnmounted zum Aufräumen von Timern
• Mit watch auf Änderungen reagieren, z. B. Eingaben im localStorage sichern

Stile und Animationen

• Inline-Stile über :style mit Objekt-Syntax aus Daten berechnen
• CSS-Klassen per :class schalten, z. B. für ausgewählte oder erledigte Einträge
• Ein- und Ausblenden animieren mit <Transition> und den Übergangsklassen
• Listen animieren mit <TransitionGroup>, Dauer und mode einstellen
• Stile auf eine Komponente begrenzen mit <style scoped>

Komponenten, Ereignisse und Slots

• Erste Single-File Component: <script setup>, Template und Stil in einer Datei
• Daten an Kindkomponenten weitergeben und mit defineProps empfangen
• Ereignisse an die Elternkomponente melden mit defineEmits
• v-model auf einer eigenen Komponente mit defineModel nutzen
• Inhalte durchreichen mit Standard-Slot und benannten Slots
• Scoped Slots im Überblick: Daten der Kindkomponente im Slot verwenden

Vom Script-Tag zum Vite-Projekt

• Anwendungs-API: createApp, app.mount und globale Registrierung im Vergleich
• Projekt mit npm create vue@latest anlegen und Zusatzoptionen bewusst schlank wählen
• Was die Installation erzeugt: package.json, node_modules, Skripte dev und build
• Projektdateien lesen: index.html, src/main.js, App.vue und vite.config.js
• Ältere Projekte mit Vue CLI erkennen: vue.config.js, Webpack statt Vite

Eine kleine App aufbauen und ordnen

• Realistische App aufsetzen: Startdaten aus JSON, Grundlayout, Schnitt in Komponenten
• ES-Module: Komponenten und Hilfsfunktionen importieren und exportieren
• Ansichten ohne Router umschalten mit <component :is>
• Einträge anlegen, bearbeiten und löschen – die Oberfläche zieht automatisch nach
• Hierarchie reorganisieren: gemeinsamen Zustand in die passende Elternkomponente heben
• Navigation überarbeiten: Menükomponente mit hervorgehobenem aktivem Eintrag
• Komponenten in Ordner verschieben und Importe über den Alias @/ stabil halten

Ausblick und nächste Schritte

• Vue Router als nächster Schritt nach <component :is> – vertieft im Seminar Vue.js
• Pinia und REST-Anbindung: woran Sie merken, dass Props nicht mehr reichen
• Wegweiser: Testen mit Vitest und Server-Rendering mit Nuxt in den Schwesterseminaren
• Produktions-Build mit npm run build und Auslieferung als statische Seite

Vue.js lernen mit Copilot-Chat in VS Code

• Vue-2-Schreibweisen in Vorschlägen erkennen: new Vue(), data(), Filter, this.$set
• Fremdes Template erklären lassen und Props sowie Ereignisse in den Vue DevTools gegenprüfen
• Aufträge staffeln: erst Template-Gerüst, dann Reaktivität, dann Stil – jeweils im Browser testen
• Vite-Fehlermeldungen und Vue.js-Warnungen der Browserkonsole in den Chat kopieren

Praxisprojekt: Ausleihliste für eine Werkzeugbibliothek

• Werkzeugliste aus einer JSON-Datei mit Kategorienfilter und Suchfeld
• Ausleihformular als Komponente mit defineModel, Rückgabe per Ereignis
• Werkzeugkarte mit Slot für die Statusanzeige, animierte Liste mit <TransitionGroup>
• Build mit npm run build und Bereitstellung als statische Seite

Lernziele

• Sie binden Vue per Script-Tag ein und legen ein Vite-Projekt mit npm create vue@latest an
• Sie schreiben Templates mit Interpolation, v-bind, v-for, v-if und v-model
• Sie erklären, wann sich eine Oberfläche durch ref und computed neu rendert
• Sie bauen Komponenten mit Props, eigenen Ereignissen und Slots
• Sie strukturieren eine kleine App in Ordner und Komponenten und erstellen einen Produktions-Build

Zielgruppe

• Einsteiger:innen mit HTML- und JavaScript-Grundlagen, die Vue.js zügig praktisch kennenlernen wollen
• Designer:innen, die Vue-Oberflächen verstehen und Templates selbst anpassen möchten
• Backend-Entwickler:innen, die kleine Frontends für ihre Dienste bauen