Vue.js

Vue.js ist ein JavaScript-Framework zur Implementierung von clientseitigen Webanwendungen unter Nutzung des MVVM-Architekturmusters. Es erlaubt die Umsetzung von klar strukturierten und testbaren Anwendungen und bietet eine umfassende und moderne Tool-Unterstützung. Die Sprachelemente des Frameworks sind stark von Angular und React inspiriert, und versuchen, die besten Konzepte aus beiden Frameworks auf elegante Weise zu kombinieren. Eine performante Virtual-DOM-Implementierung erlaubt schnelles Rendern von Seiten und eine aktive Community stellt eine Vielzahl an Erweiterungen bereit, die typische Aufgaben, wie Serveranbindung oder Verwaltung von Zuständen, umsetzt. Vue.js zeichnet sich darüber hinaus durch seine Skalierbarkeit aus; es kann im Projekt schrittweise eingeführt werden (Vue.js ist progressives Framework) und eignet sich somit auch für Migrationsprojekte. In diesem Seminar stehen die Grundlagen sowie die Philosophie von Vue.js im Zentrum. Die Konzepte werden mit vielen praktischen Codebeispielen und Anwendungsfällen vermittelt und ermöglichen so einen tiefgreifenden Einblick in das Arbeiten mit Vue.js.

Inhalte des Seminars

Einführung

• Konzepte und Grundbegriffe von Vue.js
• Installationswege
• Vergleich und Abgrenzung zu Angular/React/jQuery

Die Vue-Instanz

• Instanzen erzeugen
• Lebenszyklus von Vue-Instanzen
• Daten und Methoden

Template-Syntax

• Interpolationen von Text, HTML und Attributen
• Direktiven und Kurzschreibwesen

Properties

• Computed Properties
• Watcher

Bedingtes Rendern

• v-if, v-else und v-show
• Umsetzung von Listen mit v-for

Komponentenbildung

• Wiederverwendung
• Datenübergabe zwischen Komponenten
• Kommunikation zwischen Komponenten
• Slots

Event-Handling mit Vue

• DOM-Events nutzen
• Kurzschreibweisen und nützliche Helfer

Umgang mit Formularen

• Text, Checkboxen, Radioboxen … umsetzen
• Databinding
• Validierung

Routing

• Aufbau einer Applikation mit Routern
• Routen-Definition
• Navigation zwischen Routen und Datenübergabe

Weitere Konzepte

• HTTP-Kommunikation mit XMLHttpRequest und JSONP
• Axios und vue-resource
• Nutzung von Filtern
• Zustandsverwaltung mit Vuex und dem ›store‹
• Arbeiten mit der Vue CLI
• Testen