Construire une TodoList application avec Vue.js

Voici un guide détaillé étape par étape avec des exemples de code spécifiques pour créer une TodoList application avec Vue.js  :

Étape 1 : Configuration du projet

Commencez par créer un nouveau Vue.js projet à l'aide de Vue CLI. Ouvrez votre terminal et exécutez la commande suivante :

vue create todo-list-app

Cela créera un nouveau répertoire appelé todo-list-app avec la structure de base du projet et ses dépendances.

 

Étape 2: Création du TodoList Component

Dans le src dossier, créez un nouveau fichier appelé TodoList.vue. Ce sera le composant principal de l' TodoList application.

Dans 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>

 

Étape 3: Création du TodoItem Component

Dans le src dossier, créez un nouveau fichier appelé TodoItem.vue. Ce sera un composant enfant responsable du rendu des éléments de tâche individuels.

Dans 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>

 

Étape 4: Mise à jour du TodoList Component

Dans TodoList.vue, mettez à jour la section de modèle pour rendre le TodoItem s à l'aide de la directive v-for.

Dans 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>

 

Étape 5 : Tester l' TodoList application

Pour tester l' TodoList application, ouvrez le fichier "src/App.vue" et remplacez le contenu existant par le code suivant :

<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>

 

Étape 6: Exécution de l'application

Enregistrez toutes les modifications et démarrez le serveur de développement en exécutant la commande suivante dans le terminal :

npm run serve

Visitez http://localhost:8080 dans votre navigateur Web pour voir l' TodoList application en action.

Cet exemple montre les fonctionnalités de base d'un

TodoList application utilisant Vue.js. Les utilisateurs peuvent voir une liste d'éléments à faire, les marquer comme terminés, les supprimer et ajouter de nouveaux éléments à l'aide du formulaire fourni. L'état des éléments de tâche est géré dans le TodoList composant, tandis que chaque élément de tâche individuel est rendu à l'aide du TodoItem composant.

Veuillez noter qu'il s'agit d'une implémentation simplifiée et que vous pouvez personnaliser et améliorer davantage l'application en fonction de vos besoins spécifiques.