Vue.JS

Vue.JS

 

Présentation de la Librairie Vue.JS

Vue.js est un Framework Javascript Open-source qui permet de construire des vues utilisateurs. Il a été Développé en 2014 par un ancien employé de chez Google qui a décidé de créer son propre Framework javascript.

Léger et Simple

L’application en elle-même ne fait que 23ko, ce qui fait de lui un des Framework les plus légers après React.JS. Il est aussi très facile de débuter avec Vue.JS, il n’y a besoin ni de bibliothèque externe, ni de plugins.

Pour suivre ce cours il est conseillé de connaître les bases du Javascript.

Installation

Pour l’installation de vue.js, dirigez-vous vers le site https://vuejs.org/ afin de télécharger le script.

Importez ce fichier au sein d’une balise script située dans votre projet :

Le Modèle MVVM

Principe

Le MVVM (Modèle Vue-Vue Modèle) est un design pattern comparable au MVC (Modèle Vue Contrôleur), il consiste à séparer les données de la vue qui les affiches.

Il contient 3 composantes :

  • Model : qui va contenir les données de l’application. (Issue généralement d’une Base de données ou même d’une API)
  • View : qui représente ce qui est affiché : l’interface utilisateur. Elle va contenir différents éléments graphiques (Boutons, CheckBox, Listes, …)
  • ViewModel : qui va faire le lien entre le modèle et la vue. Elle transforme les données en éléments d’affichage (d ata-binding) et gère les actions de l’utilisateur.

 

Son implémentation dans Vue.JS

VueModèle

Pour initialiser Vue.JS on créer un objet :

La variable vm correspond à ViewModel

Cette vue sera associée à un élément du DOM. Elément permet d’indiquer sur quel élément nous allons greffer Vue.Js

Vue

On déclare cet élément dans les options tel quel :

  

Les Directives

La directive est un attribut HTML qui permet de greffer un comportement spécial. Il y a déjà de nombreuses directives implémentées dans Vue.JS mais il est aussi possible d’en créer de nouvelles.

Exemple :

Code HTML :

Code Javascript :

On crée la VueModèle vm, on lui joins l’élément DOM qui a comme identifiant « tutoriel » (vue), et les données data (modèle) ;

Dans notre code la directive est v-text. Elle associe la proprieté texte du modèle avec le contenu de la balise p du DOM. Le contenu de la balise va donc afficher « Mon texte », comme si elle interprétait comme ceci :

La directive v-on

On a la possibilité d’intercepter les évènements qui surviennent au niveau de la vue grâce à la directive v-on :

Code HTML :

La directive est insérée dans la balise a et est suivi de l’évènement ainsi que du nom de la fonction.

Code Javascript :

La propriété methods va nous servir à placer les méthodes de la VueModèle. Dans le cas présent on a besoin d’une méthode action afin de répondre à l’évènement « click ».

Lors du clic sur le lien, la fonction paramétrée dans action va alors ouvrir un pop-up :

La directive v-bind

Elle permet de lier un attribut à une expression. Nous allons tester cette fonctionnalité en greffant un lien :

Code HTML :

Code Javascript :

Lorsque l’on va cliquer sur le lien, la page d’accueil Google va s’ouvrir.

La directive v-for

La directive v-for va nous permettre de répéter l’affichage d’un élément du DOM.

Code HTML :

On insère la directive v-for dans la balise li et on précise le nom de la propriété qui contient les objets. Ce qui va créer une liste en répétant le li pour chaque message

Code Javascript :

Voici un aperçu de ce que celà va afficher :

  • message 1
  • message 2

Mise en pratique : Création d’une Todo-list

Après avoir vu ensemble quelques bases de Vue.js, nous allons maintenant passer à la pratique en programmant une Todo-List.

Vue-cli

Avec Vue.Js on a la possibilité de travailler avec un format de fichier .vue qui va simplifier l’organisation du code. Afin de profiter pleinement de cette fonctionnalité il est nécéssaire de configurer un outil de build comme Webpack. Ce dernier étant assez complexe à utiliser, c’est donc à ce moment là qu’intervient Vue-Cli

Web Pack est un empaqueteur de module qui va nous permettre de faire de nombreuses choses mais notamment d’organiser notre code en séparant la partie Template et la partie VueJS.

Nous allons commencer par générer notre Template à partir de Vue-CLI et pour cela nous allons avoir besoin d’installer Node.JS. Si vous êtes amené à travailler sur des sites ou applications Web, c’est un outil que vous pourrez souvent utiliser.

Installation de NodeJS

Vous pourrez télécharger NodeJS sur le site officiel https://nodejs.org/

