Vue 3 mit TypeScript

Seminarziel

Nach dieser Schulung kennen Sie die Grundlagen von Vue 3 mit TypeScript und können mit Components, Directives, Routing und dem Pinia-Store professionelle Web-Anwendungen erstellen.

Inhalt

• Einstieg in Vue 3 mit Vite
  • Konzepte von Vue
  • Konfiguration der Umgebung, Tools, Plugins
  • Neue Projekte Vite erzeugen
  • Erstellen einer Start-Seite
  • Composition API / Option API
  • Einsatz mehrerer Root Elemente / Fragments
• Templates, Komponenten, Direktiven
  • Erstellen von Components
  • Templates und Template-Syntax
  • Data-Binding mit Attributes 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 Components
  • Bedingte Formatierung mit style- und class-Bindings
  • Verwendung von SASS und anderen CSS-Präprozessoren
  • Verwendung einzelner Lifecycle Hooks
• Kommunikation zwischen Components
  • Erstellen von Child-Components
  • Datenaustausch mit Child-Components über Props
  • Validierung von Props
  • Weitergabe an Parent-Components mit Events
  • Einfügen von Inhalten in Child-Components mit Slots
  • Daten Komponentenübergreifend übergeben und entgegennehmen mit provide / inject
  • Verwendung der Portals-Komponente / Teleport
• Erstellen von Custom Directives
  • Erzeugen einer Custom Directive
  • Datenübergabe an Directives
  • Verwenden der Directive-Lifecycle-Hooks
  • Globale Directives
• AJAX Request
  • AJAX GET- und POST-Requests nativ mit der Fetch API
  • AJAX Requests mit der Bibliothek Axios
• Seitennavigation mit Routing
  • Hinzufügen von Routing in eine Vue-App
  • Verlinkung von Routen
  • Styling von Links mit der ActiveRoute
  • Navigating per JavaScript-Code
  • Arbeiten mit Routen-Parameter
  • Weitergabe von Params als Props
  • Verwendung von geschachtelten Routen
  • Verwendung benannter Views
  • Aktivieren des HTML5-History-Modus
  • Schutz von Seiten mit den Navigation-Guards
• State Management mit Pinia als Data Store
  • Pinia als Store verwenden
  • State Management / Pinia als neuer Standard in Vue 3
  • Kurzer Überblick über Pinia vs 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 Ergebnis auswerten
  • Mocks am Beispiel von AJAX-Requests mit Axios erstellen
  • Mock Browser API mit Happy DOM
  • Erstellen von Spy-Objekten
  • Testabdeckung der Anwendung durch Coverage beobachten
  • Snapshots erstellen
  • Eigene Vue-Komponenten mounten und testen