Erstellen eines Vue.js-Ladensstatuswechsler

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

Skills Graph

Projektstruktur einrichten

In diesem Schritt wirst du die Projektdateien und -struktur einrichten. Folge den Schritten unten, um diesen Schritt abzuschließen:

Öffne den Projektordner. Die Verzeichnisstruktur ist wie folgt:

├── css
├── images
├── lib
└── index.html

Darin:

• css ist der Ordner, in dem die Projektstile gespeichert sind.
• images ist der Ordner, in dem die Projektbilder gespeichert sind.
• lib ist der Ordner, in dem die Projekt-JS-Abhängigkeiten gespeichert sind.
• index.html ist die Hauptseite.

Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.

Als Nächstes öffne "Web 8080" oben auf der VM und aktualisiere es manuell, um die Seite zu sehen.

Umschaltfunktionalität implementieren

In diesem Schritt wirst du die Umschaltfunktionalität implementieren, um den Geschäftsstatus des Ladens umzuschalten.

1. Öffne die Datei index.html.

2. In der Funktion useToggle ersetze den Kommentar // TODO durch folgenden Code:

   function useToggle(state) {
     // TODO
     const toggledState = ref(state);
   
     function toggle() {
       toggledState.value = !toggledState.value;
     }
     return [toggledState, toggle];
   }

   Diese Implementierung verwendet die ref-Funktion aus Vue.js, um eine reaktive Zustandsvariable toggledState und eine toggle-Funktion zu erstellen, die den Zustand aktualisiert.

3. Teste die Anwendung, indem du auf den Schaltknopf klickst. Der Geschäftsstatus des Ladens sollte sich zwischen "geöffnet" und "geschlossen" umschalten, und das entsprechende Bild sollte sich entsprechend ändern.

Glückwunsch! Du hast die Implementierung der Anwendung "Schalt Business Status" mit Vue.js abgeschlossen. Der Effekt nach Abschluss ist wie folgt:

Zusammenfassung

Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Labs absolvieren, um deine Fähigkeiten zu verbessern.