Erstellen einer TodoList App mit Vue.js

Hier finden Sie eine detaillierte Schritt-für-Schritt-Anleitung mit spezifischen Codebeispielen zum Erstellen einer TodoList Anwendung mit Vue.js:

Schritt 1: Einrichten des Projekts

Erstellen Sie zunächst ein neues Vue.js Projekt mit Vue CLI. Öffnen Sie Ihr Terminal und führen Sie den folgenden Befehl aus:

vue create todo-list-app

todo-list-app Dadurch wird ein neues Verzeichnis mit der grundlegenden Projektstruktur und den Abhängigkeiten erstellt .

 

Schritt 2: Erstellen des TodoList Component

Erstellen Sie im src Ordner eine neue Datei mit dem Namen TodoList.vue. Dies wird die Hauptkomponente für die TodoList Anwendung sein.

In TodoList.vue:

<template>  
  <div>  
    <h1>TodoList</h1>  
    <!-- Render TodoItems here -->  
  </div>  
</template>  
  
<script>  
export default {  
  name: 'TodoList',  
  data() {  
    return {  
      todos: [  
        { id: 1, text: 'Learn Vue.js', completed: false },  
        { id: 2, text: 'Build a TodoList app', completed: false },  
        // Add more todo items here  
      ]  
    };  
  }  
};  
</script>  
  
<style>  
/* Add your custom styles here */  
</style>

 

Schritt 3: Erstellen des TodoItem Component

Erstellen Sie im src Ordner eine neue Datei mit dem Namen TodoItem.vue. Dies ist eine untergeordnete Komponente, die für die Darstellung einzelner Aufgabenelemente verantwortlich ist.

In TodoItem.vue:

<template>  
  <div:class="{ 'completed': todo.completed }">  
    <input type="checkbox" v-model="todo.completed">  
    <span>{{ todo.text }}</span>  
    <button @click="deleteTodo">Delete</button>  
  </div>  
</template>  
  
<script>  
export default {  
  name: 'TodoItem',  
  props: ['todo'],  
  methods: {  
    deleteTodo() {  
      // Emit a custom event to notify the parent component(TodoList) to delete this todo item  
      this.$emit('delete', this.todo.id);  
    }  
  }  
};  
</script>  
  
<style scoped>  
.completed {  
  text-decoration: line-through;  
}  
</style>

 

Schritt 4: Aktualisieren der TodoList Component

Aktualisieren Sie in TodoList.vue den Vorlagenabschnitt, um die TodoItem s mithilfe der v-for-Direktive darzustellen.

In TodoList.vue:

<template>  
  <div>  
    <h1>TodoList</h1>  
    <div v-for="todo in todos":key="todo.id">  
      <TodoItem:todo="todo" @delete="deleteTodo"></TodoItem>  
    </div>  
    <!-- Add a form to add new todo items -->  
    <form @submit.prevent="addTodo">  
      <input type="text" v-model="newTodoText">  
      <button type="submit">Add Todo</button>  
    </form>  
  </div>  
</template>  
  
<script>  
import TodoItem from './TodoItem.vue';  
  
export default {  
  name: 'TodoList',  
  components: {  
    TodoItem  
  },  
  data() {  
    return {  
      todos: [  
        { id: 1, text: 'Learn Vue.js', completed: false },  
        { id: 2, text: 'Build a TodoList app', completed: false },  
        // Add more todo items here  
      ],  
      newTodoText: ''  
    };  
  },  
  methods: {  
    deleteTodo(id) {  
      // Find the index of the todo item in the array  
      const index = this.todos.findIndex(todo => todo.id === id);  
      // Remove the item from the array  
      this.todos.splice(index, 1);  
    },  
    addTodo() {  
      if(this.newTodoText) {  
        // Generate a unique ID for the new todo item  
        const newTodoId = this.todos.length + 1;  
        // Create a new todo item object and add it to the array  
        this.todos.push({  
          id: newTodoId,  
          text: this.newTodoText,  
          completed: false  
        });  
        // Clear the input field  
        this.newTodoText = '';  
      }  
    }  
  }  
};  
</script>  
  
<style>  
/* Add your custom styles here */  
</style>

 

Schritt 5: Testen der TodoList Anwendung

Um die TodoList Anwendung zu testen, öffnen Sie die Datei „src/App.vue“ und ersetzen Sie den vorhandenen Inhalt durch den folgenden Code:

<template>  
  <div id="app">  
    <TodoList></TodoList>  
  </div>  
</template>  
  
<script>  
import TodoList from './TodoList.vue';  
  
export default {  
  name: 'App',  
  components: {  
    TodoList  
  }  
};  
</script>  
  
<style>  
/* Add your global styles here */  
</style>

 

Schritt 6: Ausführen der Anwendung

Speichern Sie alle Änderungen und starten Sie den Entwicklungsserver, indem Sie den folgenden Befehl im Terminal ausführen:

npm run serve

Besuchen Sie http://localhost:8080 in Ihrem Webbrowser, um die TodoList Anwendung in Aktion zu sehen.

Dieses Beispiel demonstriert die grundlegende Funktionalität von a

TodoList Anwendung mit Vue.js. Benutzer können über das bereitgestellte Formular eine Liste mit ToDo-Elementen anzeigen, diese als erledigt markieren, löschen und neue Elemente hinzufügen. Der Status der Aufgabenelemente wird in der TodoList Komponente verwaltet, während jedes einzelne Aufgabenelement mithilfe der TodoItem Komponente gerendert wird.

Bitte beachten Sie, dass es sich hierbei um eine vereinfachte Implementierung handelt und Sie die Anwendung entsprechend Ihren spezifischen Anforderungen weiter anpassen und erweitern können.