Vue.js (cli3) : Interpolations, premières directives, Javascript dans le template HTML et Binding | FR 👊

Part 5. of Tutorial : Vue.js (cli 3) for Beginner/Pour débutants✔️ |2019| EN/FR

EN : English Version available here😙

Part.6 Disponible ici (propriétés calculées/observateurs)

Toujours dans notre lancée sur l’apprentissage de Vue.js au complet, nous allons dans cette partie étudier les différentes syntaxes du Template de Vue.js

Il faut savoir que Vue.js utilise ce que l’on appelle “une syntaxe de template basée sur HTML” ce qui permet de lier le rendu du DOM aux données de notre instance de Vue.

Pour ceux qui se posent la question que Vue.js nous livre donc un code HTML “Valide”. Toutes les règles d’accessibilité que vous souhaitez y intégrer seront présente dans votre livrable final. Ce code peut également être analyser par des navigateurs ou des bots qui analyse votre HTML et ressortir un résultat conformes aux spécifications et standards W3C.

Le but premier de Vue.js est donc grâce à l’utilisation de fonction qui vont effectuer le rendu de notre page, réussir à effectuer le moins de manipulation possible du DOM pour arriver à ses fins.

Les premières choses que nous allons voir dans cette partie sont les interpolations

Interpolations

La syntaxe la plus simple à étudier lorsque l’on commence avec Vue.js est ce que l’on appelle l’interpolation de texte : Le but étant ici d’afficher une variable dans notre HTML de manière assez classique. Vous savez qu’en informatique, la base est d’utiliser le fameux “Hello World” alors faisons le avec un exemple ici :

<template>
   <span> Hello {{ message }} </span>
</template>
<script>
  export default {
     data() {
       return {
          message: "World"
       }
    }
  }
</script>

Cela va donc afficher sur notre page web le résultat suivante :

Hello World

Quelques explications sont à fournir : sachez que tout composant Vue.js est constituer de son export défaut {} à l’intérieur duquel nous retrouverons toutes les méthodes et variables liées au composant. La première chose à voir concernant la méthode data() qu’on peut également écrire de cette manière :

data: function () {   }

Mais la syntaxe précédente est tout de même plus rapide et lisible. Cette méthode doit uniquement retourner les variables de notre composant.

Dans notre cas, elle retourne uniquement un message mais on peut avoir plusieurs variables de tout type comme par exemple :

data() {
       return {
          message: "World",
          compteur: 13,
          pourcentage: 60,7
          estActif: true,
          tableauVide: []
     }
 }

Comme vous pouvez le voir il est possible d’utiliser des variables vides ou non.

