Vue.js-Schaltflächen und Wertaktualisierung

Einführung

In diesem Projekt lernst du, wie du eine Vue.js-Umgebung einrichtest und die Funktionalität von Schaltflächen implementierst, um einen auf einer Webseite angezeigten Wert zu aktualisieren.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du eine Vue.js-Umgebung einrichtest
• Wie du die Funktionalität der -- und +-Schaltflächen implementierst, um den Wert zu aktualisieren
• Wie du die Funktionalität der Schaltflächen testest

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Eine grundlegende Vue.js-Anwendung einzurichten
• Ein reaktives Datenobjekt zu erstellen und seine Werte zu aktualisieren
• Ereignishandler zu verwenden, um Funktionen aufzurufen und die Benutzeroberfläche zu aktualisieren

Skills Graph

Projektsstruktur einrichten

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

Öffne den Projektordner. Die Verzeichnisstruktur ist wie folgt:

├── css
│   └── style.css
├── index.html
└── js

Darin:

• index.html ist die zu bearbeitende Hauptseite.
• css ist der Ordner, in dem die Projektskripte gespeichert sind.
• js ist die Vue-Datei, auf die das Projekt angewiesen ist.

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. Du wirst die Seite sehen. Klicke auf die Schaltflächen - und + auf der Seite, und du wirst feststellen, dass der Wert in der Mitte nicht geändert werden kann. Die Seite sieht wie folgt aus:

Reparaturfunktion

In diesem Schritt musst du das Problem beheben, sodass sich die Werte in der Mitte ändern, wenn du auf die Schaltflächen - und + auf der Seite klickst.

1. Locate the // TODO section in the index.html file:
2. Ändere es in den folgenden Code um:

// TODO
let { value } = toRefs(data);

3. In den @click-Ereignishandlern für die Schaltflächen - und +, rufe die update-Funktion auf und übergebe den aktualisierten Wert als Argument.
4. In der update-Funktion aktualisiere die value-Eigenschaft mit dem neuen Wert, der als Argument übergeben wird.

Nach Abschluss dieser Schritte, klicke auf die Schaltflächen - und + auf der Seite und die Werte in der Mitte ändern sich entsprechend.

Der Effekt nach Abschluss ist wie folgt:

Zusammenfassung

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