Vue.js

Cet article est en construction: un auteur est en train de le modifier.

En principe, le ou les auteurs en question devraient bientôt présenter une meilleure version.

---

Mattia A. Fritz (discussion) 27 mars 2017 à 17:59 (CEST)

• Voir site officiel Vue.js

Introduction

Vue.js est une bibliothèque JavaScript qui facilite la création d'interfaces utilisateur côté client dans les pages/applications web. Contrairement à d'autres bibliothèques de ce type (e.g. Angular, React, ...), Vue.js adopte une approche progressive qui peut être plus convenable à des développeurs débutant/intermédiaires. Sa caractéristique principale en ce sens consiste à fournir des mécanismes de "binding" entre les éléments HTML qui composent le DOM de la page et le code JavaScript qui modifie ces éléments, souvent suite à des interactions de l'utilisateur.

Comparaison avec vanilla JavaScript

À travers des extensions du langage HTML ou directement par la création de composantes (en anglais components), Vue.js permet de surmonter certaines difficultés qu'on peut rencontrer en utilisant du vanilla JavaScript ou une bibliothèque comme jQuery, notamment en ce qui concerne la mise à jour du DOM après le déclenchement d'un événement. Considérez ce simple exemple en vanilla JavaScript qui met à jour un compteur lorsqu'on clique sur un bouton.

Code HTML (seulement du body)

<h1>Client Side JavaScript</h1>
<p><button id="add">Click here to increment the count</button><span id="output">0</span></p>

Code JavaScript

var count = 0;
var btnAdd = document.getElementById("add");
var output = document.getElementById("output");

btnAdd.onclick = function () {
  count++;
  output.innerHTML = count;
}

• Voir cet exemple http://codepen.io/mafritz/pen/NNmgqG

Vous pouvez voir dans le code JavaScript que lorsqu'on a mis à jour le compteur avec count++, il est nécessaire de mettre à jour le contenu du noeud HTML (i.e. le span avec id="output") pour qu'on puisse établir une correspondance entre :

• La valeur de la variable count telle qu'elle existe dans la logique du code JavaScript
• La valeur de cette variable qui est affichée à l'utilisateur à travers output.innerHTML

Voici le même exemple en utilisant Vue.js (attention: il faut inclure la bibliothèque, voir plus bas dans la page).

Code HTML (seulement du body)

<h1>Simple counter with Vue.js</h1>
<div id="counter">
  <button v-on:click="increment">Click me many times!</button> Number of click: <strong>{{ count }}</strong>
</div>

Code JavaScript

var counter = new Vue({
  el: '#counter',
  data: {
    count: 0
  },
  methods: {
    increment: function() {
      this.count++;
    }
  }
});

• Voir cet exemple http://codepen.io/mafritz/pen/peOWbd

Les éléments à remarquer dans le code HTML sont principalement deux :

• La notation v-on:click qui est associée à la méthode increment dans le code JavaScript
• La notation {{ count }} qui est associée de manière automatique à la valeur de la propriété data.count dans le code JavaScript

Installation

Comme toute bibliothèque JavaScript côté-client, Vue.js peut être installée tout simplement en incorporant le fichier .js dans la page HTML qui l'utilise. Pour ce faire vous pouvez :

