Créer un gestionnaire de tâches avec Vue.js

Introduction

Dans ce projet, vous allez apprendre à construire une application de gestion de tâches simple à l'aide de Vue.js. La gestion de tâches vous permet de créer, de supprimer et de suivre vos tâches quotidiennes, vous aidant ainsi à devenir un maître de la gestion du temps.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment configurer l'environnement Vue.js
• Comment afficher "Aucune donnée" par défaut lors du chargement de la page
• Comment ajouter des tâches à la liste de tâches
• Comment supprimer des tâches de la liste de tâches
• Comment afficher le nombre total de tâches
• Comment vider la liste de tâches complète

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Créer une application Vue.js de zéro
• Utiliser les directives et la liaison de données de Vue.js
• Implémenter les fonctionnalités de base CRUD (Créer, Lire, Mettre à jour, Supprimer)
• Gérer les interactions de l'utilisateur et mettre à jour l'interface utilisateur en conséquence

Skills Graph

Configurer la structure du projet

Dans cette étape, vous allez configurer les fichiers et la structure du projet. Suivez les étapes ci-dessous pour terminer cette étape :

Ouvrez le dossier du projet. La structure de répertoire est la suivante :

├── css
│   └── style.css ## Fichier de style de page
├── img
│   └── icon.png ## Petits icônes requises par la page
├── js
│    └── vue.js ## Version 2.x du framework Vue.js
└── index.html ## Fichier de codage de la mise en page et de la logique de la page

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez-le manuellement, vous verrez la page.

L'affichage actuel n'est qu'une mise en page statique et ne met pas en œuvre de fonctions spécifiques.

Afficher "Aucune donnée" par défaut

Dans cette étape, vous allez afficher "Aucune donnée" par défaut lorsque la page est chargée.

1. Dans le fichier index.html, ajoutez l'objet data de l'instance Vue sous el: "#box", de sorte qu'il contienne un tableau todoList :

data: {
  todoList: [],
}

2. Dans la structure HTML, supprimez tout le code de <ul class="list"></ul>. Ensuite, ajoutez un affichage conditionnel pour afficher "Aucune donnée" si le tableau todoList est vide :

<ul class="list">
  <li v-if="!todoList.length">Aucune donnée</li>
  <!-- TODO : Ajoutez ici les éléments de la liste de tâches -->
</ul>

3. Enregistrez le fichier index.html et rafraîchissez la page. Vous devriez voir le message "Aucune donnée" affiché. L'effet de mise en œuvre final est le suivant :

Ajouter des tâches à la liste

Dans cette étape, vous allez ajouter des tâches à la liste de tâches.

1. Dans le fichier index.html, ajoutez un champ de saisie et un bouton "Confirmer" à la structure HTML :

<div class="input">
  <span>contenu</span>
  <input
    type="text"
    v-model="search"
    placeholder="Veuillez entrer ce que vous allez faire"
  />
  <span id="add" @click="addTodo">Confirmer</span>
</div>

2. Dans l'instance Vue, ajoutez une propriété de données search et une méthode addTodo :

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

3. Enregistrez le fichier index.html et rafraîchissez la page. Vous devriez être capable d'entrer du texte dans le champ de saisie et de cliquer sur le bouton "Confirmer" pour ajouter une nouvelle tâche à la liste. L'effet de mise en œuvre final est le suivant :

Supprimer des tâches de la liste

Dans cette étape, vous allez ajouter la fonctionnalité de suppression de tâches de la liste de tâches.

1. Dans le fichier index.html, ajoutez une icône "Supprimer" à chaque élément de tâche :

<li v-if="!todoList.length">Aucune donnée</li>
<li v-if="todoList.length" v-for="(todo, index) in todoList" :key="index">
  <!-- Numéro de série précédent -->
  <span class="number">{{index + 1}}</span>
  <!-- Contenu de la liste -->
  <span>{{todo}}</span>
  <!-- Bouton de suppression -->
  <span class="delete" @click="deleteTodo(index)"></span>
</li>

2. Dans l'instance Vue, ajoutez une méthode deleteTodo :

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

3. Enregistrez le fichier index.html et rafraîchissez la page. Vous devriez être capable de cliquer sur l'icône "Supprimer" pour supprimer une tâche de la liste. L'effet de mise en œuvre final est le suivant :

Afficher le nombre total de tâches

Dans cette étape, vous allez afficher le nombre total de tâches dans la liste de tâches.

1. Dans la structure HTML, ajoutez une section "Total" en bas de la liste de tâches :

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

2. Enregistrez le fichier index.html et rafraîchissez la page. Vous devriez voir le nombre total de tâches affiché en bas de la liste.

Vider la liste de tâches

Dans cette étape, vous allez ajouter la fonctionnalité de vidage de l'ensemble de la liste de tâches.

1. Dans l'instance Vue, ajoutez une méthode clear :

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

2. Dans la structure HTML, ajoutez un bouton "Vider" dans la section "Total" :

<!--... -->
<li v-if="todoList.length">
  <b> Total: {{todoList.length}} </b>
  <b id="clear" @click="clear">Vider</b>
</li>

3. Enregistrez le fichier index.html et rafraîchissez la page. Vous devriez être capable de cliquer sur le bouton "Vider" pour supprimer toutes les tâches de la liste.

Félicitations! Vous avez terminé le projet Time Management Master en utilisant Vue.js. L'effet de mise en œuvre final est le suivant :

Sommaire

Félicitations! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires dans LabEx pour améliorer vos compétences.