Les langages du web > Le Javascript

Mini-cours sur vue.js

Table des matières

Avant de lire ce cours, je choisis mes couleurs

Pré-requis :

Introduction

VueJS permet d'utiliser des composants réutilisables pour la création d'interface d'applications web. Ce frameworks créé en 2014, est une version plus légère et améliorée d'AngularJS.

VueJS est un framework. Sa version 2.6.12 se décline en deux versions :

Explication des différents builds

Comparatif avec d'autres frameworks

React

AngularJS (Angular 1)

Les directives (= les nouveaux attributs des balises HTML) rendent le fichier HTML non conforme aux règles de la W3C ! Toutefois, une application web n'étant pas une page web, on peut considérer que ces règles ne sont pas de stricte application.

Angular (Angular 2)

AngularJS est quasi abandonné au profit d'Angular.

React et Angular sont les deux seuls "vrais" rivaux de VueJS.

Comparatif des téléchargements entre React, Vue et Angular

Début du cours

Rappel : Notions de base

Vue est une class. (Le nom d'une class débute par une majuscule.)
L'opérateur new crée un objet de cette class. 

/* création d'un objet */
new Classe();

/* création d'un objet, puis affection de l'objet créé à une variable */
var myObject = new Classe();

La valeur de la variable myObject est un objet.

Il n'est pas obligatoire d'affecter une variable lors de la création d'un objet de type Vue. Mais, cette affection permet alors d'appeler cette variable dans la console et de modifier le comportement de l'application en temps réel. Ce qui peut être utile dans la phase de débogage de l'application web.

Une class peut contenir une ou plusieurs méthodes particulières, appelées "constructeur". Le paramètre d'un constructeur peut être un objet JS.

Un objet JS peut s'écrire, comme ici, sous la forme {couple1, couple2, ...}

couple1 peut s'écrire : key: value

value peut être de type :

el:

Le constructeur de la class Vue reçoit un objet qui contient, au moins, un couple dont la clé est nommée el. La valeur de cette clé est la valeur de l'attribut id d'une balise HTML, précédée du caractère #. Cette balise délimite la zone de l'application.

1 + 1 = {{ 1 + 1 }}

Code HTML 

<div id="app1">
  1 + 1 = {{ 1 + 1 }}
</div>

Code JS 

var app1 = new Vue({
  el: '#app1'
});

Une page web peut contenir plusieurs applications : app1, app1b, ...

{{ mustache }}

La forme la plus courante de la liaison de données est l'interpolation en utilisant la syntaxe "Mustache" (les doubles accolades). Le contenu de la balise mustache est évalué; puis, cette balise est remplacée par le résultat de cette évaluation.

2 + 2 = {{ 2 + 2 }} = {{2+2}}

Code HTML 

<div id="app1b">
  2 + 2 = {{ 2 + 2 }} = {{2+2}}
</div>

Code JS 

new Vue({
  el: '#app1b'
});

Une expression est tout ce qui peut être évalué par JS. 

{{ number + 1 }}
{{ ok ? 'OUI' : 'NON' }}
{{ message.split('').reverse().join('') }}

L'espace qui suit {{ et celui qui précède }} permet d'avoir un code plus lisible. Les espaces entre les {{ }} n'influencent pas l'affichage.

Les moustaches ne peuvent pas être utilisées à l'intérieur des attributs HTML. À la place utilisez une directive v-bind.

Voir : Expressions et opérateurs

data:

Le constructeur de la class Vue reçoit un objet qui peut contenir un couple dont la clé est nommée data. La valeur de cette clé est un objet JS. Cet objet JS contient toutes les propriétés de l'application ou du composant (devant être initialisées) sous la forme de couples (clé:valeur).

Il est préférable de parler de propriétés même si elles sont comme des variables, car ces data caractérisent l'application, contrairement à la variable i dans une boucle.

Ces propriétés sont aussi appelées, dans le cadre de Vue, dépendances réactives, car la modification de l'une d'elles déclenche une réaction (= une mise à jour du rendu).

Le rendu est le code HTML généré (dans la mémoire du navigateur) par le code JS utilisé dans le framework Vue.js

La balise mustache sera remplacée par la valeur de la propriété message de l'objet data correspondant.

{{ message }}

Code HTML 

<div id="app1c">
  {{ message }}
</div>

Code JS 

var app1c = new Vue({
  el: '#app1c',
  data: {
    message: 'Hello Vue !'
  }
});

app1c.message="Bonjour, Thibaut !";
/* création d'un objet de type Vue, puis affection de l'objet créé à une variable */
var app1c = new Vue({...});

Une variable peut être affectée avec un objet, afin de pouvoir modifier les valeurs de cet objet ultérieurement. Comme ci-dessous : 

app1.message="Bonjour, Thibaut !";

Ici, la variable message a été initialisée (dans le constructeur) avec la valeur : 'Hello Vue !'. Puis, elle a été réaffectée avec la valeur : "Bonjour, Thibaut  !". Au final, c'est donc "Bonjour, Thibaut !" qui s'affiche.

computed:

Le constructeur de la class Vue reçoit un objet qui peut contenir un couple dont la clé est nommée computed. La valeur de cette clé est un objet JS. Cet objet JS contient toutes les propriétés calculées. Le nom d'une propriété calculée est le nom d'une fonction qui retourne une valeur. Une propriété calculée contient toute une logique complexe qui produit un résultat.

{{ a }} + {{ b }} = {{ total }}

Code HTML 

<div id="app1d">
  {{ a }} + {{ b }} = {{ total }}
</div>

Code JS 

new Vue({
  el: '#app1d',
  data: {
    a: 3,
    b: 4
  },
  computed: {
    total(){
      return this.a + this.b
    }
  }
});

this indique l'objet Vue lui-même. Ici, cet objet a une propriété a dont la valeur vaut 3.

total(){...} = total: function(){...}

les propriétés déclarées dans la clé computed sont mises en cache selon leurs dépendances à une propriété déclarée dans la clé data. Une propriété calculée sera réévaluée uniquement quand l'une de ses dépendances aura changé, contrairement aux propriétés qui peuvent être modifiée dans les méthodes déclarées dans la methods.

Généralement, les propriétés calculées sont utilisées comme un getter. Toutefois, il est possible d'utiliser aussi un setter. Dans le getter a comme nom de clé get et le setter a comme nom de clé set 

computed: {
  fullName: {
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

Le setter mettra alors à jour les dépendances réactives (= propriétés de l'application ou du composant) à jour

methods:

Le constructeur de la class Vue reçoit un objet qui peut contenir un couple dont la clé est nommée methods. La valeur de cette clé est un objet JS. Cet objet JS contient toutes les méthodes de l'application.

La syntaxe sera affichée lorsque la directive v-on sera abordée.

watch:

Dans certains cas, il est utile d'observer une propriété réactive.

Syntaxe : 

watch: {
    mydata: function (newValue, oldValue) {
      /* ... */
    }
  }

Le premier paramètre (d'un nom quelconque) de cette fonction contiendra la nouvelle valeur de la propriété réactive. Le second paramètre, ayant également un nom quelconque, contient l'ancienne valeur de cette propriété réactive.

Liens

Dossier des fichiers liés au livre : H:\2021\www\sitesHTML\incels\cours\LeWeb\vueJS\eyrolles