VueJS – Power Workshop: Der komplette Einstieg

Einführung in das JavaScript-Framework VueJS

Mit dem "Vue.js – Power Workshop" gelingt Ihnen der perfekte Einstieg in das Vue.js-Framework. Sie erhalten ein vollständiges Verständnis der Architektur hinter einer Vue.js-Anwendung und bekommen alle relevanten Informationen um moderne, komplexe, reaktionsschnelle sowie skalierbare Webanwendungen mit einem der modernsten JavaScript-Frameworks auf dem Markt zu entwickeln.

Beschreibung

Von der Einrichtung bis zur Bereitstellung deckt dieser Vue.js-Kurs alles ab! Sie erfahren alles über Komponenten, Formulare, Http-Zugriff, Routing, Zustandsverwaltung einer Vue.js-App und vieles mehr. Aber das ist noch nicht alles: Im "Vue.js – Power Workshop" entwickeln Sie unter professioneller Anleitung eigenständige Vue.js-Anwendungen, so dass Sie das Gelernte direkt üben und anwenden können!

Agenda

Vue.js – Erste Schritte
- Was ist "Vue.js"?
- Verschiedene Arten der Verwendung von Vue.js
- Vue.js-Alternativen
- Erstellen einer ersten App mit JavaScript
- Neuentwicklung der App mit Vue.js
- Vue.js versus "Vanilla JavaScript"
Vue.js – Einrichten einer Entwicklungsumgebung
- Die Basis: Node.js
- Der Editor: VS-Code
- Hinzufügen der "Vetur"-Erweiterung zum VS-Code
- Mit der Vue CLI zu einem besseren Entwicklungs-Setup und -Workflow übergehen
- Installieren und Verwenden der Vue CLI
- Erstellen einer Vue.js-App mit dem Vue-CLI
- Untersuchung des erstellten Projekts
- Untersuchung der Vue-Code und ".vue"-Dateien
- Hinzufügen einer Komponente
- Hinzufügen von Styling
Vue.js – Grundlagen, Konzepte, DOM-Interaktionen
- Erstellen und Verbinden von Vue.js-Instanzen
- Interpolation und Datenbindung
- Bindende Attribute mit der "v-bind"-Richtlinie
- Verstehen von "Methoden" in Vue Apps
- Arbeiten mit Daten innerhalb einer Vue.js-App
- Ausgabe von HTML-Inhalten mittels v-html
- Ereignisbindung verstehen
- Ereignisse und Methoden
- Mit Ereignis-Argumenten arbeiten
- Verwendung des nativen Ereignisobjekts ($event-Objekt)
- Erforschung von Ereignis-Modifikatoren
- Sperren von Inhalten mit v-once
- Datenbindung + Ereignisbindung = Zwei-Wege-Bindung
- Für die Datenbindung verwendete Methoden: Wie es funktioniert
- Einführung in berechnete Eigenschaften (Computed Properties)
- Zusammenarbeit mit Beobachtern (Watchers)
- Methoden versus Berechnete Eigenschaften versus Beobachter
- v-bind und v-on Abkürzungen
- Dynamisches Styling mit Inline-Stilen
- Dynamisches Hinzufügen von CSS-Klassen
- CSS-Klassen und berechnete Eigenschaften
- Dynamische CSS-Klassen: Array-Syntax
Vue.js – Ausgabe von Inhalten und Listen
- Bedingtes Rendern von Inhalten
- v-if, v-else und v-else-if
- Verwenden von v-show anstelle von v-if
- Listen von Daten ausgeben
- Weitere Details zu v-for
- Entfernen von Listeneinträgen
- Über Listen, Index und Schlüssel in v-for
Vue.js – Reaktivität
- Eine Einführung in die Reaktivität von Vue.js
- Eine App versus mehrere Apps
- Vue.js-Vorlagen verstehen
- Arbeiten mit Refs in Vue.js
- Wie Vue.js das DOM aktualisiert
- Vue.js App Lebenszyklus in Theorie und Praxis
Vue.js – Komponenten
- Vorstellung der Vue.js-Komponentenarchitektur
- Arten von Komponenten
- Komplexe Benutzeroberflächen mit Komponenten bauen
- Mehrere Vue.js-Apps im Vergleich zu mehreren Komponenten
- Weitergabe von Daten an Komponenten mit Eigenschaften (Props)
- Validierung von Eigenschaften (Props) durch Regeln
- Senden von Individuellen Ereignissen (Custom Events)
- Definieren und Validieren von benutzerdefinierter Ereignisse
- Provide und Inject im Überblick
- Provide und Inject für Funktionen und Methoden
- Provide und Inject versus Props und Custom Events
- Globale vs. lokale Komponenten
- CSS-Stile mit Gültigkeitsbereich versehen
- Einführung in Slots
- Benannte Slots, Slot-Styles, Eingescopte Slots und Kompilierung
- Arbeiten mit Vue.js-Fragmenten
- Der Vue.js-Style-Guide
Vue.js – Formulare
- v-model und Formulareingabeelemente
- Arbeiten mit v-model Modifikatoren und Zahlen
- v-model und Dropdowns
- Verwendung des v-model mit Checkboxen & Radiobuttons
- Hinzufügen einer grundlegenden Formularvalidierung
- Erstellen einer benutzerdefinierten Steuerkomponente
- Verwendung von v-model auf benutzerdefinierten Komponenten
Vue.js – Http-Anfragen
- Architektur: Frontend- und Backend-Aufgaben
- Wie man Http-Anfragen (nicht) sendet
- Senden einer POST-Anforderung zum Speichern von Daten
- Http-Anfragen und die Http-Methoden GET, POST, PUST, DELETE
- Axios anstelle von "fetch()" verwenden
- Datenbeschaffung (GET-Anfrage) und Transformation von Daten
- Abrufen von Daten beim Laden einer Komponente
- Anzeigen einer "Laden…" Mitteilung (Loading-Spinner)
- Umgang mit dem "Keine Daten"-Zustand
- Behandlung technischer / browserseitiger Fehler
- Behandlung von Fehlerrückmeldungen
Vue.js – Routing
- Erstellen mehrseitiger Single-Page-Application
- Einrichten von Routing
- Registrieren und Rendern von Routen
- Navigieren mit Router-Link
- Aktive Links gestalten
- Programmatische Navigation
- Daten mit Routen-Parameter übergeben
- Navigation und dynamische Pfade
- Aktualisierung von Parameter-Daten mit Watchern
- Übergabe von Parametern als Props
- Umleitung- und "Catch All"-Routen
- Verschachtelte Routen verwenden
- Benannte Routen und Standort-Objekten
- Verwendung von Abfrageparametern
- Rendern mehrerer Routen mit benannten Router-Ansichten
- Steuerung des Scroll-Verhaltens
- Schutz von Routen mit Guards
- Die globalen Navigation Guards: beforeEach, afterEach
- Die Komponenten Guards: beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave
- Verwendung von Routen-Metadaten
- Organisieren von Routendateien
Vue.js – Animationen und Übergänge
- Grundlagen der Animation und CSS-Übergänge
- Wiedergabe von CSS-Animationen mit Vue.js
- Verwendung der Übergangskomponente
- CSS-Animationen mit der Übergangskomponente
- Verwendung benutzerdefinierter CSS-Klassennamen
- Übergänge zwischen mehreren Elementen
- Verwendung von Übergangsereignissen
- Erstellen von JavaScript-Übergängen (anstelle von CSS)
- Deaktivieren von CSS-Übergängen
- Erste Schritte mit animierten Listen
- Listen mit "transition-group"animieren
- Bewegung von Listenelementen animieren
- Animieren von Routenänderungen
Vue.js – Zustandsverwaltung mit Vuex
- Grundlagen und Konzepte der clientseitigen Zustandsverwaltung
- Erstellen und Verwenden eines Stores
- Komponenten mit Zustand des Store verbinden
- Mutationen einführen um Daten zu ändern
- Datenübergabe an Mutationen mit Payloads
- Einführung von Getter um Daten zu laden
- Ausführen von asynchronem Code mit Actions
- Den Action-Context verstehen und nutzen
- Die Mapper-Helper in Komponenten verwenden
- Organisation des Store mit Modulen
- Module mit Namensräumen versehen
- Strukturierung von Vuex-Code und Dateien
Vue.js – Optimieren und Bereitstellen von Vue-Apps
- Was soll bereitgestellt werden?
- Das Projekt für die Produktion einrichten
- Optimierung durch asynchrone Komponenten
- Bereitstellen einer Vue-App
Optional: Vue.js – Composition-API
- Ein Ersatz für das Option-API, welches Problem löst die Composition-API?
- Reaktivität – Konzepte und Grundlagen
- Entwicklung "reaktiver" Objekte
- Ersetzen von "Daten" durch "Refs"
- Ersetzen von "Methoden" durch reguläre Funktionen
- Ersetzen von "berechnete Eigenschaften" durch berechnete Funktionen
- Zwei-Wege-Bindung und die Composition-API
- Zusammenarbeit mit Watchern
- Verwendung von Vorlagenreferenzen
- Komponenten, Properties und die Composition-API
- Benutzerdefinierte Ereignisse ausgeben
- Arbeiten mit Provide und Inject
- Lebenszyklus-Hooks in der Composition-API
- Migration von Options API zu Composition-API
- Routing, Params und die Composition-API
- Route- und Router-Objekte und die Composition-API
- Verwendung von Vuex mit der Composition-API
Optional: Vue.js – Mixins und Custom Composition Functions
- Wiederverwendung von Funktionalität
- Konzepte der Wiederverwendbarkeit
- Mixins verwenden und anwenden
- Globale Mixins und Nachteile von Mixins
- Benutzerdefinierte Hooks, Composables und Composition-API

Teilnehmerkreis und Voraussetzungen

Entwickler, Programmierer mit Erfahrung in HTML, CSS, JavaScript, die mit Vue.js moderne, komplexe, reaktionsschnelle sowie skalierbare Webanwendungen entwickeln wollen.

Mindestanzahl Teilnehmende: 2 Personen

Schulungstermine

Current Month

Sie können den Kurs auch als Firmenschulung buchen.