Pour info, le package d’installation contient :

  • Node JS : c’est le programme qui vous permettra d’exécuter les fichiers .js
  • Le module npm : c’est le gestionnaire de module qui va nous servir à utiliser Vue-Cli.
  • La documentation
  • Les variables d’environnements : qui nous permettrons d’exécuter des commandes npm et/ou node dans notre invite de commande.

Installation de vue-cli

Après avoir installé NodeJS, démarrez l’invite de commande et placez-vous grâce à la commande cd, dans le dossier d’installation que vous avez choisi pour nodeJS. (Par défaut Program Files).

Et vous pouvez dès à présent exécuter la commande :

npm install -g vue-cli

Cette commande va installer toutes les dépendances dont on aura besoin, ainsi que l’accès à une commande Vue.

Démarrage du projet

Créez un nouveau dossier dans votre répertoire, afin de démarrer sur un nouveau projet.

Afin de pouvoir commencer directement nous allons installer un Template grâce à la commande Vue-cli.

Contrairement à ce qu’on a fait précédemment, cette fois nous allons utiliser le Template WebPack, qui est un peu plus complet, et qui va entre autres nous permettre d’accéder aux composants que l’on va ajouter, sans recharger la page une seule fois.

Création d’un dossier grâce au webpack de github :

vue init "vuejs-templates/webpack"

Voici les options à attribuer à ce projet :

Lorsque le dossier est créé on se place à l'intérieur de celui-ci:

cd todos

Afin de faire un npm install.

Pendant que toutes les dépendances s’installent, ouvrez votre projet dans un IDE.

A l’intérieur de ce projet :

  • L’index.html qui va nous permettre de charger l’application
  • Un dossier src qui va contenir les sources
  • Un dossier config qui va nous permettre de configurer notre environnement
  • Js comme vue plus haut qui se charge toujours d’importer vue.js et app. Et initialise Vue.js en utilisant la fonction render

Le npm install terminé, on lance le serveur :

npm run dev

Voici la fenêtre qui s’ouvre sur http://localhost:8080, si vous avez bien suivi jusqu’ici vous devriez voir cette page sur votre navigateur :

Comme nous voulons créer une Todo List, on peut supprimer la partie style qui est situé dans App.vue. Car nous ne voulons pas utiliser le CSS de la page actuelle.

Quant à la partie script, nous allons adapter le contenu de manière à ce qu’il importe notre Composant Todos :

Si vous regardez votre page http://localhost:8080 vous allez y voir une erreur :

C’est tout simplement car on n’a pas encore créé le composant.

Pour le créer il suffit d’aller dans le Template HTML, toujours sur la même page et d’insérer une div avec le composant todos

Et créer un fichier Todos.vue dans le répertoire src/components, dans lequel on va insérer ce code :

Lorsqu’on réactualise la page, le titre s’affiche correctement.

Création de la liste de tâche

Afin d’avoir une petite maquette de ce que l’on souhaite produire dans la version finale, nous allons rajouter le code HTML (sans Vue.js pour l’instant), de la TodoList :

Voilà ce que ça donne pour l’instant :

Vous pouvez également rajouter votre CSS en insérant votre balise style dans la page Todos.vue :

Au niveau des états on va devoir en gérer deux :

  • Une propriété qui va gérer le champ input
  • Une autre qui va gérer la liste des tâches

On va donc rajouter une méthode data, qui va retourner un objet :

Notre data contient, un objet todos qui retourne pour l’instant une liste vide, elle contiendra par la suite les tâches.

Et un objet newTodo qui retourne un champ vide. Je peux donc affecter à mon input mon objet grâce au v-model :

Je fais de même en mettant à jour la liste dans le script avec une fausse tâche « Test » :

Dans la partie HTML on rajoute un v-for et on affecte la todo.name au label :

Gérer le rajout d’une tâche

On veut pouvoir ajouter une tâche de cette manière : lorsqu’on appuie sur la touche entrée, la tâche est rajoutée à la liste :

On rajoute cette directive en faisant appel à la méthode addTodo que l’on rajoute dans notre script :

Dans la méthode on lui demande de rajouter une tâche qui n’est pas considérée comme complète (car c’est une nouvelle tâche), et on lui affecte le nom qui est écrit dans le champ « this.newTodo ».

Après que la tâche ait été rajoutée, on vide le champ.

Voici un aperçu de ce que cela donne pour l’instant :

On rajoute une checkbox qu’on lie à la partie completed :

Si le CSS que vous utilisez le permet vous pouvez rajouter un v-bind completed afin de mettre en forme une tâche completé :

Ce qui va donner ce type de mise en forme, lorsque la tâche est considérée comme complétée :

Nombre de tâches restantes

Afin de compléter un peu plus notre système de Todo List on peut lui affecter un compteur de tâche complétée :

Remaining, va faire un filter qui récupère le nombre de tâche qui ne sont pas complétée

 

 

 

Aperçu final

 

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *