Was ist Vue?

Willkommen bei Vue! Vue (gesprochen wie das englische „view“) ist ein JavaScript-Framework zum Erstellen von Web-Apps, also von Seiten, die auf das reagieren, was du tust. Ein Framework ist fertiger Code, auf dem deine App aufbaut: Es übernimmt die Arbeit, die jede App braucht, und du schreibst das, was deine App besonders macht. Vue wird von vielen Firmen eingesetzt und ist dafür bekannt, dass der Einstieg leichtfällt. In diesem Kurs baust du Schritt für Schritt eine Bestell-App für das Café am Eck: die Speisekarte, die Bestellung des Kunden und ihre Summe.

Im Editor ist schon eine kleine Vue-App. Klicke auf Ausführen: Die Vorschau zeigt die Speisekarte des Cafés. Klicke bei ein paar Getränken auf Hinzufügen und beobachte die Zahlen unter der Speisekarte.

Erinnerst du dich, wie du im JavaScript-Kurs eine Seite verändert hast: Du hast mit querySelector() ein Element gefunden, seinen textContent geändert und mit createElement() neue Elemente erzeugt. Du hast der Seite Schritt für Schritt gesagt, was sie ändern soll.

Vue geht den umgekehrten Weg. Du schreibst eine Vorlage (englisch: Template): HTML, das sagt, was die Seite zeigt, mit Platz für deine Daten. Vue baut die Seite aus der Vorlage und den Daten, und wenn sich die Daten ändern, aktualisiert Vue die Seite von selbst. Wirf einen Blick in App.vue: Die Getränke stehen im Array menue, und die Liste auf der Seite wird daraus erzeugt. Nirgends steht querySelector() oder textContent. Die Funktion zurBestellungHinzufuegen ändert nur zwei Zahlen, anzahl und summe, und Vue zeigt ihre neuen Werte an.

Mach dir keine Sorgen, wenn du noch nicht jede Zeile von App.vue verstehst. Die Liste mit v-for lernst du in der Lektion Bedingungen und Listen, den Button mit @click in der Lektion State und Ereignisse. Bis zum Ende des Kurses schreibst du die ganze App selbst, und noch viel mehr.