Autre point à voir à ce sujet, pour afficher cette variable dans notre code nous utilisons donc ce que l’on appelle la “Syntaxe Moustaches” car les 2 accolades forment une espèce de moustache ( {{ )

Sur la documentation officielle de Vue.js, l’interpolation textuelle fournit assez rapidement une introduction aux directives en spécifiant qu’il est possible lorsque l’on déclare un composant de n’effectuer qu’une seule et unique fois cette attribution de variable, car oui, si votre variable change, le contenu est re-généré dans votre composant pour mettre à jour l’interface.
Si vous ne voulez pas que cela se produise plus d’une fois vous pouvez utiliser une directive spéciale nommée “v-once”, nous allons la voir juste après une courte introduction

Petite introduction aux directives

En Vue.js, une directive est un attribut que l’on place au niveau d’une balise HTML. Si vous n’êtes pas familier des attributs de balise HTML, vous en utilisez surement beaucoup, par exemple lorsque vous déclarez une image avec <img href=”monImage.png” /> et bien le href est un attribut.

Avec Vue.js, l’attribut commence toujours par le préfixe -v

Le but des directives en Vue.js est de rapidement effectuer des opérations sur le DOM lorsque une expression change dans votre code.

La plus simple des directives est sûrement v-if qui comme son nom l’indique affiche ou non l’élément HTML sur lequel il est situé. (en vrai c’est un peu plus compliqué pour le cas de v-if, mais nous reviendrons dessus assez rapidement.)

<span v-if="estVisible"> Mon Texte </span>

Dans cet exemple :

• Si estVisible = true alors la balise <span>Mon Texte</span> sera visible
• Si estVisible = false alors la balise n’apparaîtra pas

Pour en revenir avec notre cas présenté plus haut (les data d’un composant), il est possible d’utiliser une directive nommée v-once qui si elle est mise sur une balise, empêchera son contenu d’être re-généré, par exemple :

Le code est n’est pas changé

Script
data() {
  return {
     a: 1
  }
}
Template
<span @click="execute" v-once> Chiffre {{ a }} </span>
Rendu
Chiffre 1
Admettons que nous disposons d'une fonction "execute()" qui lorsque l'on clique sur le span incrémente a de 1   (a+=1)
Alors le nouveau rendu sera : 
Chiffre 1

Ce qui est normal puisque la directive v-once empêche les variables présentent dans le <span> d’être modifier

Attention : Vous pourrez peut être voir qu’il existe une directive v-html qui permet de générer du HTML à la place d’une variable classique, je le vous déconseille car il suffit qu’un utilisateur mal intentionné utilise ce que l’on appelle des “injections de HTML” dans votre page, il serait alors possible pour lui de trouver la une faille pour mettre à plat votre application, voir voler les données de vos utilisateurs

Il est également possible de rendre dynamiques/réactifs des attributs de HTML classique comme les attributs en lien avec l’accessibilité (aria) ou les HREF/SRC de vos liens et/ou images

Pour ce faire vous devez utiliser la syntaxe v-bind: voici un cas concret :

<img src="monImage.png />
Si vous souhaitez afficher une image puis changer pour X ou Y raison cette image de manière dynamique vous devez utiliser la syntaxe:
<img v-bind:src="monImage" />
En ayant correctement pris le temps de déclarer dans votre composant la data correspondante : 
data() {
  return {
    monImage: "http://..../../monImage.png"
  }
}
Si "monImage" change, l'attribut src de votre image changera également et votre page se modifia en temps réel

Important:

1. Vous verrez cependant rarement cette syntaxe car il est possible de raccourcir une directive comme v-bind:src par par exemple :src
La syntaxe des deux petits points remplace ainsi le “v-bind”

2. Pensez également que lorsque vous utilisez un v-bind (ou juste les deux petits points), vous passez une variable et non pas une chaine de caractère.
( Si vous écrivez src=”./monImage.png” c’est une chaîne de caractère alors que si vous écrivez :src=”./monImage.png” => Vue.js va essayer de trouver dans votre composant une variable qui s’appelle ./monImage.png ce qui va causer une erreur 😄

Il existe énormément de directives en Vue.js, celles-ci inclues également les événements (clic, appuie sur une touche et autres), ce que l’on appelle plus communément des événements du DOM

<button v-on:click=”onClickDeMonBouton”> test </button>

Cette syntaxe permet alors de lancer la méthode onClickDeMonBouton() lorsque vous cliquerez sur votre bouton. (nous verrons les méthodes plus tard)

Remarque : Vue.js nous fourni encore une fois une contraction de cette appelle pour plus de rapidité et de lisibilité dans votre code, vous pouvez utiliser la syntaxe @click qui est équivalente au v-on:click

Prenez le temps de tester dans votre coin quelques directives depuis la documentation officielle (ou forum/tuto sur le net) ainsi que différents événements (entraînez vous avec les touches du clavier par exemple, voir combinaison de 2 touches si vous êtes chauds !) 😅

Je ne parlerai pas pour le moment dans cette partie des modifiers en Vue.js car il nous faudrait de plus gros exemples mais sachez qu’il est possible lors d’un événement @click par exemple, de spécifier à Vue.js que l’on souhaite utiliser une méthode JavaScript lié à Evènement, directement dans la directive. Je m’explique, vous connaissez surement déjà tous le fameux cas où nous avons un formulaire avec un bouton type=”submit”, et où nous sommes obligés d’effectuer un event.preventDefault() lors du onClick sur ce bouton. Et bien Vue.js met à disposition des “modifiers” qui permettent d’éviter ce genre de cas en utilisant par exemple la syntaxe :

<button 
   type="submit" 
   @click.prevent="onClickBtnSubmit"
> 
   Ok 
</button>

Nouveautés concernant les directives depuis Vue version 2.6.0 et plus

Sachez que la toute dernière nouveauté concernant les directives est disponible depuis Vue 2.6 (pour connaitre votre version ouvrez une console et tapez “vue --version”

Cette nouveauté permet de rajouter des argument dynamique dans l’appel à nos directives, permettant ainsi à Vue.js d’évaluer ces arguments comme une chaîne de caractère

Par exemple, si nous souhaitons reproduire notre exemple avec l’image :

<img v-bind:src="monImage" />    (CODE 1)

Vue.js nous permet maintenant de gérer dynamiquement l’élément “src” avec par exemple :

<img v-bind:[elementDynamique]="monImage" />   (CODE 2)

Si nous déclarons dans notre composant une variable :

data() {
  return {
    elementDynamique: "src"
  }
}

Alors Code 2 fournira le même résultat que Code 1

Petit récapitulatif depuis la doc officielle :

MERCI à vous d’avoir suivi cette nouvelle partie 😊

Dans la prochaine partie nous verrons ce que sont les Computed et Watchers, leurs différences, à quoi ils servent, comment et où les utiliser, ça promet d’être sympa ! Partie 6 disponible ici

CLAP This Article — EMAIL ME (thibault.jeanpierre.dev@gmail.com)

— CONTACT ME ON LINKEDIN — SHARE THIS ARTICLE

😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