1. Télécharger la dernière version (2.x au moment de l'écriture de cette page, mars 2017) depuis le site officiel
2. Utilisez le lien à une CDN
3. Pour niveau intermédiaire/expert: Installez et utiliser une extension en ligne de commande vue-cli (nécessite installation de Node.js)

Fichier téléchargé

Téléchargez vos fichiers depuis le site officiel.

Veillez à bien utiliser la version Development version pendant le développement car elle propose des messages d'erreurs dans la console qui peuvent vous aider à éviter des fautes dans l'utilisation de la bibliothèque :

<script src="path/to/your/local/file/vue.js"></script>

Lorsque vous avez terminé le développement, vous pouvez passer à la version minified de la bibliothèque :

<script src="path/to/your/local/file/vue.min.js"></script>

CDN

Le site officiel vous conseille d'utiliser la Content Delivery Network unpkg qui propose la dernière version de la bibliothèque :

<script src="https://unpkg.com/vue/"></script>

En alternative vous pouvez choisir une version spécifique, par exemple :

<script src="https://unpkg.com/vue@2.2.6/dist/vue.min.js"></script>

Extension en ligne de commande

Pour intermédiaires/experts: cette option nécessite l'installation dans votre système de Node.js et une certaine familiarité avec l'installation/utilisation des modules Node ainsi que la ligne de commande.

Commande pour installation global du module :

npm install -g vue-cli

Ensuite vous pouvez utiliser la commande vue dans votre ligne de commande pour créer des squelettes de projets qui utilisent Vue.js. Par exemple cette commande :

vue simple my-simple-vue-app

crée un dossier my-simple-vue-app dans la position actuelle de votre ligne de commande avec un simple fichier index.html avec une simple mise en place de la bibliothèque que vous pouvez ensuite modifier.

Il existe des configurations plus complexes et puissantes mais qui ne sont pas abordées dans cette page, voir la page du projet sur GitHub pour plus d'information.

Utilisation de la bibliothèque

Vue.js peut être adopté de manière progressive, c'est-à-dire qu'on peut l'utiliser très facilement pour un projet simple, mais également pour des applications plus complexes.

Fonctionnement de base

La "magie" de Vue.js se fait à travers l'objet JavaScript new Vue() qui est mis à disposition par la bibliothèque. Cet objet (i.e. il s'agit d'un object constructeur) accepte différents paramètres, sous forme d'un objet normal JavaSscript :

var appVueJS = new Vue({
  //Spécification de l'objet de configuration
});

L'objet de configuration peut contenir plusieurs associations clé-valeurs. Ici de suite nous proposons les éléments nécessaires pour un exemple basique :

1. La propriété el qui identifie l'élément HTML "conteneur" (e.g. #myVueDiv)
2. La propriété data qui est associée un autre objet avec les associations clés-valeurs des propriétés/données à utiliser dans l'application
3. La propriété methods qui est associée à un autre objet avec les associations clés-valeurs des méthodes/fonctions à utiliser dans l'application

Ensuite, les données et méthodes déclarée au niveau du code JavaScript peuvent être intégrées dans le code HTML de la page à travers une extension du langage HTML de base, c'est-à-dire à travers :

• Une notation spécifique telle que la notation déclarative {{ ... }}
• Des attributs qui peuvent être ajouté aux éléments HTML comme par exemple v-if, v-for, v-on:clik, etc.

L'importance d'identifier l'élément HTML qui détermine le scope de l'application

Parmi les éléments qui composent l'objet de configuration, celui auquel il faut prêter une attention particulière est la propriété el qui identifie l'élément dans le code HTML. Cet élément représente le scope, c'est-à-dire le conteneur à l'intérieur duquel s'appliquent les data et les methods déclarés. Voici un exemple qui illustre ce mécanisme.

Code HTML :

<h1>Element/Scope application of Vue.js</h1>
<ul>
  <li id="app1">{{ message }}</li>
  <li id="app2">{{ message }}</li>
  <li id="no-app">{{ message }}</li>
</ul>

Code JavaScript :

var app1 = new Vue({
  el: '#app1',
  data: {
    message: 'My message for the first element with id app1'
  }
});

var app2 = new Vue({
  el: '#app2',
  data: {
    message: 'I will apply to another scope, that is the app2 element'
  }
});

• Voir cet exemple http://codepen.io/mafritz/pen/evPmmJ

Le contenu de la liste non ordonnée qui s'affiche à l'utilisateur sera le suivant :

• My message for the first element with id app1
• I will apply to another scope, that is the app2 element
• {{ message }}

Ceci en raison du fait que la valeur de la variable message s'applique exclusivement à l'intérieur de l'élément identifié par la propriété el. Étant donné que le troisième li n'est pas identifié en tant qu'élément conteneur par un objet new Vue(), la notation {{ message }} n'est pas interprétée.

Le rendering dans le code HTML

Comme on l'a vu plus haut avec la notation {{ ... }}, Vue.js permet de modifier le contenu du code HTML après que le code source a été téléchargé par le navigateur. Cette possibilité peut s'appliquer à tous les éléments HTML d'une page à condition qu'ils se trouve à l'intérieur d'un élément "conteneur" identifié par Vue.js en tant que scope (voir point précédent). Ce mécanisme de rendering est par contre différent selon quel type de contenu des éléments HTML on veut modifier.

Modification du contenu d'un noeud

Si on veut modifier le contenu d'un nœud HTML, comme par exemple le texte d'un paragraphe, alors il faut utiliser la notation {{ ... }}.

<p>{{ message }}</p>

La notation {{ ... }} peut également évaluer (avec des limitations) du code JavaScript, donc on peut par exemple imaginer de transformer le texte en majuscules :

<p>{{ message.toUpperCase() }}</p>

Modification d'attributs d'un noeud

Au contraire, si on veut récupérer de manière dynamique le contenu d'un attribut d'un élément HTML, il faut plutôt utiliser la notation v-bind:attribut comme par exemple :

<img v-bind:title="message">

Dans ce cas si vous passez sur l'image avec la souris pour déclencher l'attribut HTML title, vous ne verrez pas s'afficher "message" mais plutôt la valeur associé à la propriété data.message dans votre code JavaScript.