Vue 3 Grundkurs

Ziele

Vue.js ist ein Framework zum Erstellen von Single-Page-Anwendungen (SPAs). Sie zeichnet sich gegenüber den Hauptalternativen Angular und React vor allem durch einen einfacheren Einstieg aus, steht dabei aber den Alternativen in puncto Funktionalität in nichts nach. Vue.js hat es auf innerhalb kurzer Zeit mit über 150.000 Sternen zum drittbeliebtesten Projekt auf GitHub gebracht und ist weiter am steigen.

In diesem Seminar lernen die Teilnehmer 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.

Zielgruppe

Entwickler mit JavaScript-Erfahrung

Voraussetzungen

Erfahrungen mit HTML und JavaScript

Agenda

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

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

Komponenten vertieft

• 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 Vuex
• Testen von Vue-Anwendungen
• Übergänge und Animationen
• Render-Funktionen