Ein Vue.js Task-Manager erstellen

Einführung

In diesem Projekt lernst du, wie du eine einfache Task-Manager-Anwendung mit Vue.js aufbaust. Der Task-Manager ermöglicht es dir, deine täglichen Aufgaben zu erstellen, zu löschen und zu verfolgen, was dich dabei hilft, ein Meister der Zeitverwaltung zu werden.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du die Vue.js-Umgebung einrichtest
• Wie du standardmäßig "Keine Daten" anzeigt, wenn die Seite geladen wird
• Wie du Aufgaben zur Task-Liste hinzufügst
• Wie du Aufgaben aus der Task-Liste löschst
• Wie du die Gesamtzahl der Aufgaben anzeigt
• Wie du die gesamte Task-Liste leerst

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Eine Vue.js-Anwendung von Grund auf zu erstellen
• Vue.js-Direktiven und Datenbindung zu verwenden
• Grundlegende CRUD-Funktionalität (Create, Read, Update, Delete) umzusetzen
• Benutzerinteraktionen zu verarbeiten und die Benutzeroberfläche entsprechend zu aktualisieren

Das Projektstruktur aufsetzen

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

Öffne das Projektverzeichnis. Die Verzeichnisstruktur ist wie folgt:

├── css
│   └── style.css ## Seitenstil-Datei
├── img
│   └── icon.png ## Von der Seite benötigte kleine Icons
├── js
│    └── vue.js ## Vue.js-Framework Version 2.x
└── index.html ## Datei für die Seitenlayout- und Logik-Codierung

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, und du wirst die Seite sehen.

Die aktuelle Anzeige ist nur ein statisches Layout und implementiert keine spezifischen Funktionen.

Standardmäßig 'Keine Daten' anzeigen

In diesem Schritt wirst du standardmäßig "Keine Daten" anzeigen, wenn die Seite geladen wird.

1. In der Datei index.html füge das data-Objekt aus der Vue-Instanz unter el: "#box", hinzu, sodass es ein todoList-Array enthält:

data: {
  todoList: [],
}

2. Im HTML-Struktur entferne alle Codezeilen zwischen <ul class="list"></ul>. Füge dann eine bedingte Darstellung hinzu, um "Keine Daten" anzuzeigen, wenn das todoList-Array leer ist:

<ul class="list">
  <li v-if="!todoList.length">Keine Daten</li>
  <!-- TODO: Füge hier die Task-Liste-Einträge hinzu -->
</ul>

3. Speichere die Datei index.html und aktualisiere die Seite. Du solltest die Nachricht "Keine Daten" angezeigt sehen. Die endgültige Implementierung sieht wie folgt aus:

Aufgaben zur Liste hinzufügen

In diesem Schritt wirst du Aufgaben zur Task-Liste hinzufügen.

1. In der Datei index.html füge ein Eingabefeld und einen "Bestätigen"-Button zur HTML-Struktur hinzu:

<div class="input">
  <span>content</span>
  <input
    type="text"
    v-model="search"
    placeholder="Bitte gib an, was du tun wirst"
  />
  <span id="add" @click="addTodo">Bestätigen</span>
</div>

2. In der Vue-Instanz füge eine search-Daten-Eigenschaft und eine addTodo-Methode hinzu:

data: {
  todoList: [],
  search: ""
},
methods: {
  addTodo() {
    this.todoList.push(this.search);
    this.search = "";
  },
}

3. Speichere die Datei index.html und aktualisiere die Seite. Du solltest in der Lage sein, Text im Eingabefeld einzugeben und auf den "Bestätigen"-Button zu klicken, um eine neue Aufgabe zur Liste hinzuzufügen. Die endgültige Implementierung sieht wie folgt aus:

Aufgaben aus der Liste löschen

In diesem Schritt wirst du die Funktionalität hinzufügen, um Aufgaben aus der Task-Liste zu löschen.

1. In der Datei index.html füge ein "Löschen"-Symbol zu jedem Task-Element hinzu:

<li v-if="!todoList.length">Keine Daten</li>
<li v-if="todoList.length" v-for="(todo, index) in todoList" :key="index">
  <!-- Vorherige Seriennummer -->
  <span class="number">{{index + 1}}</span>
  <!-- Listenelement -->
  <span>{{todo}}</span>
  <!-- Löschen-Button -->
  <span class="delete" @click="deleteTodo(index)"></span>
</li>

2. In der Vue-Instanz füge eine deleteTodo-Methode hinzu:

methods: {
  //...
  deleteTodo(index) {
    this.todoList.splice(index, 1);
  },
}

3. Speichere die Datei index.html und aktualisiere die Seite. Du solltest in der Lage sein, auf das "Löschen"-Symbol zu klicken, um eine Aufgabe aus der Liste zu entfernen. Die endgültige Implementierung sieht wie folgt aus:

Die Gesamtzahl der Aufgaben anzeigen

In diesem Schritt wirst du die Gesamtzahl der Aufgaben in der Task-Liste anzeigen.

1. In der HTML-Struktur füge einen Abschnitt "Gesamt" am Ende der Task-Liste hinzu:

<li v-if="todoList.length" v-for="(todo, index) in todoList" :key="index">
  <!--... -->
</li>
<li v-if="todoList.length">
  <b> Gesamt: {{todoList.length}} </b>
  <!--... -->
</li>

2. Speichere die Datei index.html und aktualisiere die Seite. Du solltest die Gesamtzahl der Aufgaben am Ende der Liste sehen.

Die Aufgabenliste leeren

In diesem Schritt wirst du die Funktionalität hinzufügen, um die gesamte Task-Liste zu leeren.

1. In der Vue-Instanz füge eine clear-Methode hinzu:

methods: {
  //...
  clear() {
    this.todoList = [];
    this.search = "";
  }
}

2. In der HTML-Struktur füge einen "Löschen"-Button im Abschnitt "Gesamt" hinzu:

<!--... -->
<li v-if="todoList.length">
  <b> Gesamt: {{todoList.length}} </b>
  <b id="clear" @click="clear">Löschen</b>
</li>

3. Speichere die Datei index.html und aktualisiere die Seite. Du solltest in der Lage sein, auf den "Löschen"-Button zu klicken, um alle Aufgaben aus der Liste zu entfernen.

Herzlichen Glückwunsch! Du hast das Projekt Time Management Master mit Vue.js abgeschlossen. Die endgültige Implementierung sieht wie folgt aus:

Zusammenfassung

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