Nach dieser Schulung kennen Sie die Grundlagen von Vue 3 mit TypeScript und können komponentenbasierte Webanwendungen erstellen. Sie wissen, wie Sie Daten, Props und Events typisieren und die Kommunikation zwischen Komponenten gestalten. Sie können Templates, Bindings und Direktiven einsetzen sowie die Seitennavigation mit Vue Router umsetzen. Darüber hinaus kennen Sie das State Management mit Pinia und können eigene Komponenten mit Vitest testen. Die praktischen Projekte unterstützen Sie dabei, die behandelten Techniken auf Ihre eigenen Anwendungen zu übertragen.
TypeScript in Vue-Komponenten: Typisierung von Daten, Props und Events
Einsatz mehrerer Root-Elemente / Fragments
Templates, Komponenten, Direktiven
Erstellen von Komponenten
Templates und Template-Syntax
Data-Binding mit Attributen und v-bind
Two-Way-Binding mit v-model
Event-Binding mit v-on
Verwenden der Shorthand Bindings
Binding von Computed Properties
Darstellung von Daten mit Interpolation
Bedingte Darstellung von Inhalten mit v-if und v-show
Elemente wiederholen mit v-for
Styling von Komponenten
Bedingte Formatierung mit style- und class-Bindings
Verwendung von Sass und anderen CSS-Präprozessoren
Verwendung einzelner Lifecycle Hooks
Kommunikation zwischen Komponenten
Erstellen von Child-Komponenten
Datenaustausch mit Child-Komponenten über Props
Validierung von Props
Weitergabe an Parent-Komponenten mit Events
Einfügen von Inhalten in Child-Komponenten mit Slots
Daten komponentenübergreifend übergeben und entgegennehmen mit provide / inject
Verwendung von Teleport
Erstellen von Custom Directives
Erzeugen einer Custom Directive
Datenübergabe an Directives
Verwenden der Directive-Lifecycle-Hooks
Globale Directives
AJAX-Requests
AJAX-GET- und POST-Requests nativ mit der Fetch API
AJAX-Requests mit der Bibliothek Axios
Seitennavigation mit Routing
Hinzufügen von Routing zu einer Vue-App
Verlinkung von Routen
Styling aktiver RouterLinks
Navigation per JavaScript-Code
Arbeiten mit Routenparametern
Weitergabe von Params als Props
Verwendung von geschachtelten Routen
Verwendung benannter Views
Aktivieren des HTML5-History-Modus
Schutz von Seiten mit Navigation Guards
State Management mit Pinia als Data Store
Pinia als Store verwenden
State Management mit Pinia in Vue 3
Kurzer Überblick über Pinia im Vergleich zu Vuex
Pinia installieren
Getters und Actions erstellen
Unit Testing mit Vitest
Installation, Integration und Konfiguration von Vitest in einem Vite-Projekt
Eigene Test-Suites erstellen
Mausklicks in Tests simulieren und Ergebnisse auswerten
Mocks am Beispiel von AJAX-Requests mit Axios erstellen
Browser-APIs mit Happy DOM simulieren
Erstellen von Spy-Objekten
Testabdeckung der Anwendung mit Coverage beobachten
Snapshots erstellen
Eigene Vue-Komponenten mounten und testen
Ausblick auf den Vapor Mode
Grundidee des Vapor Mode und des alternativen Rendering-Ansatzes
Vapor im Vergleich zum Virtual DOM
Performance: In welchen Fällen der Modus Vorteile bietet
Einschränkungen und Funktionsumfang
Typische Anwendungsfälle für den Einsatz
Aktivierung im Projekt: Überblick über Konfiguration und Opt-in
Dauer/zeitlicher Ablauf:
3 Tage
Zielgruppe:
Das Seminar richtet sich an Webentwickler, Webprogrammierer und Entwickler webbasierter Anwendungen, die Webanwendungen und Single-Page-Apps mit Vue 3 erstellen möchten.
Teilnahmevoraussetzungen
Sie benötigen Grundkenntnisse in HTML, CSS und JavaScript.
Wir setzen Analyse-Cookies ein, um Ihre Zufriedenheit bei der Nutzung unserer Webseite zu verbessern.
Diese Cookies werden nicht automatisiert gesetzt.
Wenn Sie mit dem Einsatz dieser Cookies einverstanden sind, klicken Sie bitte auf Akzeptieren.
Weitere Informationen finden Sie hier.
