M5-A1 (Optional)

Ziel der Aufgabe ist das weitere Kennenlernen und Einüben von Vue.js, womit wir anschließend weitere dynamische Oberflächen konstruieren können. Hinweis: Die Aufgabe ist optional, damit Sie diese bei vorhandenen Vorkenntnissen im Bereich JavaScript überspringen können. Schreiben Sie ein JavaScript-Programm mit Vue …

• 5-vue7-component.html: …, das eine Vue-Komponente beinhaltet, die einen Zähler enthält. Der Zähler soll mit 1 initialisiert sein. Fügen Sie zwei Schaltflächen ein, die bei einem Klick den Zähler hoch- oder runterzählen. Der Klick auf Runterzählen soll eine Methode aufrufen, welche die Berechnung (-1) durchführt.

• 5-vue8-component-interaction.html: …, das zwei Vue-Komponenten A und B beinhaltet, wobei A die Komponente B verwendet. Entwickeln Sie ein Beispiel, bei dem ein Klick auf ein Element in B zu einem Aufruf einer Methode in A führt.

• 5-vue9-component-pagination.html: …, das eine Vue-Komponente „Pagination“ enthält, die ein seitenweises Laden simuliert.

< Seitenzahl >

Die Seitenzahl ist initial 1 und geht bis 10. Bei einem Klick auf < (Kleiner als) wird die Seitenzahl um eins heruntergezählt. Bei > (Größer als) wird die Seitenzahl um eins vergrößert. Die Seitenzahl kann nicht kleiner 1 oder größer 10 werden.