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.