HTML5-Tutorium: JavaScript: Hello World Vue 02
Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:
| Korrektheit: 3 (zu größeren Teilen überprüft) |
Umfang: 4 (unwichtige Fakten fehlen) |
Quellenangaben: 3 (wichtige Quellen vorhanden) |
Quellenarten: 5 (ausgezeichnet) |
Konformität: 3 (gut) |
Inhalt | Teil 1 | Teil 2 | Teil 3 | Teil 4 | Teil 5 | Teil 6 | Vue 1 | Vue 2 | Vue 3 | Vue 4 | Vue 5 | Vue 6
Musterlösung
Git-Repository, git checkout v02 (JavaScript)
Git-Repository (TypeScript), git checkout v02
Anwendungsfälle (Use Cases)
Gegenüber dem erste Teil des Vue-Tutoriums ändern sich die die Anwendungsfälle nicht. Die Anwendung leistet also genau dasselbe wie zuvor.
Aufgabe: Ergänze einen Keyup-Event-Handler, so dass das Name mit Hilfe der Entertaste übergeben werden kann, wenn der Fokus auf dem Namenfeld liegt.
Erstellen eines neuen Projektzweigs
Erstellen Sie einen neuen Projektzweig (branch) innerhalb von hello_world_vue:
git checkout v01 # Wechsle in den Branch v01
git checkout -b v02 # Klone v01 in einen neuen Branch v02
MVC-Prozess
Zur Lösung der Aufgabe wird eine eigene Controller-Klasse geschrieben.
Dieser Lösung liegt der MVC-Prozess zu Grunde: Die Anwendung besteht aus Model, Views und Controller.
Das Model enthalt den aktuellen Zustand des Systems in Form von Daten (zum Beispiel die Position und den Radius eines Kreises).
Ein (oder auch mehrere Views) visualisieren Daten aus dem Model. So wird beispielsweise der zuvor genannte Kreis in einem durch den Bildschirm vorgegebenen Koordinatensystem an die im Model gespeicherte Position mit dem passenden Radius gezeichnet. Die View agieren als Observer. Das heißt, sie lauschen auf Änderungen am Model und und aktualisieren sich gegebenenfalls.
Der Benutzer (User) nimmt die Visualisierungen wahr (auch als Observer). Er kann überdies mittels so genannten Controllern mit der Anwendung interagieren. Die Controller reagieren auf Devices wie Maus und Tastatur. Der Benutzer kann mit Hilfe derartiger Devices auch Formulare, die in der View enthalten sind, ausfüllen. Änderungen, die der Benutzer (mit Hilfe von geeigneten Devices) an einer View vornimmt, führen zu Änderungen im Model. Das heißt, die meisten Benutzeraktionen haben schlussendlich Änderungen im Model zur Folge, die dann wieder von der View angezeigt werden.
Es gibt noch eine spezielle Kategorie von Controller-Devices: Force Feedback Controller. Diese reagieren z. B. mittels Vibration auf bestimmte Modelländerungen. Force Feedback Controller sind daher in der Regel bidirektional mit dem Model verknüpft.
Fortsetzung des Tutoriums
Sie sollten nun Teil 3 des Vue-Tutoriums bearbeiten. Die Daten werden in einem Store (Model) gespeichert.
Quellen
- Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
