Templates

Aufgabe 1: Beispiel aus der Vorlesung

Implementieren Sie das Beispiel von der Folie "Vollständiges Beispiel" aus der Vorlesung, um die Template-Verarbeitung mit Vue auszuprobieren. Legen Sie zu diesem Zweck eine neue HTML-Datei an und ggf. für eine stärkere Trennung des Codes zusätzlich eine JavaScript-Datei und importieren Sie Vue mit einem <script>-Tag in die HTML-Datei. Vue können Sie durch Rechtsklick auf diesen Link herunterladen und im gleichen Verzeichnis wie ihre HTML-Datei speichern.

Aufgabe 2: Gästeliste ausgeben

Erweitern Sie die Lösung von Aufgabe 1 nun - analog zur Folie "Beispiel: Gästeliste ausgeben" - um die Ausgabe der Personen einer Gästeliste mit Hilfe einer v-for-Direktive iterativ auszugeben.

Aufgabe 3: Eingelesene Personendaten tabellarisch darstellen

In der vorigen Aufgabe wurden die Kontextdaten durch direktes Zuweisen an eine Variable in Programmcode erstellt. Im Sinne der Konzeption eines Programms nach dem MVC-Designmuster sollten Daten von der Präsentation und Steuerung getrennt gespeichert werden.

Die persönlichen Daten einer Gruppe von Personen sollen deswegen in dieser Aufgabe in geeigneter Anordnung als JSON-Datei gespeichert und mit Hilfe einer Webseite tabellarisch angezeigt werden.

Es liegen die Daten folgender Personen vor:

Legen Sie eine JSON-Datei für diese Daten so an, dass später die einzelnen Personeneinträge durch eine v-for-Direktive, entsprechend zu den Erläuterungen auf der Folie "Beispiel: Gästeliste ausgeben" dargestellt werden. Strukturieren Sie Ihr Template in der Weise, dass die Darstellung der Daten wie oben in Form einer Tabelle erfolgt.

Erweitern Sie Ihre vorhandene HTML- und ggf. JavaScript-Datei oder legen Sie eine neue Dateistruktur an. Lesen Sie mittels JavaScript die Daten aus der JSON-Datei ein. Zeigen Sie die Daten mit Hilfe eines Vue-Templates als HTML-Tabelle an.

Aufgabe 4: Eingeschachtelte Daten ausgeben

Es liegen die Daten folgender Personen zusammen mit deren Adresse vor:

Legen Sie eine JSON-Datei für diese Daten an. Die Adressdaten werden jeweils in einem eingeschachtelten Objekt adresse mit den Eigenschaften wohnort, str für die Straße und nr für die Hausnummer gespeichert.

Lesen Sie in den vorhandenen oder neuen Projektdateien wieder mittels JavaScript die neuen JSON-Daten ein und stellen Sie diese mit Hilfe von Vue tabellarisch wie oben angegeben als HTML-Tabelle dar.

Aufgabe 5: Vorhandene eingeschachtelte Daten ausgeben

Zu den folgenden Personendaten existieren zum Teil Adressangaben, zum Teil aber auch nicht:

Legen Sie eine JSON-Datei für diese Daten an. Lesen Sie dann in den vorhandenen oder neuen Projektdateien wieder mittels JavaScript die neuen JSON-Daten ein und stellen Sie diese wieder mit Hilfe von Vue tabellarisch wie folgt als HTML-Tabelle dar:

Fehlen Adressangaben, so wird im Template in der entsprechenden Tabellenspalte die Zeichenfolge "./." eingefügt. Nutzen Sie zu diesem Zweck die v-if-Direktive, mit der Sie prüfen, ob in den Personendaten ein eingeschachteltes Adressobjekt existiert. Prüfen Sie dabei auf das eingeschachtelte Objekt selbst und nicht auf dessen Objekteigenschaften. Die v-if-Direktive unterstützt bislang keine beliebig verschachtelten Objekte. Nähere Informationen zum bedingten Rendern unter Vue finden Sie unter diesem Link.

Aufgabe 6: Feld ausgeben

Neben dem Namen und den eventuell vorhandenen Adressangaben, umfassen die folgenden Personendaten auch die Merkmale Alter, Größe und Gewicht:

Legen Sie eine JSON-Datei für diese Daten an.

Die in der Tabelle jeweils angegebenen drei Merkmale Alter, Größe und Gewicht werden im zugehörenden Objektliteral in einem Feld mit dem Eigenschaftsnamen merkmale gespeichert.
Die Adressdaten stehen wieder in einem eingeschachtelten Objekt adresse, mit den Eigenschaften wohnort, str für die Straße und nr für die Hausnummer.

Legen Sie eine JSON-Datei für diese Daten an. Lesen Sie dann in den vorhandenen oder neuen Projektdateien wieder mittels JavaScript die neuen JSON-Daten ein und stellen Sie diese wieder mit Vue wie folgt als HTML-Tabelle dar:

Nicht vorhandene Adressangaben werden wieder mit der Zeichenfolge "./." codiert.

Für die Verarbeitung der Merkmale benötigen Sie eine geschachtelte v-for-Direktive, d. h. eine v-for-Direktive in einer v-for-Direktive. Es wird in diesem Zusammenhang auch von einem geschachtelten iterativen Kontext gesprochen.