Application de liste de tâches simple dans le guide étape par étape de Vue.js

Ce guide vous guidera dans la création d'une application de base de liste de tâches à l'aide de Vue.js 3. À la fin de ce didacticiel, vous comprendrez comment gérer la liaison de données, les événements manipulation et rendu dynamique dans Vue.js.

Prérequis

Connaissance de base de HTML, CSS et JavaScript.
Node.js et npm installés sur votre ordinateur.
Vue CLI installée. Sinon, vous pouvez l'installer en exécutant npm install -g @vue/cli.

Étape 1 : Mise en place du projet

Créer un nouveau projet Vue.js : ouvrez votre terminal et exécutez la commande suivante pour créer un nouveau projet Vue.js 3 :

vue create todo-app

Naviguez dans le répertoire du projet :

cd todo-app

Exécutez le serveur de développement : démarrez le serveur de développement Vue :

npm run serve

Cela ouvrira le modèle de démarrage Vue.js par défaut dans votre navigateur à l'adresse http://localhost:8080.

Étape 2 : Structuration de l'application

Nettoyer le modèle par défaut : ouvrez src/App.vue et supprimez le contenu du modèle, du script et du style par défaut. Remplacez-les par le code suivant :

<template>
  <div id="app">
    <h1>Vue.js To-Do List</h1>
    <input v-model="newTask" placeholder="Add a new task" @keyup.enter="addTask" />
    <button @click="addTask">Add Task</button>
    <ul>
      <li v-for="(task, index) in tasks" :key="index">
        <input type="checkbox" v-model="task.completed" />
        <span :class="{ 'completed-task': task.completed }">{{ task.text }}</span>
        <button @click="removeTask(index)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      newTask: '',
      tasks: []
    };
  },
  methods: {
    addTask() {
      if (this.newTask.trim() !== '') {
        this.tasks.push({ text: this.newTask, completed: false });
        this.newTask = '';
      }
    },
    removeTask(index) {
      this.tasks.splice(index, 1);
    }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.completed-task {
  text-decoration: line-through;
  color: grey;
}
input {
  margin-bottom: 10px;
  padding: 5px;
}
button {
  margin-left: 5px;
  padding: 5px;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px 0;
}
</style>

Étape 3 : Comprendre le code

Section Modèle :

: ce champ de saisie est lié à la propriété de données newTask à l'aide de v-model, permettant une liaison de données bidirectionnelle. Le @keyup.enter="addTask" écoute la touche Entrée pour déclencher la méthode addTask.

Ajouter une tâche
: Ce bouton déclenche la méthode addTask lorsqu'on clique dessus.

 : cette liste non ordonnée utilise v-for pour parcourir le tableau des tâches et afficher chaque tâche. Le :key="index" est un identifiant unique pour chaque élément, requis par Vue pour suivre efficacement les éléments de la liste.

 : une case à cocher qui bascule l'état terminé d'une tâche.

{{ task.text }} : L'élément span affiche le texte de la tâche. La directive :class applique conditionnellement la classe CSS de tâche terminée selon que la tâche est terminée ou non.

Supprimer : Un bouton pour supprimer la tâche de la liste

Section Script :

Méthode data() :
newTask : une chaîne qui contient la valeur de la nouvelle tâche à ajouter.
tâches : un tableau qui contient toutes les tâches, chacune représentée comme un objet avec du texte et des propriétés complétées.

Objet méthodes :
addTask() : Cette méthode ajoute la newTask au tableau des tâches, puis efface le champ de saisie newTask.
removeTask(index) : Cette méthode supprime une tâche du tableau des tâches en fonction de son index.

Section Style :

CSS de base pour styliser la liste de tâches, avec une classe .completed-task pour parcourir les tâches terminées.

Conserver les tâches dans le stockage local : vous pouvez améliorer l'application en enregistrant les tâches dans le stockage local du navigateur, afin qu'elles persistent lors des rechargements de pages.


mounted() {
  this.tasks = JSON.parse(localStorage.getItem('tasks')) || [];
},
methods: {
  addTask() {
    if (this.newTask.trim() !== '') {
      this.tasks.push({ text: this.newTask, completed: false });
      this.newTask = '';
      localStorage.setItem('tasks', JSON.stringify(this.tasks));
    }
  },
  removeTask(index) {
    this.tasks.splice(index, 1);
    localStorage.setItem('tasks', JSON.stringify(this.tasks));
  }
}

Tâches d'édition :


<template>
  <div id="app">
    <h1>Vue.js To-Do List</h1>
    <input v-model="newTask" placeholder="Add a new task" @keyup.enter="addTask" />
    <button @click="addTask">Add Task</button>
    <ul>
      <li v-for="(task, index) in tasks" :key="index">
        <input type="checkbox" v-model="task.completed" />

        <span v-if="!task.isEditing" :class="{ 'completed-task': task.completed }">{{ task.text }}</span>
        <input v-else v-model="task.text" @keyup.enter="saveTask(task)" @blur="saveTask(task)" />

        <button v-if="!task.isEditing" @click="editTask(task)">Edit</button>
        <button @click="removeTask(index)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      newTask: '',
      tasks: []
    };
  },
  methods: {
    addTask() {
      if (this.newTask.trim() !== '') {
        this.tasks.push({ text: this.newTask, completed: false, isEditing: false });
        this.newTask = '';
      }
    },
    removeTask(index) {
      this.tasks.splice(index, 1);
    },
    editTask(task) {
      task.isEditing = true;
    },
    saveTask(task) {
      task.isEditing = false;
    }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.completed-task {
  text-decoration: line-through;
  color: grey;
}
input {
  margin-bottom: 10px;
  padding: 5px;
}
button {
  margin-left: 5px;
  padding: 5px;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px 0;
}
</style>

Installer Font Awesome

Tout d’abord, incluez Font Awesome dans votre projet. Si vous utilisez un CDN, vous pouvez ajouter ce lien dans votre fichier HTML ou directement dans la section

de votre index.html.




** Mettre à jour le modèle avec des icônes
**

Maintenant, ajoutons quelques icônes Font Awesome pour modifier, supprimer et effectuer des tâches.


<template>
  <div id="app" class="container">
    <h1>Vue.js To-Do List</h1>
    <div class="input-container">
      <input v-model="newTask" placeholder="Add a new task" @keyup.enter="addTask" />
      <button @click="addTask" class="btn btn-add"><i class="fas fa-plus"></i></button>
    </div>
    <ul>
      <li v-for="(task, index) in tasks" :key="index" :class="{ completed: task.completed }">
        <input type="checkbox" v-model="task.completed" id="checkbox" />

        <span v-if="!task.isEditing" class="task-text">{{ task.text }}</span>
        <input v-else v-model="task.text" @keyup.enter="saveTask(task)" @blur="saveTask(task)" class="edit-input" />

        <div class="actions">
          <button v-if="!task.isEditing" @click="editTask(task)" class="btn btn-edit"><i class="fas fa-edit"></i></button>
          <button @click="removeTask(index)" class="btn btn-delete"><i class="fas fa-trash-alt"></i></button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      newTask: '',
      tasks: []
    };
  },
  methods: {
    addTask() {
      if (this.newTask.trim() !== '') {
        this.tasks.push({ text: this.newTask, completed: false, isEditing: false });
        this.newTask = '';
      }
    },
    removeTask(index) {
      this.tasks.splice(index, 1);
    },
    editTask(task) {
      task.isEditing = true;
    },
    saveTask(task) {
      task.isEditing = false;
    }
  }
};
</script>

<style>
body {
  background-color: #f4f7f6;
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  padding: 20px;
  max-width: 400px;
  width: 100%;
}

h1 {
  color: #333;
  margin-bottom: 20px;
}

.input-container {
  display: flex;
  margin-bottom: 20px;
}

input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

.btn {
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 5px;
  transition: background-color 0.3s;
}

.btn:hover {
  background-color: #45a049;
}

.btn-add {
  background-color: #28a745;
}

.btn-edit {
  background-color: #ffc107;
}

.btn-delete {
  background-color: #dc3545;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 5px;
  background-color: #f8f9fa;
}

li.completed .task-text {
  text-decoration: line-through;
  color: #888;
}

li:hover {
  background-color: #e9ecef;
}

.actions {
  display: flex;
}

.actions .btn {
  margin-left: 5px;
}

.edit-input {
  flex: 1;
  margin-right: 10px;
}
</style>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!