Einführung
In diesem Projekt lernst du, wie du eine einfache Vue.js-Anwendung erstellen kannst, mit der Benutzer den Geschäftsstatus eines Ladens zwischen "geöffnet" und "geschlossen" umschalten können. Die Anwendung wird den aktuellen Status des Ladens und das entsprechende Bild basierend auf dem Status anzeigen. Benutzer können auf einen Schaltknopf klicken, um den Geschäftsstatus des Ladens umzuschalten.
👀 Vorschau
🎯 Aufgaben
In diesem Projekt wirst du lernen:
- Wie du die Projektstruktur mit den erforderlichen Ordnern und Dateien einrichtest
- Wie du die Vue.js-Einrichtung erstellst und den reaktiven Zustand und die Umschaltfunktionalität definierst
- Wie du die HTML-Struktur und CSS-Stile implementierst, um den Geschäftsstatus des Ladens und den Schaltknopf anzuzeigen
- Wie du die Umschaltfunktionalität integrierst, um es Benutzern zu ermöglichen, den Geschäftsstatus des Ladens umzuschalten
🏆 Errungenschaften
Nach Abschluss dieses Projekts wirst du in der Lage sein:
- Eine grundlegende Vue.js-Projektstruktur einzurichten
- Die
ref-Funktion verwenden, um reaktive Zustandsvariablen zu erstellen - In der Vue.js-Einrichtung benutzerdefinierte Funktionen zu definieren und zu verwenden
- Daten und Ereignishandler im HTML-Template zu binden
- Die Anwendung mit CSS zu stylen, um eine visuell ansprechende Schnittstelle zu erstellen
