Créer une liste des tâches dynamique peut être complexe sans les bons outils.
Sans une solution efficace, la gestion des tâches devient fastidieuse et inefficace.
Découvrez comment Vue.js simplifie ce processus en offrant une interface réactive pour gérer vos tâches.
Acquérez les compétences fondamentales pour créer des applications avec Vue JS 3!
Pour cette partie, nous allons créer de A à Z une TODO List (ou liste des taches).
Installer le Starter Kit Vue.js
Créons un nouveau dossier contenant le fichier script.js, index.hmtl et style.css
Pour le fichier index.html, il est nécessaire de mettre en place dans le <head> ces liens pour pouvoir utiliser le bootstrap ainsi que les icônes.
<link data-minify="1" href="https://blog.alphorm.com/wp-content/cache/min/1/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css?ver=1751816747"
rel="stylesheet">
<link data-minify="1" rel="stylesheet" href="https://blog.alphorm.com/wp-content/cache/min/1/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css?ver=1751816747">
<link rel="stylesheet" href="style.css">
Le <body> qui est le noyau de l’application
<div class="container main" id="app">
<ul class="list-group" id="todo-list">
<li class="list-group-item done">Une tâche achevée <button class="btn btn-warning delete"><i class="bi bi-arrow-clockwise"></i></button></li>
<li class="list-group-item">Une seconde tâche <button class="btn btn-danger delete"><i class="bi bi-check"></i></button></li>
<li class="list-group-item">Encore un autre <button class="btn btn-danger delete"><i class="bi bi-check"></i></button></li>
</ul>
<br><br>
<form>
<div class="row">
<div class="input-group" id="mb-3">
<input type="text" class="form-control" placeholder="Ajouter une tache">
<button class="btn btn-primary" type="button">Ajouter</button>
</div>
</div>
</form>
</div>
Dans le fichier style.css
#app{
text-align: center;
margin: 75 auto;
}
.executed{
text-decoration: line-through;
}
#todo-list li.done{
text-decoration: line-through;
color: darkgray;
}
button.delete{
float: right;
}
Il affiche:
Créer une TODO List Vue.js
Nous allons voir comment faire lister les tâches (todo list) en Vue.js pour la gestion de l’état et le rendu dynamique des tâches.
Dans le fichier index.html :
<div class="container main" id="app">
<ul class="list-group" id="todo-list">
<li v-for="task in tasks"//pour itérer sur chaque tâche dans la liste tasks
class="list-group-item"
:class="{done: task.done}"//utilise une liaison dynamique pour ajouter la classe done si la tâche est terminée
>
{{task.name}}//affiche le nom de la tâche
<button class="btn btn-warning delete"
:class="{ 'btn btn-danger': !task.done, 'btn btn-warning': task.done}">>//liaison de classe dynamique pour changer la classe du bouton en fonction de l’état de la tâche
<i class=""
:class="{'bi bi-check': !task.done, 'bi bi-arrow-clockwise': task.done}"></i>>//icone dont la classe change dynamiquement en fonction de l’état de la tâche
</button>
</li>
</ul>
<br><br>
<form>
<div class="row">
<div class="input-group" id="mb-3">
<input type="text" class="form-control" placeholder="Ajouter une tache">
<button class="btn btn-primary" type="button">Ajouter</button>
</div>
</div>
</form>//icone dont la classe change dynamiquement en fonction de l’état de la tâche.
</div>
Ceci est dans le fichier script.js :
var tasks=[{//déclaration d’un tableau d’objets représentant les taches initiales
name:'Faire les courses',
done: false,
},
{
name:'Coder mon projet',
done: true,
}
]
const todoList ={//définition d’une instance de l’application Vue
data(){//méthode qui retourne les données de l’application.Ici elle renvoie la liste des tâches.
return{
tasks : window.tasks,
}
},
methods:{
}
}
Vue.createApp(todoList).mount('#app'); //création de l’application Vue avec la configuration définie dans todoList et montage de cette application sur l’élément HTML avec l’id ‘app’
Le rendu est :
Gestion des états des tâches
Mettons dans le balise <ul> de dans la partie <body> du fichier index.html afin de gérer le changement de l’état des tâches :
<button @click="task.done = !task.done"//@click : directive de vuejs qui
écoute l’événement de clic sur le bouton
//task.done = !task.done: inverse l’état de task.done.Si ce dernier est true ;il devient false et vice versa.Cela permet de marquer une tâche comme terminée ou non terminée lorsqu’il est terminé.
class="btn btn-warning delete"
:class="{'btn btn-danger': !task.done, 'btn btn-warning': task.done}">//applique la classe btn btn-danger lorsque task.done est false(la tache est terminée) ou la classe btn btn-warning lorsque task.done est true (la tache est terminée).
<i class=""
:class="{'bi bi-check': !task.done, 'bi bi-arrow-clockwise': task.done}"></i>//applique la classe bi bi-check lorsque task.done est false en affichant une icone de coche ou la classe bi bi-arrow-clockwise lorsque task.done est true en affichant une icone de flèche.
</button>
L’affichage est :
Validation du formulaire Vue.js
Rendre dans le fichier script:
const todoList={
data(){
return{
tasks : [],//une liste vide qui contiendra les tâches
newTask:{//un objet représentant une nouvelle tâche avec un état initial done a false
done : false,
},
errors: [],//une liste vide qui contiendra les messages d’erreurs
}
},
methods:{
addTask: function(){//une fonction qui ajoute une nouvelle tâche a la liste ‘tasks’.Elle vide d’abord la liste des erreurs ;si le champ name de newTasks est vide,elle ajoute une message d’erreur a errors et retourne false pour empecher l’ajout d’une tâche.Sinon elle ajoute la nouvelle tâche à la liste tasks et réinitialise le champ name de newTask.
this.errors= [];
if(!this.newTask.name){
this.errors.push('Veuillez ajouter une tache');
return false;
}
}
}
}
Vue.createApp(application).mount('#app');
Puis dans le fichier html :
<div class="alert alert-danger" v-if="errors.length">
<p v-for="error in errors">{{error}}</p>
</div>
<form>
<div class="row">
<div class="input-group" id="mb-3">
<input
type="text"
class="form-control"
placeholder="Ajouter une tache"
v-model="newTask.name">//lie la valeur de l’entrée à la propriété newTask.name dans les données de vueJs
<button @click="addTask()" class="btn btn-primary" type="button">Ajouter</button>//un bouton qui déclenche la méthode addTask() lorsque clique (@click= ‘addTask()’).
</div>
</div>
</form>
</div>
Voilà le rendu :
Ajout vide et ajout avec valeur :
Ajouter des tâches à la liste
Allons dans le script dans la méthode addTask, et mettons ce code pour ajouter une nouvelle tâche.
this.tasks.push(this.newTask); //this.tasks:fait référence à la liste des tâches
définie dans les données de l’application Vue.
//push : une méthode d’Array en JavaScript qui ajoute un ou plusieurs éléments à la fin d’un tableau.
this.newTask={};//objet représentant la nouvelle tâche que l’utilisateur souhaite ajouter.Au moment où cette ligne exécutée newTask doit contenir les propriétés nécessaires comme name et done.
this.erros= [];//vide la liste errors qui est utilisé pour stocker les messages d’erreur.
L’ajout d’une nouvelle tâche est bel et bien fait :
Supprimer toutes les tâches Vue.js
Créons un nouvelle méthode dans script pour la suppression des tâches :
removeAll : function(){//une méthode sert à supprimer toutes les taches
if(! confirm('Confirmez vous la suppression?')){
return false;
}//affiche une boite de dialogue de confirmation en utilisant la fonction confirm de JavaScript
this.erros= [];//vide simplement la liste des erreurs errors
}
Puis dans le fichier html:
<button type="button"
@click="removeAll()"//directive qui attache un événement click au bouton. Lorsque le bouton est cliqué,la méthode removeAll() définie dans le composant vueJs sera exécutée.
class="btn btn-danger">
Tout supprimer
</button>
Il affiche ceci :
Stocker les tâches en local Vue.js
Pour vérifier si les tâches sont stockées dans le localStorage. Si oui, elles sont récupérées et assignées à la propriété tasks du composant. Sinon, la propriété tasks conserve sa valeur initiale.
Mettons dans la méthode addTask dans le script :
localStorage.getItem('tasks', JSON.stringify(this.tasks));
//localStorage:est une stockage web qui permet de stocker des données de manière persistante dans le navigateur. getItem(‘tasks’) récupère les données associées à la clé ‘tasks’. Si cette clé n’existe pas dans le localStorage, la méthode retourne null.
NB :
La console du navigateur affiche ceci :
Charger tâches du local storage
Pour récupérer les tâches du local storage, de persister les données entre les sessions de navigation, de sorte que l’utilisateur ne perde pas ses tâches lorsqu’il rafraîchit la page ou ferme le navigateur.
Utilisons une méthode du hook :
created(){//la méthode de hook de cycle de vie. Vue.Js appelle cette méthode
après que l’instance du composant a été créée.
this.tasks= localStorage.getItem('tasks')
? JSON.parse(localStorage.getItem('tasks'))
: this.tasks;
Le résultat est :
Mise à jour du local storage
Pour persister les modifications des tâches en temps réel, de sorte que les changements soient sauvegardés automatiquement dans le stockage local du navigateur. Ainsi, lorsque l’utilisateur rafraîchit la page ou revient plus tard, les données mises à jour des tâches sont récupérées et réutilisées, assurant une continuité dans l’application.
Utilisons la méthode du hook :
updated(){
localStorage.setItem('tasks', JSON.stringify(this.tasks));
}
//une méthode du hook de cycle de vie de Vue.js appelle méthode après que les données de l’instance du composant ont été mises à jour et que le DOM a été ré-rendu pour refléter ces changements.
Voilà ce qui est dans la console avant et après la mise à jour :
Focus champ avec ref Vue.js
Nous allons utiliser l’attribut ref pour remettre le focus sur le champ de l’ajout d’une tâche.
<div class="input-group" id="mb-3">
<input
type="text"
class="form-control"
placeholder="Ajouter une tache"
v-model="newTask.name"
ref="name">//un attribut ref avec la valeur ‘name’,qui permet de référencer le champ de texte dans le script Vue.
<button @click="addTask()" class="btn btn-primary" type="button">Ajouter</button>
</div>
this.$refs.name.focus();//utilisée dans Vue.js pour donner le focus a un élément
spécifique de l’interface utilisateur. Ceci est mis dans la méthode addTask.
//$.refs: un objet spécial dans vue.js qui contient des références aux éléments DOM ou aux instances de composants enfants que vous avez enregistrés en utilisant l’attribut ref.
//une méthode native du DOM qui est utilisée pour donner le focus a un élément. Lorsque cette méthode est appelée,l’élément correspondant recoit le focus, ce qui permet à l’utilisateur de commencer à interagir avec cet élément immédiatement(par exemple, en saisissant du text dans un champ de saisie).
Le rendu est :
Focus initial avec hook mounted
Ici nous allons utiliser le hook mounted pour mettre le focus sur le champ de l’ajout d’une tâche au chargement de la page.
mounted(){
this.$refs.name.focus();
},//un hook qui est appelé lorsque le composant est prêt à etre utilisé sur la page. This.$refs.name.focus() est utilisé pour donner automatiquement le focus à l’élément DOM au moment ou le composant est affiché.
Supprimer une tâche spécifique
Pour supprimer une tâche une par une, créons une méthode :
deleteTask : function(task){
if(! confirm('Confirmez vous la suppression?')){
return false;
}//une méthode définie dans la secion methos du composant elle prend un paramètre task qui représente la tâche à supprimer de la liste
const newTaskList = this.tasks.filter(el => el =! task);//crée une liste de tâches en filtrant thistasks.Arrayprototypefilter est utilisé ici pour créer un nouveau tableau newTaskList qui ne contient pas l’élément task à supprimer.La condition el!==task garantit que seules les tâches différentes de celle spécifiée sont conservées dans newTaskList.
this.tasks= newTaskList;
}//la propriété tasks de l’instance Vue est mise à jour avec la nouvelle liste newTakList, qui ne contient plus la tâche supprimée.
Dans le fichier HTML:
<button @click="deleteTask(task)"
class="btn btn-danger delete">
<i class="bi bi-trash"></i>
</button>
//@click= ‘deleteTask(task)’: une directive de liaison d’évènement vue.js(@click), qui appelle la méthode deleteTask définie dans le composant vue lorsque le bouton est cliqué.L’argument task passé à deleteTask9task) est généralement une référence à la t â che spécifique à supprimer.
Voilà l’affichage sur la page :
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment mettre en place un Starter Kit pour Vue.js?
Comment gérer le changement d'état des tâches dans une TODO List avec Vue.js?
Comment valider un formulaire d'ajout de tâche dans Vue.js?
Comment stocker et récupérer les tâches dans le local storage avec Vue.js?
Comment supprimer une tâche particulière dans une liste de tâches Vue.js?
Conclusion
En maîtrisant ces étapes pour créer une TODO List avec Vue.js, vous améliorez significativement vos compétences en développement web. Quelles autres fonctionnalités pourriez-vous explorer pour enrichir votre application?
