Appuyez sur Entrée pour voir vos résultats ou Echap pour annuler.

Apprendre Vue.js rapidement

Salut les devs ūüėÄ Je prends un break de la s√©rie DIY. Je reviendrai avec une suite tr√®s ludique dans 2 semaines. Aujourd’hui, j’aimerais vous pr√©senter le framework Vue.js de fa√ßon simple et rapide pour que vous puissiez vous faire une t√™te sur ce dernier.

Les sources de cet article sont disponibles sur GitHub.

Vue, c’est quoi?

Une est un framework JavaScript frontend d√©velopp√© par Evan You, un ancien de Google qui a particip√© au d√©veloppement d’AngularJS (i.e. : version 1.x). En gros, l’objectif √©tait de prendre le meilleur d’Angular et de cr√©er un framework vraiment l√©ger.

√Ä l’instar d’Angular (i.e. : 2+), Vue propose du routage, des composants, du partage de port√©e (scope) et autres fonctionnalit√©s utiles pour le d√©veloppement d’applications complexes.

Il a √©t√© cr√©√© en 2014 et en est √† la version 2.5.17 (au moment d’√©crire ceci).

Démarrer un nouveau projet

Avant de partir, il nous faut @vue/cli¬†qui nous permettra de g√©n√©rer la structure de base du projet. Contrairement √† @angular/cli, le client en invite de commande de Vue.js est tr√®s limit√© et g√©n√®re un tout petit peu de code poubelle qu’il faudra se d√©partir.

Cette commande installera le client vue dans vos dépendances globales sur votre poste. Ensuite, créer un nouveau projet vue :

Choisir simplement les options par d√©faut! Comme tout bon cli, cette commande prend quelques minutes √† ex√©cuter. Lorsque ce sera termin√©e, il nous faudra ajouter le routeur aux d√©pendances pour obtenir l’application monopage tant convoit√©e. Pour se faire, naviguer dans le r√©pertoire cr√©√© par la commande pr√©c√©dente et ex√©cuter :

La structure

Une fois le tout complété, vous devriez obtenir une arborescence de fichiers qui ressemble à ceci :

 

Rapidement, public¬†contient les fichiers statiques qui ne font pas partie du projet, contrairement √† src/assets¬†qui contiendra les images de l’application et autres fichiers. Le fichier index.html¬†ne fait pas partie de Vue, mais c’est le point d’entr√©e principal.

Un peu plus bas, vous avez le main.js¬†qui sert √† d√©marrer l’application Vue. En th√©orie, vous ne devriez pas avoir le modifier.

Sous le main.js, vous trouverez router.js¬†qui est la d√©finition des routes. Si vous l’ouvrez, vous verrez que c’est tr√®s simple. Par d√©faut, @vue/cli¬†cr√©e deux routes et deux vues, soit deux composants de navigation :

Si vous regardez dans le r√©pertoire views, vous verrez deux fichiers ¬ę¬†.vue¬†¬Ľ qui correspondent √† ces composants de navigation.

De plus, √† la racine du r√©pertoire src, vous trouverez un fichier App.vue¬†qui est le composant principal d’application. Vous l’aurez compris, on se retrouve avec une hi√©rarchie de composants, comme ceci :

La structure d’un fichier ¬ę¬†.vue¬†¬Ľ

Les fichiers ¬ę¬†.vue¬†¬Ľ ont une structure particuli√®re. Ils contiennent le code de la vue HTML, du composant en JavaScript ainsi que les styles propres au composant. Voici le plus simple exemple d’un composant :

Création des classes utilitaires

Dans un premier temps, cr√©ons les classes qui n’ont aucun lien avec Vue, soit notre service pour manipuler les todos dans le LocalStorage¬†ainsi que l’objet ToDo.

Cr√©ation d’un composant

Dans cet exemple, une application de todo, il y aura 3 composants de page et 2 composants r√©guliers. Les 3 pages sont : l’accueil, la cr√©ation d’un todo et la liste des todos sauvegard√©s. Ces derniers sont persist√©s dans le LocalStorage¬†du navigateur.

