Java Kurse
von Java Profis.
Kursinhalte
- 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
Einleitung
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!
Zielgruppe
Entwickler, Programmierer mit Erfahrung in HTML, CSS, JavaScript, die mit Vue.js moderne, komplexe, reaktionsschnelle sowie skalierbare Webanwendungen entwickeln wollen.
Dauer und Uhrzeiten
Dauer
3 Tage.
Startzeit für den ersten Schulungstag
10:00 Uhr - 17:00 Uhr.
Endzeit am letzten Schulungstag
max. 16:00 Uhr.
Normale Schulungszeit
09:00 - 16:30 Uhr.
Pausen
Es werden min. 3 Pausen pro Tag durchgeführt.
Über den Dozenten
Peter Hecker arbeitet seit über 30 Jahren als Unternehmer und Führungskraft in IT-, Online- und Weiterbildungsunternehmen.
Peter Hecker verfügt über eine Vielzahl von Kompetenzen und Qualifikationen in unterschiedlichen IT- und Digital-Themen.
Seit über 20 Jahren vermittelt Peter Hecker sein Wissen als Coach, Dozent und Trainer.
Die Teilnehmer seiner Veranstaltungen schätzen seine praktischen Erfahrungen sowie die praxisnahe und pragmatische Wissensvermittlung.
Ask the Experts zu VueJS
Sie haben zu dem Kursthema eine Frage oder stehen vor der Entscheidung, welches JavaScript-Framework das richtige ist? Gerne steht Ihnen Dozent Peter Hecker Rede und Antwort. Schicken Sie uns bitte eine Mail, wir vereinbaren einen kostenfreien Ast the Experts-Termin mit Ihnen.
Tim Neumann: tim.neumann@gedoplan.de
VueJS Schulung maßgeschneidert?
Diese VueJS Schulung gibt es
als individuelle Firmenschulung
und als Online-Schulung.
Kontaktieren Sie gerne mich oder
nutzen Sie unseren
Schulungskonfigurator!
Das erwartet Sie bei uns
Kaffee, Tee und kalte Getränke
Wer öfter trinkt, kann besser denken. Deshalb versorgen wir Sie mit ausreichend gratis Getränken.
Obst, Kekse und Mahlzeiten
Ein voller Bauch studiert zwar nicht gern, aber nur wer sich wohl fühlt, hat auch Spaß am Seminar.
Demos und Beispiele zum Mitnehmen
Unsere Kurse haben einen hohen Praxisanteil. Die komplette Übungsumgebung nehmen Sie bei vielen Kursen am Ende auf einem USB-Stick mit.
Demos und Beispiele zum Mitnehmen
Unsere Kurse haben einen hohen Praxisanteil. Die komplette Übungsumgebung nehmen Sie bei vielen Kursen am Ende auf einem USB-Stick mit.
Lernen Sie uns Kennen
Jens Seekamp
Consultant, Software-Architekt und Dozent rund um Java EE
“Erfahrungen aus der Projekt-Praxis weitergeben und Teilnehmer fortbilden.”
Reinhard Brüggemeyer
Senior Consultant Enterprise Java Team
“Java EE ist praxisorientiert und bietet für jedes Entwicklungsproblem ein Lösungskonzept.”
Stefan Kastigen
Dozent