Vue.js – Power Workshop

Erste Schritte mit Vue.js

• Einführung und Überblick
• Vue.js lokal einrichten
• Eine erste Vue.js-Anwendung erstellen
• Erweiterung der Vue.js-Anwendung

Verwenden von Vue.js zur Interaktion mit dem DOM

• VueJS-Vorlagen verstehen
• Wie die Syntax und die Vue-Instanz der Vue.js-Vorlage zusammenarbeiten
• Zugriff auf Daten in der Vue-Instanz
• Bindung an Attribute
• Verstehen und Anwenden von Direktiven
• Einmaliges Rendern mit v-once
• Ausgabe von HTML-Code
• Auf Ereignisse reagieren
• Abrufen von Ereignisdaten aus dem Ereignisobjekt
• Eigene Argumente mit Ereignissen weitergeben
• Ändern eines Ereignisses mit Ereignis-Modifikatoren
• Abfangen von Tastatur-Ereignissen
• Schreiben von JavaScript-Code in Vorlagen
• Verwendung der Zwei-Wege-Bindung
• Reagieren auf Änderungen mit berechneten Eigenschaften
• Eine Alternative zu berechneten Eigenschaften: Änderungen beobachten
• Zeitersparnis durch Abkürzungen
• Dynamisches Styling mit CSS-Klassen

Verwendung von Conditionals und Rendering-Listen

• Bedingtes Rendering mit v-if und v-else-if
• Verwendung einer alternativen v-if-Syntax
• Rendering von Listen mit v-for
• Abrufen des aktuellen Indexes
• Verwendung einer alternativen v-for-Syntax
• Schleifen durch Objekte
• Schleifen durch eine Liste von Zahlen
• Nachverfolgung von Elementen mit v-for

Die Vue.js-Instanz verstehen

• Einige Grundlagen über die Vue-Instanz
• Verwendung mehrerer Vue-Instanzen
• Zugriff auf die Vue-Instanz von außen
• Wie Vue Daten und Methoden verwaltet
• Verwendung von $el und $data in Vorlagen
• Verwendung von $refs in Vorlagen
• Weitere Informationen über die Vue-API
• Laden einer Vorlage
• Verwendung von Komponenten
• Einschränkungen bei Templates
• Wie Vue.js das DOM aktualisiert
• Der Lebenszyklus der VueJS-Instanz

Entwicklungs-Workflow mit Webpack und Vue CLI

• Warum brauchen wir einen Entwicklungsserver?
• Was bedeutet “Entwicklungs-Workflow”?
• Installation des Vue CLI und Erstellen eines neuen Projekts
• Ein Überblick über die Ordnerstruktur der Webpack-Vorlage
• Verstehen von “.vue” Dateien
• Verstehen des Objekts in der Vue-Datei
• So erstellen Sie Ihre App für die Produktion
• Mehr über “.vue” Dateien und die CLI
• Debuggen von Vue-Projekten

Einführung in Komponenten

• Komponenten – Überblick und Grundlagen
• Speichern von Daten in Komponenten
• Lokale und globale Registrierung von Komponenten
• Die “Root-Komponente” in der App.vue-Datei
• Erstellen einer Komponente
• Verwendung von Komponenten
• Komponenten und Ordnerstrukturen
• Benennung der Komponenten-Tags (Selektoren)
• Gültigkeit der Komponenten-Stile

Kommunikation zwischen Komponenten

• Kommunikationsszenarien zwischen Komponenten
• Verwendung von Eigenschaften für Parent- / Child-Kommunikation
• Benennung von Eigenschaften
• Verwendung von Eigenschaften in der Child Component
• Validierung von Eigenschaften in der Child Component
• Benutzerdefinierte Ereignisse für Child- / Parent-Kommunikation
• Verstehen von Unidirektionalem Datenfluss
• Kommunikation mit Callback-Funktionen
• Kommunikation zwischen Child-Komponenten
• Verwendung eines Ereignisbusses für die Kommunikation
• Zentralisierung von Code in einem Ereignisbus

Erweiterte Komponentenverwendung