Puisque les composants de page utilisent les composants réguliers, commençons par ces derniers. Le premier sera le ToDoForm dont voici le code HTML :

Il y a quelques trucs intéressants ici. La directive v-if permet de rendre ou non un élément en se basant sur un booléen. Les variables showErrorMessage et showSuccessMessage sont déclarées dans le composant JS ci-dessous.

Sur l’√©l√©ment de formulaire, la directive v-on¬†permet d’y attacher un √©v√©nement. Vue nous offre aussi des param√®tres de directive pour les √©v√©nements pour faciliter le travail, par exemple prevent¬†qui execute event.preventDefault()¬†pour √©viter une soumission du formulaire au backend. La fonction handleClickCreateButton¬†est d√©clar√©e ci-dessous.

Dernier point, v-model permet de faire un 2-way binding entre une propriété du composant JS et la vue HTML.

Ce code est celui du composant JS d√©clar√© dans le m√™me fichier ToDoForm.vue. On peut voir qu’il y a 3 propri√©t√©s int√©ressantes √† l’objet export√© : data, methods¬†et components.

La propri√©t√© data¬†doit √™tre une fonction. Elle permet d’initialiser l’√©tat initial du composant. Le retour de cette fonction est un objet JSON dont les cl√©s et valeurs seront expos√©es dans la vue HTML pour l’affichage.

La propriété methods, quant à elle, doit être un objet. Elle liste les méthodes accessibles dans la vue HTML pour la gestion des événements.

Finalement, components¬†est aussi un objet dont la cl√© et la valeur sont respectivement un nom de composant et une instance de ce dernier, dans le cas o√Ļ nous aurions √† utiliser un sous-composant. Nous verrons comment plus loin.

Utilisation du composant dans une vue

Créons une vue de page appelée ToDoCreation.vue dont le code composant JS serait :

On importe simplement le composant, puis on le d√©clare dans l’objet components. Ceci nous permet de l’utiliser dans la vue :

Le composant de liste des todos

Pour démontrer le prochain concept, nous allons utiliser une vue qui affichera la liste des todos créés dans un tableau avec v-for :

Comme vous pouvez le constater, v-for¬†nous permet de boucler dans une collection et rend une variable disponible pour chaque √©l√©ment du tableau. La directive v-bind:key¬†permet de d√©finir une cl√© unique pour chaque ligne pour permettre un rafra√ģchissement optimal de la vue lorsque les donn√©es changent.

Dans notre composant JS, il nous faut simplement récupérer les todos via le service, puis rendre une variable disponible à la vue via la fonction data du composant :

Le principe est le m√™me pour l’int√©gration de ce composant dans une vue de page, je vous laisse visiter GitHub pour le code source ūüôā

Configuration du routeur

Pour que nous puissions utiliser les vues de page via une URL sp√©cifique, il nous faut configurer le routeur. Il n’y a rien d’int√©ressant √† expliquer, √ßa fonctionne comme la plupart des routeurs frontend :

Composant d’application

Finalement, il ne reste qu’√† d√©finir o√Ļ les composants de page seront inject√©s ainsi qu’ajouter un menu de navigation. Ceci se fait dans le App.vue¬†:

Très simplement, le composant de page ( ToDoCreation ou ToDoList) sera injecté dans router-view et les router-link produiront des liens de navigation pour le routeur!

Conclusion

Aujourd’hui, vous avez appris le 2-way binding, l’int√©gration d’un routeur, la gestion des √©v√©nements et la hi√©rarchisation des composants en utilisant le framework Vue.js. Si vous avez des commentaires ou des suggestions pour de futurs articles, n’h√©sitez pas √† m’en faire part sur les r√©seaux sociaux ou dans les commentaires ci-dessous.

Merci de nous lire chaque semaine! Si vous avez aimé celui-ci, partagez-le avec vos collègues et amis. Nous sommes fiers de pouvoir vous offrir du contenu gratuit et sans publicité et ce, chaque semaine depuis pratiquement 2 ans.

À +

Suivez-nous par courriel!

Saisissez votre adresse courriel pour vous abonner au blog d'Ezo et recevoir une notification de chaque nouvel article par email.

Rejoignez 13 autres abonnés