Vue.js 3 Grundlagen

Kursbeschreibung ​

Du hast bereits gelernt, wie man Webseiten mit HTML strukturiert, mit CSS stilvoll gestaltet und mit JavaScript interaktiv macht. Jetzt möchtest du den nächsten Schritt gehen und moderne, dynamische Webanwendungen entwickeln, die auf Benutzerinteraktionen schnell reagieren? Dann ist dieser Kurs genau das Richtige für dich! Vue.js ist ein progressives JavaScript-Framework, das für seine Einfachheit, Flexibilität und Leistungsfähigkeit bekannt ist und dir den Einstieg in die Welt der Single Page Applications (SPAs) erleichtert.

In diesem praxisorientierten Kurs tauchst du in die Kernkonzepte von Vue.js 3 ein. Du lernst, wie du eine Vue-Anwendung instanziierst und mit deinen HTML-Seiten verbindest. Ein besonderer Fokus liegt auf dem Reaktivitätssystem von Vue, das es dir ermöglicht, Datenänderungen automatisch in der Benutzeroberfläche widerzuspiegeln. Wir zeigen dir, wie du Datenbindungen, Ereignisbehandlung und Formularbindungen effektiv einsetzt, um interaktive Elemente zu erstellen. Du wirst lernen, wie du Inhalte bedingt anzeigst, Listen dynamisch renderst und deine Anwendung in wiederverwendbare Komponenten aufteilst – das Herzstück moderner Frontend-Entwicklung.

Nach diesem Kurs bist du in der Lage, dynamische und komponentenbasierte Web-Frontends zu entwickeln und hast eine solide Basis für die weitere Vertiefung in Vue.js oder andere JavaScript-Frameworks.

Zielgruppe ​

Dieser Kurs richtet sich an alle, die bereits über solide Kenntnisse in HTML, CSS und JavaScript verfügen (idealerweise durch die Kurse "HTML 5 Grundlagen", "CSS Grundlagen" und "JavaScript Grundlagen") und nun lernen möchten, wie sie moderne, komponentenbasierte und interaktive Web-Frontends mit einem populären JavaScript-Framework entwickeln. Ideal für zukünftige Frontend-Entwickler und Webdesigner.

Lernziele ​

Nach diesem Kurs kannst du:

• Die Kernkonzepte und die Philosophie von Vue.js 3 verstehen.
• Eine Vue.js-Anwendung instanziieren und mit einem HTML-Element verbinden.
• Das Reaktivitätssystem von Vue.js verstehen und anwenden (Daten, Methoden, Computed Properties, Watchers).
• Verschiedene Vue-Direktiven (v-bind, v-on, v-model, v-if, v-show, v-for) korrekt einsetzen.
• Ereignisse behandeln und Event-Modifier nutzen.
• Formulareingaben mit Zwei-Wege-Datenbindung verwalten.
• Inhalte bedingt rendern und Listen dynamisch darstellen.
• Komponenten erstellen, registrieren und wiederverwenden.
• Daten zwischen Komponenten über Props und Emits austauschen.
• Grundlagen der Vue.js-Entwicklungsumgebung (Node.js, npm, Vue CLI) verstehen und nutzen.

Kursinhalte (Stichworte) ​

• Einführung in Vue.js 3:
  • Was ist Vue.js? Vorteile und Anwendungsbereiche.
  • Progressives Framework vs. Single Page Application (SPA).
  • Einrichtung der Entwicklungsumgebung.
  • Dein erstes Vue-Projekt.
• Vue-Instanz und Reaktivität:
  • Erstellen einer Vue-App-Instanz.
  • Daten und Methoden.
  • Das Reaktivitätssystem von Vue verstehen.
  • Computed Properties für abgeleitete Daten.
  • Watchers für das Reagieren auf Datenänderungen.
• Vue-Direktiven:
  • Attributbindung (dynamische Attribute, Klassen, Styles).
  • Ereignisbehandlung (Klicks, Tastatureingaben, Event-Modifier).
  • Zwei-Wege-Datenbindung bei Formularelementen.
  • Bedingtes Rendern.
  • Rendern von Listen und Arrays.
• Komponenten:
  • Was sind Komponenten? Vorteile der Komponentenarchitektur.
  • Komponenten definieren und registrieren.
  • Datenfluss zwischen Komponenten: Props (Properties) für die Übergabe von Daten von Eltern zu Kind.
  • Ereignisse für die Kommunikation von Kind zu Eltern.
  • Slots für die Verteilung von Inhalten in Komponenten.
  • Single File Components (SFCs) und ihre Struktur.
• Lebenszyklus-Hooks (Grundlagen):
  • Kurzer Überblick über die wichtigsten Lebenszyklus-Hooks.
• Einführung in Routing und State Management (konzeptionell):
  • Was ist Vue Router?
  • Was ist State Management?

Vorkenntnisse / Anforderungen ​

• Erfolgreicher Abschluss der Kurse "HTML 5 Grundlagen", "CSS Grundlagen" und "JavaScript Grundlagen" oder vergleichbare solide Kenntnisse in HTML, CSS und JavaScript (insbesondere Funktionen, DOM-Manipulation und Event Handling).
• Sicherer Umgang mit einem Code-Editor (z.B. Visual Studio Code).
• Ein eigener Laptop (Windows, macOS oder Linux) ist für die praktischen Übungen zwingend erforderlich.
• Technisches Interesse und die Bereitschaft, sich mit Framework-Konzepten und moderner Frontend-Entwicklung auseinanderzusetzen.

Methodik ​

Unsere erfahrenen Dozenten, die ihr Wissen direkt aus der Praxis von Agenturen mitbringen, führen dich im persönlichen Präsenzunterricht in Grabs SG durch die Materie. Der Kurs ist stark interaktiv gestaltet, mit vielen praktischen "Hands-on"-Übungen, die dir helfen, das Gelernte sofort anzuwenden und zu festigen.

Besonderheiten ​

• Persönliche Betreuung: Direkter Kontakt zu unseren Dozenten und Tutoren vor Ort in Grabs SG für individuelle Fragen und Hilfestellung.
• Praxisnaher Einstieg: Fokus auf verständliche Erklärungen und reale Anwendungsbeispiele, die du sofort umsetzen kannst.
• Kleine Gruppen: Ermöglicht eine intensive Lernatmosphäre und massgeschneiderte Unterstützung.
• Expertise aus der Praxis: Profitiere vom Wissen unserer Dozenten, die selbst in Agenturen wie the-stack.dev tätig sind und dir aktuelle Einblicke und Best Practices vermitteln.
• Inklusive Kursmaterialien: Du erhältst umfassende Unterlagen und Code-Beispiele zum Nachschlagen.

Hinweis: dies ist ein Hands-on Workshop. Es werden keine Unterlagen abgegeben, da sämtliche Dokumentation ausreichend online zur Verfügung steht. Das Ziel des Kurses ist ein schneller und einfach Einstieg in die Welt von Vue.JS.