Vue.js - Intensiv-Schulung für Einsteiger - Inhouse von HECKER CONSULTING

Entwickeln Sie moderne Enterprise-Applikationen mit Vue.js

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, PUT, 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 / Pinia

• 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 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

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 / Pinia mit der Composition-API

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

Mit unserer "Vue.js - Beratung, Coaching, Workshop, Training" 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 Frontend-Web-Frameworks auf dem Markt zu entwickeln.