Introduction à Vue.js

JavaScript

Envie de faire un front-end du FUTUR sans utiliser une bibliothèque trop lourde ou qui va trop chambouler un projet déjà commencé ? Vue.js est probablement ce qu'il vous faut, et je vais ici vous en faire une courte introduction.


Vue.js est une bibliothèque JavaScript qui sert à utiliser le design pattern dit du MVVM, pour "Modèle - Vue - VueModèle". Derrière ce nom légèrement tiré par les cheveux se cache entre autres ce qu’on appelle du two-way data-binding, soit en gros la liaison d'éléments HTML à des variables ou méthodes JavaScript et vice-versa, le tout effectué de façon continue et instantanée.

J'ai pensé que vous montrer le logo de Vue.js aurait été utile.

Prenons l'exemple suivant : on attache un élément <input> à la variable JavaScript "username". Dès que l'on y écrira quelque chose, la variable "username" prendra alors automatiquement sa valeur. Même chose dans l'autre sens : si l'on modifie sa valeur côté JavaScript, alors l'<input> affichera tout seul la nouvelle valeur.

Un exemple concret

Et ouais on est comme ça ici, pas le temps de blablater, on rentre direct dans le vif.

JS Bin on jsbin.com

Cliquez sur les onglets HTML et JavaScript pour voir la magie opérée par Vue.js, mais continuez tout de même à lire l'article pour comprendre un peu comment ça marche.

Utilisation

Commencez par consulter la page d'installation du site officiel pour savoir comment intégrer Vue.js dans votre projet : utiliser un CDN, le télécharger directement, passer par un package manager...

Pour utiliser Vue.js, il faut d'abord créer une instance : c'est ce qui reliera un morceau de votre page HTML à un ensemble donné de variables et méthodes JavaScript. Il est donc possible de créer plusieurs instances, concernant d'autres parties de votre page web et ayant des variables et méthodes différentes.

Vue.js propose plusieurs fonctionnalités pour lier HTML et JavaScript :

  1. Les moustaches : sous la forme {{ variable }}, elles permettent d'afficher rapidement une variable (ou le résultat d'une expression) ou encore de l'écrire à l'intérieur même d'un attribut HTML
  2. Les filtres : commençant par un |, ils se placent juste après une variable pour pouvoir modifier son affichage à la volée à l'aide d'une fonction
  3. Les directives : ce sont des attributs HTML qui commencent par v- ou : ou encore @ et qui permettent de réaliser plusieurs formes de liaison avec le côté JavaScript

Moustaches

Moustache

Déso pas déso pour cette référence

Vous l'avez peut-être remarqué dans le 1er exemple, nous affichons donc la variable firstname en plein milieu d'un paragraphe grâce à une moustache.

Il est aussi possible d'écrire des variables en plein milieu d'attributs HTML : dans l'exemple suivant, la variable type qui est définie selon le bouton radio sélectionné changera le nom de la classe attribuée au paragraphe.

JS Bin on jsbin.com

Filtres

Moustache

Non, ce n'est pas comme ça que l'on filtre une valeur monétaire

Les filtres sont en soi des fonctions permettant de modifier une variable. Que ce soit pour formater un nombre, une date, convertir une monnaie ou même filtrer le contenu d'une liste selon un mot-clé, c'est souvent bien pratique.

Mais surtout, les filtres s'appliquent également au moindre changement d'une variable. Regardez dans l'exemple suivant quelques filtres communs ainsi que leur application.

JS Bin on jsbin.com

Directives

Django

J'avais votre curiosité, j'espère maintenant avoir votre attention

Une directive est un attribut que l'on rajoute sur un élément HTML existant, et dont le nom commence généralement par v-. Par exemple, v-text pour remplacer le contenu d'un élément par une valeur, v-for pour répéter un élément autant de fois qu'il y a d'entrées dans une liste...

Le contenu de la directive peut être aussi bien une variable que l'on a définie côté JavaScript, comme par exemple v-text="message", ou bien une expression complète qui sera ré-évaluée au moindre changement, comme v-text="prix + 10" ou v-show="isValid && isSent".

Cas concret présenté dans l'exemple ci-dessus : le contenu de la directive v-show est évalué et, selon s'il est vrai ou faux, on affichera ou cachera l'élément HTML sur lequel est placé la directive.

JS Bin on jsbin.com

Et plus encore !

Vue.js c'est aussi plein d'autres choses croustillantes : la possibilité de créer des web components, une architecture similaire à Flux avec Vuex, un système de routes avec vue-router, l'écriture de components (HTML + JS + CSS) dans un fichier unique avec le transformateur vueify pour Browserify, une tonne d'autres plugins tiers, l'arrivée prochaine du Shadow DOM...

Mais ce serait bien trop long de vous parler de tout ça, et je laisse donc le soin au reste des Internets de vous renseigner sur ces sujets.