Vue.js - Beratung, Coaching, Workshop, Training

Entwickeln Sie moderne Enterprise-Applikationen mit Vue.js

Verwenden Sie eines der erfolgreichsten und besten Software-Frameworks für Ihre Unternehmens-Anwendungen

Von der Einrichtung bis zur Bereitstellung deckt unsere "Vue.js - Beratung, Coaching, Workshop, Training" alles ab! Sie erhalten aktuelle Informationen über Komponenten, Formulare, Http-Zugriff, Routing, Zustandsverwaltung einer Vue.js-App und vieles mehr. Ihre individuellen Fragen und Themenwünsche werden dabei natürlich berücksichtigt.

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. Die Weiterbildung "Vue.js - Intensiv-Schulung für Einsteiger" bieten wir Ihnen als Coaching, Workshop, Training - Live-Online und Vor-Ort an.

Hinweis zum Ablauf

Die Weiterbildung Vue.js - Intensiv-Schulung für Einsteiger bieten wir Ihnen als Firmenseminar sowie Inhouse-Schulung Live-Online und Vor-Ort an. Die Inhalte werden individuell abgestimmt und mit Praxisbeispielen abgerundet. Die Veranstaltung findet ganztägig + halbtägig zu flexiblen Zeiten statt.

Preishinweis

Preis inkl. MwSt. Der Seminarpreis berücksichtigt die Teilnehmeranzahl, z. B.: * bei 3 Teilnehmer: 300 EUR pro Teilnehmer und Tag zzgl. MwSt. * bei 6 Teilnehmer: 200 EUR pro Teilnehmer und Tag zzgl. MwSt * bei 9 Teilnehmer: 150 EUR pro Teilnehmer und Tag zzgl. MwSt.