Vue.js 3 - Grundkurs

In dieser 2-tägigen Schulung "Vue.js 3 - Grundkurs" lernen Sie die Grundlagen, die allen SPA-Libraries (wie Vue oder React) zugrunde liegen, sowie die Besonderheiten von Vue. Dabei wird insbesondere auf das 2020 erschienene Vue 3 eingegangen. Am Ende sind sie in der Lage, Anwendungen verschiedenster Komplexität mit Vue umzusetzen und dabei Best Practices zu berücksichtigen.

Zum Seminar: Vue 3 Grundkurs

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 (nach Bedarf)

• Entwicklung mit node.js und npm
• 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: 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

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
• Senden von HTTP-Requests mittels fetch oder axios
• Verwenden von localStorage aus Vue

Komponenten Vertiefung

• Two-Way-Binding bei eigenen Komponenten
• Slots (Übergeben von Inhalten)
• Prop Validierung und Prop Types

Weiterführende Themen

• 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