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 :

<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

qui est associée de manière automatique à la valeur de la propriété data.count dans le code JavaScript