VueJS - Power Workshop: Einstieg komplett

Seminarziel

Sie lernen die Grundlagen von Vue.js, setzen Projekte mit Vue CLI auf, entwickeln eigene Komponenten, binden Formulare und Eingaben, nutzen Direktiven, Filter, Mixins sowie Animationen und erstellen Single-Page-Applications mit Routing und Vuex.

Inhalt

• Erste Schritte mit Vue.js
  • Einführung und Überblick
  • Vue.js lokal einrichten
  • Eine erste Vue.js-Anwendung erstellen
• Erweiterung der Vue.js-Anwendung
  • Verwendung von Vue.js zur DOM-Interaktion
  • VueJS-Vorlagen und ihre Syntax
  • Zugriff auf Daten und Attribute
  • Direktiven anwenden (v-once, v-if, v-for, v-model etc.)
  • Ereignisbehandlung und Modifikatoren
  • Zwei-Wege-Bindung, berechnete Eigenschaften und Beobachter
• Styling, Bedingtes Rendering, Listen
  • Dynamisches Styling mit CSS-Klassen
  • Bedingte Anzeigelogik (v-if, v-show)
  • Listen-Rendering mit v-for
• Verstehen der Vue-Instanz
  • Instanzstruktur und Zugriff
  • Verwendung von $el, $data, $refs
• Entwicklungs-Workflow mit Vue CLI und Webpack
  • CLI-Installation und Projektstruktur
  • Arbeiten mit .vue-Dateien
  • Produktionsbuilds und Debugging
• Komponentenarchitektur
  • Komponenten erstellen und registrieren
  • Komponentenstruktur und -organisation
  • Datenhaltung und -weitergabe
  • Eigenschaften, Ereignisse, Datenfluss
• Komplexe Komponentenkommunikation
  • Parent-/Child-Kommunikation
  • Benutzerdefinierte Events, Props und Callback-Funktionen
  • Ereignisbus und globale Kommunikation
• Erweiterte Komponentenverwendung
  • Slots, dynamische Komponenten, Wiederverwendung
• Formulare und Eingaben
  • Formularbindung, Eingabemodifikatoren
  • Checkboxes, Radios, Selects
  • Benutzerdefinierte Formularelemente
• Eigene Direktiven, Filter und Mixins
  • Benutzerdefinierte Direktiven erstellen
  • Filter anwenden und kombinieren
  • Mixins verstehen und effektiv einsetzen
• Animationen und Übergänge
  • CSS-Transitions, JS-Animationen
  • Übergänge für Komponenten und Listen
• HTTP-Kommunikation mit Axios
  • GET/POST-Anfragen
  • Globale Konfiguration und Ressourcenhandling
• Routing mit vue-router
  • Routing-Modi, Navigation, Parameter
  • Nested Routes, Named Views
  • Routing Guards, Lazy Loading
• State Management mit Vuex
  • Zentralisierte Zustandsverwaltung
  • Mutations, Actions, Getters
  • Integration in Komponenten