# Vue 3 mit TypeScript ## Beschreibung Vue 3 ist die neueste Version von Vue, die vom Vue-Team von Grund auf mit TypeScript neu geschrieben wurde. Die neue Version bietet zahlreiche neue und praktische Features, die es Entwicklern ermöglicht, lesbare und wartbare Komponenten zu erstellen und Vue-Anwendungen zu strukturieren. Mit Vue erhalten sie ein freies, sehr schnelles, stabiles und ausgereiftes Framework. Dabei besticht es durch eine extrem steile Lernkurve. Wenig Kenntnisse in HTML, CSS und JavaScript reichen bereits aus, um mit Vue ansprechende und funktional komplexe Anwendungen mit webbasiertem Frontend zu erstellen. Vite ist ein JavaScript-Build–Tool, welches eine schnellere und schlankere Entwicklungserfahrung für moderne Webprojekte bieten soll. Das Wort *Vite* kommt hierbei vom Französischen und bedeutet *schnell*. Vite ersetzt seit Vue 3 als neuer Standard das vorherige Vue CLI. Das ganze Seminar ist praxisnah und "HandsOn" ausgerichtet. Die meisten Punkte der Agenda werden jeweils in einem Projekt integriert, damit Sie die Verwendung und ihren Einsatzzweck in praktischen Beispielen nachvollziehen und auf Ihren eigenen Anwendungsfall übertragen können. Ablauf: Am ersten Seminartag lernen Sie die Erstellung eines Vue-Projekts mit Vite sowie die Architektur kennen. Sie erlernen die Grundlagen, wie zB die Kontrollstrukturen, das Binding und Eventhandling sowie die Kommunikation zwischen den Komponenten. Am zweiten und dritten Seminartag erstellen Sie ein praxisnahes Projekt "from Scratch" und festigen die Techniken, die sie am Vortag kennengelernt haben. Auch für die Themen **Statemanagement mit Pinia** und **Unit-Testing mit Vitest** werden in dem Seminar eigene kleine Projekte erstellt. Wichtiger Hinweis: Dadurch, dass TypeScript ein Superset von ECMAScript ist, eignet sich dieses Seminar auch für diejenigen, die im Anschluss Vue 3 nur mit JavaScript und ohne TypeScript einsetzen möchten. ## Agenda **Einstieg in Vue 3 mit Vite** - Konfiguration der Umgebung, Tools, Plugins - Neue Projekte mit 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 **Zielgruppe** Web-Entwickler, Web-Programmierer, Developer webbasierter Anwendungen, Web-Worker mit Grundkenntnissen in HTML, CSS und JavaScript, die Web-Anwendungen und Single-Page-Apps (SPA) mit Vue erstellen wollen. **Voraussetzungen** HTML- CSS- und JavaScript-Kenntnisse | | | |---|---| | **Empfohlene Dauer** | je nach Vorkenntnissen 3-5 Tage | | **Preis** | Sie erhalten von mir ein individuelles Angebot. |
Seminarthemen
Programmieren lernen fuer Nicht ProgrammiererInnen
Vue 3 mit TypeScript
Grundlagen der Programmierung
JavaScript Fundamentals Grundlagen
JavaScript Advanced Fortgeschritten
JavaScript fuer Sprachumsteiger
Weitere Links
index
Gute Gruende fuer einen Seminarbesuch
Referenzen
Allgemeine Schulungsbedingungen
Impressum
Datenschutz
MENU
TOP