GEDOPLAN

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

24.03.–26.03.2025

Online
3 Tage
Rabatt ab 2 Personen
ausgebucht

1.860,00 €
Details

28.04.–30.04.2025

Online
3 Tage
Rabatt ab 2 Personen
Plätze frei

1.860,00 €
Details

19.05.–21.05.2025

Online
3 Tage
Rabatt ab 2 Personen
Plätze frei

1.860,00 €
Details

23.06.–25.06.2025

Online
3 Tage
Rabatt ab 2 Personen
Plätze frei

1.860,00 €
Details

28.07.–30.07.2025

Online
3 Tage
Rabatt ab 2 Personen
Plätze frei

1.860,00 €
Details

25.08.–27.08.2025

Online
3 Tage
Rabatt ab 2 Personen
Plätze frei

1.860,00 €
Details

29.09.–01.10.2025

Online
3 Tage
Rabatt ab 2 Personen
Plätze frei

1.860,00 €
Details

27.10.–29.10.2025

Online
3 Tage
Rabatt ab 2 Personen
Plätze frei

1.860,00 €
Details

17.11.–19.11.2025

Online
3 Tage
Rabatt ab 2 Personen
Plätze frei

1.860,00 €
Details

15.12.–17.12.2025

Online
3 Tage
Rabatt ab 2 Personen
Plätze frei

1.860,00 €
Details

Diese Schulung bieten wir auch als maßgeschneiderte Firmenschulung an

GEDOPLAN erstellt für Sie auf Ihre Unternehmensziele zugeschnittene Firmenschulung.
Durch unser modulares Schulungssystem sind wir in der Lage, anhand Ihrer Angaben eine individuelle Schulung zu gestalten. Denn die optimale Weiterbildung Ihrer Mitarbeiter nach Ihren Vorgaben und Anforderungen stehen bei uns im Mittelpunkt.
Bei Interesse nehmen Sie bitte Kontakt, wir führen dann gerne mit Ihnen ein unverbindliches Gespräch

Firmenschulung anfragen

Sie brauchen eine maßgeschneiderte Schulung?

GEDOPLAN erstellt für Sie auf Ihre Unternehmensziele zugeschnittene Firmenschulungen. Durch unser modulares Schulungssystem sind wir in der Lage, anhand Ihrer Angaben eine individuelle Schulung zu gestalten. Denn die optimale Weiterbildung Ihrer Mitarbeiter nach Ihren Vorgaben und Anforderungen stehen bei uns im Mittelpunkt. Bei Interesse nehmen Sie bitte Kontakt mit uns auf, wir führen dann gerne mit Ihnen ein unverbindliches Gespräch.

GEDOPLAN - Telefonkontakt

030 / 20 89 82 63 0

GEDOPLAN - E-Mail Kontakt

Tim.Neumann@GEDOPLAN.de

Firmenschulung anfragen

Weitere Schulungen

Vorträge & News zum Thema
Es wurden keine Ergebnisse gefunden, die deinen Suchkriterien entsprechen.

News aus Schulung, Beratung & Softwareentwicklung

News aus Schulung, Beratung & Softwareentwicklung

News aus Schulung, Beratung & Softwareentwicklung

Das sagen Kursteilnehmer

Das sagen Kursteilnehmer

Das sagen Kursteilnehmer

Unsere Trainer

Unsere Trainer

Unsere Trainer

Kontakt

Brauchen Sie eine individuelle IT-Schulung, eine fundierte Beratung oder eine individuelle Softwareentwicklung? Dann sind Sie hier genau richtig!

Tim Neumann

Geschäftsleitung
GEDOPLAN - Telefonkontakt

030 / 20 89 82 63 0

GEDOPLAN - E-Mail Kontakt

info@gedoplan.de

GEDOPLAN GmbH
Stieghorster Straße 60
33605 Bielefeld

GEDOPLAN GmbH
Kantstraße 164
10623 Berlin

    Kontakt

    Tim Neumann

    Geschäftsleitung
    GEDOPLAN - Telefonkontakt

    030 / 20 89 82 63 0

    GEDOPLAN - E-Mail Kontakt

    info@gedoplan.de

    GEDOPLAN GmbH
    Stieghorster Straße 60
    33605 Bielefeld

    GEDOPLAN GmbH
    Kantstraße 164
    10623 Berlin

    Brauchen Sie eine individuelle IT-Schulung, eine fundierte Beratung oder eine individuelle Softwareentwicklung? Dann sind Sie hier genau richtig!