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 1Admettons 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
đ đ đ đ đ đ đ đ đ đ đ đ đ đ đ đ đ đ đ đ đ