VueJS - Power Workshop: Der komplette Einstieg Online-Schulung - Webinar von GEDOPLAN GmbH

Einführung in das JavaScript-Framework VueJS

Inhalte

  • 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

Lernziele

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.

Zielgruppen

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

  • *Das ist eine Online-Schulung*
  • 3 praxisnahe Schulungstage mit vielen Übungen
  • der Trainer stellt wie üblich die neue Themen vor
  • der Teilnehmer kann jederzeit Fragen stellen
  • Übungen werden mit Trainer-Unterstützung durchgeführt
  • bei Problemen klinkt sich der Trainer bei dem Teilnehmer auf dem Rechner ein
  • Voraussetzungen für eine Online-Schulung pro Teilnehmer:
  • stabiles Internet, Webcam und Lautsprecher und ein ruhiger Platz
  • Dozent: Peter Hecker

Termine und Orte

Datum Uhrzeit Dauer Preis
Webinar
09.08.2021 - 11.08.2021 09:00 - 16:30 Uhr 22.5 h Jetzt buchen ›
18.10.2021 - 20.10.2021 09:00 - 16:30 Uhr 22.5 h Jetzt buchen ›
13.12.2021 - 15.12.2021 09:00 - 16:30 Uhr 22.5 h Jetzt buchen ›

SG-Seminar-Nr.: 5756561

Termine

  • 09.08.2021 - 11.08.2021

    Webinar

  • 18.10.2021 - 20.10.2021

    Webinar

  • 13.12.2021 - 15.12.2021

    Webinar

Preise inkl. MwSt. Es können Gebühren anfallen. Für eine exakte Preisauskunft wählen Sie bitte einen Termin aus.

Jetzt buchen ›
Seminar merken ›

Semigator berücksichtigt

  • Frühbucher-Preise
  • Last-Minute-Preise
  • Gruppenkonditionen

und verfügt über Sonderkonditionen mit einigen Anbietern.

Der Anbieter ist für den Inhalt verantwortlich.

Über Semigator mehr erfahren

  • Anbietervergleich von über 1.500 Seminaranbietern
  • Vollständige Veranstaltungsinformationen
  • Schnellbuchung
  • Persönlicher Service
Datum Uhrzeit Dauer Preis
Webinar
09.08.2021 - 11.08.2021 09:00 - 16:30 Uhr 22.5 h Jetzt buchen ›
18.10.2021 - 20.10.2021 09:00 - 16:30 Uhr 22.5 h Jetzt buchen ›
13.12.2021 - 15.12.2021 09:00 - 16:30 Uhr 22.5 h Jetzt buchen ›