Vue.js 3 - Kompaktkurs

Ziele

In diesem Kurs lernen die Teilnehmer grundlegende und fortgeschrittene Konzepte und Techniken von Vue.js 3 kennen, um moderne und performante Single-Page-Anwendungen (SPAs) zu entwickeln. Am Ende des Kurses sollten die Teilnehmer in der Lage sein, komplexe Webanwendungen mit Vue.js 3 zu erstellen, bestehende Anwendungen zu verbessern, sowie die Tools und Technologien rund um Vue.js effektiv einzusetzen.

Zielgruppe

Webentwickler

Voraussetzungen

• Solide Kenntnisse in HTML, CSS und JavaScript
• Kenntnisse in der Entwicklung von Single-Page-Anwendungen (SPA)
• Grundlegende Erfahrungen mit der Arbeit mit node.js und npm

Agenda

Einführung in Vue.js und Webentwicklung

• Entwicklung moderner Frontend-Anwendungen
• Überblick und Gemeinsamkeiten von Vue, React und Angular
• Deklarative/datengetriebene Architektur
• Komponenten: Eigene HTML-Tags erstellen
• Initialisieren eines Vue-Projektes mittels Vue CLI

JavaScript-Grundlagen für Vue

• JavaScript-Versionen
• Module (import und export)
• Pfeilfunktionen
• this in Objektmethoden

Vue Grundlagen

• State und deklaratives Rendering
• Arbeiten mit data, methods und computed
• Vue Templatesprache
• Interpolation
• Properties binden
• CSS-Klassen
• Events
• if / else if / else
• Elemente wiederholen
• Two-way-binding für Inputs

Komponenten in Vue

• Grundbausteine moderner Web-Anwendungen
• Einbinden bestehender Vue-Komponenten
• Überblick über Komponentenlibraries für Vue
• Erstellen eigener Komponenten
• Datenfluss zwischen Komponenten mittels Props und Events
• Komponenten inspizieren mit den Vue Devtools

Das Composition API in Vue 3

• Vergleich zwischen dem Options API und dem neuen Composition API
• State mit dem Composition API (ref und reactive)
• Props und Events mit dem Composition API
• Side effects
• Verwenden von lifecycle hooks, watchEffect und watch für side effects

Fortgeschrittene Themen in Vue

• Senden von HTTP-Requests mittels fetch oder axios
• Verwenden von localStorage aus Vue
• Two-Way-Binding bei eigenen Komponenten
• Slots (Übergeben von Inhalten)
• Prop Validierung und Prop Types
• Routing mit vue-router
• Verwendung mit TypeScript
• Change Detection in Vue
• State Management mit Pinia (ehemals Vuex)
• Testen von Vue-Anwendungen
• Übergänge und Animationen
• Render-Funktionen