Vue.js - Power Workshop
Vue.js Kurs: Lerne mit Vue.js Webanwendungen zu entwickeln
Zu den TerminenVue.js ist ein großartiges JavaScript-Framework für die Erstellung von Frontend-Anwendungen. Vue.js mischt das Beste aus Angular und React. Mit unserem Vue.js - Power Workshop gelingt der professionelle Einstieg in das Vue.js Framework. Du erhältst im Vue.js - Power Workshop ein vollständiges Verständnis der Architektur hinter einer Vue.js-Anwendung und lernst alle relevanten Informationen um moderne, komplexe, reaktionsschnelle sowie skalierbare Webanwendungen mit einem der modernsten JavaScript-Frameworks auf dem Markt zu entwickeln.
Lernziele
Du lernst im Vue.js - Power Workshop die Grundlagen von Vue.js, wie man eine Entwicklungsumgebung einrichtet, mit dem DOM interagiert, Komponenten entwickelt und verwendet, Formulareingaben bindet, sowie Direktiven, Filter und Mixins einsetzt, Anwendungen mit Animationen und Übergängen schöner gestaltet und mit Hilfe von Routing und der Vuex-Zustandsverwaltung professionelle Single-Page-Applikation (SPA) erstellt.
Inhalte
Erste Schritte mit Vue.js
Einführung und Überblick
Vue.js lokal einrichten
Eine erste Vue.js-Anwendung erstellen
Erweiterung der Vue.js-Anwendung
Verwenden von Vue.js zur Interaktion mit dem DOM
VueJS-Vorlagen verstehen
Wie die Syntax und die Vue-Instanz der Vue.js-Vorlage zusammenarbeiten
Zugriff auf Daten in der Vue-Instanz
Bindung an Attribute
Verstehen und Anwenden von Direktiven
Einmaliges Rendern mit v-once
Ausgabe von HTML-Code
Auf Ereignisse reagieren
Abrufen von Ereignisdaten aus dem Ereignisobjekt
Eigene Argumente mit Ereignissen weitergeben
Ändern eines Ereignisses mit Ereignis-Modifikatoren
Abfangen von Tastatur-Ereignissen
Schreiben von JavaScript-Code in Vorlagen
Verwendung der Zwei-Wege-Bindung
Reagieren auf Änderungen mit berechneten Eigenschaften
Eine Alternative zu berechneten Eigenschaften: Änderungen beobachten
Zeitersparnis durch Abkürzungen
Dynamisches Styling mit CSS-Klassen
Verwendung von Conditionals und Rendering-Listen
Bedingtes Rendering mit v-if und v-else-if
Verwendung einer alternativen v-if-Syntax
Rendering von Listen mit v-for
Abrufen des aktuellen Indexes
Verwendung einer alternativen v-for-Syntax
Schleifen durch Objekte
Schleifen durch eine Liste von Zahlen
Nachverfolgung von Elementen mit v-for
Die Vue.js-Instanz verstehen
Einige Grundlagen über die Vue-Instanz
Verwendung mehrerer Vue-Instanzen
Zugriff auf die Vue-Instanz von außen
Wie Vue Daten und Methoden verwaltet
Verwendung von $el und $data in Vorlagen
Verwendung von $refs in Vorlagen
Weitere Informationen über die Vue-API
Laden einer Vorlage
Verwendung von Komponenten
Einschränkungen bei Templates
Wie Vue.js das DOM aktualisiert
Der Lebenszyklus der VueJS-Instanz
Entwicklungs-Workflow mit Webpack und Vue CLI
Warum brauchen wir einen Entwicklungsserver?
Was bedeutet "Entwicklungs-Workflow"?
Installation des Vue CLI und Erstellen eines neuen Projekts
Ein Überblick über die Ordnerstruktur der Webpack-Vorlage
Verstehen von ".vue" Dateien
Verstehen des Objekts in der Vue-Datei
So erstellen Sie Ihre App für die Produktion
Mehr über ".vue" Dateien und die CLI
Debuggen von Vue-Projekten
Einführung in Komponenten
Komponenten - Überblick und Grundlagen
Speichern von Daten in Komponenten
Lokale und globale Registrierung von Komponenten
Die "Root-Komponente" in der App.vue-Datei
Erstellen einer Komponente
Verwendung von Komponenten
Komponenten und Ordnerstrukturen
Benennung der Komponenten-Tags (Selektoren)
Gültigkeit der Komponenten-Stile
Kommunikation zwischen Komponenten
Kommunikationsszenarien zwischen Komponenten
Verwendung von Eigenschaften für Parent- / Child-Kommunikation
Benennung von Eigenschaften
Verwendung von Eigenschaften in der Child Component
Validierung von Eigenschaften in der Child Component
Benutzerdefinierte Ereignisse für Child- / Parent-Kommunikation
Verstehen von Unidirektionalem Datenfluss
Kommunikation mit Callback-Funktionen
Kommunikation zwischen Child-Komponenten
Verwendung eines Ereignisbusses für die Kommunikation
Zentralisierung von Code in einem Ereignisbus
Erweiterte Komponentenverwendung
Weitergabe von Inhalten
Inhalte mit Slots übergeben
Styling von Slot-Inhalten
Verwendung mehrerer Slots per Namen
Standard-Slots und Slot-Standards
Umschalten von Komponenten mit dynamischen Komponenten
Verstehen des Verhaltens dynamischer Komponenten
Der Lebenszyklus von dynamischen Komponenten
Benutzereingaben über Formulare
Grundlegende Formularanbindung von Eingabefeldern
Gruppierung von Eingabedaten
Vorbelegung von Eingabefeldern
Änderung von Benutzereingabe mit Eingabemodifikatoren
Mehrzeilige Eingabefelder
Verwendung von Kontrollkästchen (checkbox)
Verwendung von Optionsfeldern (radio)
Listendelder mit "select" und "option"
Funktionsweise von v-model
Erstellung von benutzerdefinierten Elementen
Bestätigen und Absenden eines Formulars
Direktiven verwenden und erstellen
Direktiven verstehen
Funktionsweise von Direktiven
Erstellen einer einfachen Direktive
Weitergabe von Werten an benutzerdefinierte Direktiven
Weitergabe von Argumenten an benutzerdefinierte Direktiven
Ändern einer benutzerdefinierten Direktive mit Modifikatoren
Lokale Registrierung von Direktiven
Verwendung mehrerer Modifikatoren
Komplexere Werte an Direktiven übergeben
Filter und Mixins
Erstellen eines lokalen Filters
Globale Filter und Verkettung von Filter
Alternative zu Filtern: Berechnete Eigenschaften
Mixins verstehen
Erstellen und Verwenden von Mixins
Zusammenführung von Mixins
Gültigkeitsbereich von Mixins
Animationen und Übergänge
Verstehen von Übergängen
Definieren einer Transition
CSS-Klassen für Übergänge zuweisen
Erstellen eines "Fade"-Übergangs mit CSS-Transition
Erstellen eines "Slide"-Übergangs mit CSS-Animation
Kombination von Animations- und Übergangs-Eigenschaften
Animieren von v-if und v-show
Festlegen einer on-load-Animation
Verwendung verschiedener CSS-Klassennamen
Verwendung dynamischer Namen und Attribute
Reagieren auf Transition-Ereignisse
Erstellen einer Animation in JavaScript
Animieren von dynamischen Komponenten
Animieren von Listen mit
HTTP-Server-Kommunikation mit Axios
Zugriff auf Http über Axios
Daten an einen Server senden (Senden einer POST-Anfrage)
Daten holen und transformieren (Senden einer GET-Anfrage)
Globale Konfiguration der vue-ressource
Abfangen von Anfragen und Antworten
Erstellen von benutzerdefinierten Ressourcen
Unterschied Ressourcen zu "normalen" Http-Anfragen
Routing in Vue.js
Einrichten des Vue-Routers (vue-router)
Einrichten und Laden von Routen
Verstehen der Routing-Modi (Hash und History)
Navigieren mit Router-Links
Navigation aus dem Code heraus
Routenparameter einstellen
Abrufen und Verwenden von Routenparametern
Reagieren auf Änderungen der Routenparameter
Kinderrouten einrichten (verschachtelte Routen)
Benannte Routen
Query-Parameter verwenden
Mehrere Router-Ansichten (benannte Router-Ansichten)
Umleitung von Routen
Einrichten von "Catch All" und "Wildcard" Routen
Animieren von Routenübergängen
Weitergabe des Hash-Fragment
Steuern des Scroll-Verhaltens
Routenschutz mit "Guards"
Verwendung des "beforeEnter" und "beforeLeave"-Guard
"Lazy Loading" von Routen
Zustandsverwaltung mit Vuex
Gründe für Zustandsverwaltung
Verständnis des "zentralisierten Zustands"
Verwendung des zentralisierten Zustands
Verstehen und Verwendung von Getter
Zuordnung von Getter zu Properties
Verstehen und Verwendung von Mutationen
Verwendung von Actions
Zuordnung von Actions zu Methoden
Vue.js - Power Workshop Zielgruppe:
Der Vue.js - Power Workshop richtet sich an Web-Entwickler, Web-Programmierer mit Erfahrung mit HTML, CSS, JavaScript, die mit VueJS moderne, komplexe, reaktionsschnelle sowie skalierbare Webanwendungen entwickeln wollen.
Vue.js - Power Workshop Voraussetzungen:
Für deinen Besuch des Vue.js - Power Workshop solltest du Erfahrung mit HTML, CSS und JavaScript besitzen.
Vue.js Hintergrund:
Vue.js ist ein äußerst beliebtes JavaScript-Framework, das speziell für die Entwicklung von Benutzeroberflächen (Frontends) von Webanwendungen entwickelt wurde. Es ermöglicht es Entwicklern, interaktive und dynamische Webseiten zu erstellen, ohne dabei auf komplexe Konzepte zurückgreifen zu müssen.
Schulungen, die dich interessieren könnten
Unternehmen in Deutschland, Österreich und der Schweiz, die uns vertrauen
Das sagen unsere Kunden
Wir arbeiten ständig daran uns zu verbessern. Dafür sind wir auf das Feedback unserer Kunden angewiesen.

Kompetentes Online-Training mit Learning by Doing. Besser geht nicht. Jeannette M.
Sehr gute Planung und Organisation aller Microsoft Office Schulungen. Incas Training ist sehr zu empfehlen! Christopher M.
Toller Service. Hatte auf Ihrer Seite KOSTENLOS den Weg gefunden, sämtliche Animationen mit einem Schritt zu entfernen. Hat super geklappt. Vielen lieben Dank dafür. Wenn ich schon nichts bezahlen muss, dann wenigstens eine passenden Bewertung :-) Thomas S.