• Weitergabe von Inhalten
• Inhalte mit Slots übergeben
• Styling von Slot-Inhalten
• Verwendung mehrerer Slots per Namen
• Standard-Slots und Slot-Standards
• Umschalten von Komponenten mit dynamischen Komponenten
• Verstehen des Verhaltens dynamischer Komponenten
• Der Lebenszyklus von dynamischen Komponenten

Benutzereingaben über Formulare

• Grundlegende Formularanbindung von Eingabefeldern
• Gruppierung von Eingabedaten
• Vorbelegung von Eingabefeldern
• Änderung von Benutzereingabe mit Eingabemodifikatoren
• Mehrzeilige Eingabefelder
• Verwendung von Kontrollkästchen (checkbox)
• Verwendung von Optionsfeldern (radio)
• Listendelder mit “select” und “option”
• Funktionsweise von v-model
• Erstellung von benutzerdefinierten Elementen
• Bestätigen und Absenden eines Formulars

Direktiven verwenden und erstellen

• Direktiven verstehen
• Funktionsweise von Direktiven
• Erstellen einer einfachen Direktive
• Weitergabe von Werten an benutzerdefinierte Direktiven
• Weitergabe von Argumenten an benutzerdefinierte Direktiven
• Ändern einer benutzerdefinierten Direktive mit Modifikatoren
• Lokale Registrierung von Direktiven
• Verwendung mehrerer Modifikatoren
• Komplexere Werte an Direktiven übergeben

Filter und Mixins

• Erstellen eines lokalen Filters
• Globale Filter und Verkettung von Filter
• Alternative zu Filtern: Berechnete Eigenschaften
• Mixins verstehen
• Erstellen und Verwenden von Mixins
• Zusammenführung von Mixins
• Gültigkeitsbereich von Mixins

Animationen und Übergänge

• Verstehen von Übergängen
• Definieren einer Transition
• CSS-Klassen für Übergänge zuweisen
• Erstellen eines “Fade”-Übergangs mit CSS-Transition
• Erstellen eines “Slide”-Übergangs mit CSS-Animation
• Kombination von Animations- und Übergangs-Eigenschaften
• Animieren von v-if und v-show
• Festlegen einer on-load-Animation
• Verwendung verschiedener CSS-Klassennamen
• Verwendung dynamischer Namen und Attribute
• Reagieren auf Transition-Ereignisse
• Erstellen einer Animation in JavaScript
• Animieren von dynamischen Komponenten
• Animieren von Listen mit

HTTP-Server-Kommunikation mit Axios

• Zugriff auf Http über Axios
• Daten an einen Server senden (Senden einer POST-Anfrage)
• Daten holen und transformieren (Senden einer GET-Anfrage)
• Globale Konfiguration der vue-ressource
• Abfangen von Anfragen und Antworten
• Erstellen von benutzerdefinierten Ressourcen
• Unterschied Ressourcen zu “normalen” Http-Anfragen

Routing in Vue.js

• Einrichten des Vue-Routers (vue-router)
• Einrichten und Laden von Routen
• Verstehen der Routing-Modi (Hash und History)
• Navigieren mit Router-Links
• Navigation aus dem Code heraus
• Routenparameter einstellen
• Abrufen und Verwenden von Routenparametern
• Reagieren auf Änderungen der Routenparameter
• Kinderrouten einrichten (verschachtelte Routen)
• Benannte Routen
• Query-Parameter verwenden
• Mehrere Router-Ansichten (benannte Router-Ansichten)
• Umleitung von Routen
• Einrichten von “Catch All” und “Wildcard” Routen
• Animieren von Routenübergängen
• Weitergabe des Hash-Fragment
• Steuern des Scroll-Verhaltens
• Routenschutz mit “Guards”
• Verwendung des “beforeEnter” und “beforeLeave”-Guard
• “Lazy Loading” von Routen

Zustandsverwaltung mit Vuex

• Gründe für Zustandsverwaltung
• Verständnis des “zentralisierten Zustands”
• Verwendung des zentralisierten Zustands
• Verstehen und Verwendung von Getter
• Zuordnung von Getter zu Properties
• Verstehen und Verwendung von Mutationen
• Verwendung von Actions
• Zuordnung von Actions zu Methoden