Vue.js : les directives

Les directives sont préfixées par v- pour indiquer que ce sont des attributs spéciaux fournis par Vue,
J'ai employé le terme attribut car en effet les directives sont écrites dans la partie HTML.
Donc dans le cadre de Vue, HTML devient un véritable langage de programmation avec inclusion de variables, de tests, de boucles et d'évènements.

La directive v-html

Elle a déjà été abordée dans le chapitre précédent : exemple 3.
Vous avez noté la syntaxe : <h2 v-html ="titre"></h2>. Donc la syntaxe d'un attribut de balise.
Rappelez vous l'impact ? Grâce à cet attribut, le balisage contenu dans la variable est interprété.

Les conditions

Le code (extrait)

...
<script src="vue.min.js"></script>
</head><body>
<div id="info">
	<h3>Il est très exactement : {{horloge}}</h3>
	<h4 v-if ="heure < 12">Bonne matinée</h4>
	<h4 v-else>Bon après-midi</h4>
</div>
<script>
var cejour = new Date(); 
var app = new Vue({
    el: "#info",
    data: {horloge : cejour.toLocaleTimeString(), heure : cejour.getHours()}  
  });
...

HTML :
Chargement de la version de production du framework à partir de la copie en local.
Notez les directives v-if ="test" & v-else.
Ici il faut lire "Si heure < 12 alors 'Bonne matinée' sinon "bon après-midi".
Donc le code HTML contient des conditions ...

JS :
Deux variables dans l'instance de Vue : horloge & heure . Ces deux variables dépendent de cejour ; variable déclarée en dehors de l'instance.
Notez l'emploi de méthodes relatives aux objetss Date : toLocaleTimeString(), getHours()
Oui, il est préférable d'avoir de bonnes connaissances en JS Natif pour aborder le framework Vue.js

Le rendu

L'instant présent est affiché dans un format lisible pour un francophone.
A la ligne suivante : affichage de "Bonne matinée" ou "bon après-midi".
L'instant n'est pas actualisé. Que faudrait-il rajouter dans le script pour qu'il le soit ?

Et on ne souhaite pas "bonne soirée" ni "bonne nuit".
Il y aurait alors quatre plages horaires donc il faudrait imbriquer trois tests.
Rassurez-vous, c'est possible à condition d'utiliser les autres directives de test. Voir plus loin dans ce chapitre.

La saisie de valeurs

La directive v-model permet de lier un champ de saisie à une variable décrite dans la rubrique "data" de l'instance de Vue.

Exemple simpliste

Le code (extrait)

...
<div id="info">
	<label>Note obtenue ?  </label>
	<input type ="text" v-model ="note">
	<h4>Note obtenue : {{note}}</h4>
</div>

<script>
var app = new Vue({
    el: "#info",
    data: {note : 0}  
  });
...

La valeur saisie dans le INPUT sera affectée à la variable "note".
C'est donc beaucoup plus simple qu'en JS natif et même qu'en JS-jQuery où il faut récupérer dans une variable le contenu de l'input.
Ci-dessous une petit rappel de la liaison champ-variable avec jQuery : ... <form> <input type = 'range' min = '0' max = '255' step = '5' ... > ... </form> <script> ... var rouge = $("input:eq(0)").val(); ...

Le rendu

Saisissez "18" dans le champ, cette valeur est reprise dans la baliee H4.
En général une valeur est saisie en vue d'un traitement postérieur ...

Exemple 2 : appreciation automatique en fonction de la note saisie

Le code HTML comprend une saise et plusieurs tests imbriqués.

Le code (extrait)

...
<div id="info">
	<label>Note obtenue ?  </label>
	<input type ="text" v-model ="note">
	<h4 v-if ="note < 8" >Très faible</h4>
	<h4 v-else-if ="note < 12" >Passable</h4>
	<h4 v-else-if ="note < 15" >Bien</h4>
	<h4 v-else-if ="note <= 20" > Excellent</h4>
	<h4 v-else>Erreur de saisie</h4>
</div>

<script>
var app = new Vue({
    el: "#info",
    data: {note : 0}  
  });
...

Tout est dans le code HTML à la "sauce Vue.js".
Vous voyez via cet exemple que développer avec Vue.js c'est écrire du HTML enrichi (de boucles, de tests, etc.)
Ici chaque élément H4 contient une condition. Seul un élément H4 s'affichera parmi les 5.

v-if ="test" pour le premier test (si)
v-else-if="test" pour les tests suivant (sinon si)
et enfin v-else (sinon).

Le script ne comprend que l'instance de Vue. Cette dernière est d'une simplicité déroutante !

Le rendu

Saisissez successivement : 5, 10, 14, 19, 22, 12,5
Dans les deux dernièrs cas : erreur de saisie ; 22 > à 20 et 12,5 n'est pas un format numérique (il faut saisir 12.5)

Les boucles

La directive v-for permet de lier un tableau Vue à une liste HTML.

Exemple

Le code (extrait)

...
<div id="info">
	<h4>{{proprietaire}} est propriétaire de plusieurs véhicules : </h4>
	<ul v-for ="auto in autos"> <li> {{auto}}</li>
	</ul>
</div>
<script>
var app = new Vue({
    el: "#info",
    data: {proprietaire :"Paul", autos :['Peugeot 2008', 'Clio 5', 'Citroen C3']}  
  });
...

HTML :
On manipule la variable simple "proprietaire" et le tableau "autos".
<ul v-for ="auto in autos" > : crée une liste HTML qui va parcourir tous les items du tableau indicé "auto".

JS :
Dans "data" on définit la variable simple "proprietaire" et le tableau indicé "autos".

Le rendu

À vous de travailler !

Le rendu

Renseignez le champ du nom du propriétaire.

Ce que vous devez réaliser

Vous devez être capable de reconstituer le code de la page compte tenu de vos connaissances.
Vous devez utiliser les directives v-model & v-for.
Les variables sont : une variable simple nommée proprietaire et un tableau indicé autos
La valeur initiale de proprietaire est "renseigner le champ".

La directive v-bind

La directive v-bind utilise une donnée Vue pour créer un attribut de balise.

Exemple 1 : v-bind:src

On veut afficher pour chaque item de la liste ordonnée la photo correspondante. Il faut donc créer l'attribut "src" à la balise IMG.

Le code (extrait)

Attention le code devient un peu plus complexe ... ... <style> div ... img {width : 15% ; height : auto; margin : 1%; } .centrer {text-align : center; } </style></head> <body> <div id ="info" > <h2 class ="centrer">Voitures les plus vendues en France </h2> <ol> <li v-for ="auto in autos"> <img v-bind:src="auto.img"> <br>Marque & modèle : {{auto.marque}} -- {{auto.modele}} </li> </ol> </div> <script> // tableau d'objets au format JSON var voitures = [ {marque : "Peugeot", img : "../images/2008.jpg", modele : "2008"}, {marque : "Renault", img : "../images/clio5.jpg", modele : "clio5"}, {marque : "Citroen", img : "../images/c5.jpg", modele : "C5 Aircross"}, {marque : "DS", img : "../images/ds3.jpg", modele : "DS3"}, ]; var app = new Vue({ el : "#info", data: {autos : voitures} }); </script> ...

CSS : remarquez la règle de style pour les images et la classe "centrer".

HTML : Dans l'item LI on a <img v-bind:src="auto.img">
Ce qui signifie que l'on crée l'attribut "src" de la balise IMG en utilisant la propriété "img" de l'objet "auto".

JS :
Un tableau d'objets au format JSON avec pour nom "voitures" est déclaré en dehors de l'instance de Vue afin de ne pas surcharger le paramètre "data" de cette instance. Mais dans les "data" de cette instance on crée un lien : autos : voitures.

Le rendu

La liste ordonnée comprend 4 items.
Pour chaque item : affichage de l'image puis de la marque et ensuite du modèle.

Exemple 2 : v-bind:class

Nous pouvons utiliser v-bind pour créer une liaison entre un élément HTML et une classe CSS.
Reprenons le thème précédent et écrivons le différemment.

Le code de la page (extraits)


CSS :
.miniature {width : 15% ; height : auto; margin : 1%; }
// la règle de style relative à la balise IMG disparait !
HTML : 
	<img v-bind:src="auto.img" v-bind:class="nomClasse">
	
JS : 
var app = new Vue({
	el : "#info",
	data: {autos : voitures , nomClasse: 'miniature'}
}); 
...

Pas de changement pour le reste du code.
J'ai affecté une classe à une variable : nomClasse: 'miniature'

Attention, La valeur de v-bind:class doit être une variable définie dans l'instance de Vue. Je ne peux pas écrire directement : v-bind:class="miniature".

Le rendu

Créer de infos bulle

Il suffit d'utiliser la directive v-bind:title =" ... "

Le code

...
<style>
	article {height : auto ; width: 80%; margin : 20px auto ;  border : 1px solid black; }
	div {height : 150px ; width: 60%; margin : 20px auto; background : pink; }
</style></head>
<body>
<article id="affichage">
  <div v-bind:title="message">
    <h3>Passez votre souris lentement sur la boite rose et observez ...</H3>
  </div>
</article>
<script>
var app2 = new Vue({
  el: '#affichage',
  data: { message: 'Nous sommes le ' + new Date().toLocaleString()}
})

Afin d'éviter la multiplication des DIV imbriqués, j'utilise les nouvelles balises structurantes de HTML5 : section, article, etc.
Remarquez que la valeur d'une "data" peut être une expression complexe.

Le rendu

Survolez lentement la boite rose et observez.
Une infobulle doit apparaitre indiquant l'instant présent.

v-bind:style : "{règle de style en ligne}"

Je pense que vous allez être "bluffé" par la puissance combinée à la concision du code ci-dessous.
Une image apparait quasi transparente mais grâce à un curseur on peut faire varier son opacité.
Il y a donc liaison dynamique entre l'élément HTML et le CSS.

Le code

...
	img {width : 40% ; height : auto; display : block;  margin : 10px auto; }
	.centrer {text-align : center;}
</style></head>
<body>
<div id="info">
	<h2 class ="centrer">Utilisez le curseur pour faire varier l'opacité de l'image</h2>
     <p><input type="range" min="0" max="1" step="0.1" v-model="opacite">
	 <br>Opacité de  : {{opacite}}</p>
	 <br>
	 <img src ="../images/jolie_fille.jpg" v-bind:style ="{opacity : opacite}" >
</div>

<script>
var app = new Vue({
    el: "#info",
    data: {opacite : 0.1}  
  });
...

CSS : En plus de la règle de style relative à DIV, une règle pour les images et une classe "centrer".
L'esthétique ne doit jamais être négligée d'autant que c'est tellement facile avec CSS.

HTML :
Utilisation de HTML5 avec le champ de type "range" lié à la variable opacite
<img ... v-bind:style ="{opacity : opacite}" ... : Je définis une règle de style en ligne ; La règle de style doit être entre guillemets et accolades !
Ici la valeur de la propriété CSS opacity fait référence à la variable : opacite. Donc Je crée une interaction entre le curseur et la règle de style.

JS :
Une seule "data" dans l'instance de Vue : data: {opacite : 0.1}

Et c'est tout !

Le rendu

Modifiez la valeur du curseur et observez l'image.

Remarques

Le raccourci pour v-bind est simplement ':'.
Je peux donc écrire : <img :style = "... " >

Les événements

C'est la directive v-on qui peut être déclinée en v-on:click, v-on:input, etc.

Exemple sur 'v-on:click'

Sur clic d'un bouton de commande un élément HTML est démasqué.

Le code (extrait)

...
	img {width : 30%; display : block ; margin : 10px auto;  }
	#sexy {visibility : hidden; }
</style></head>
<body>
<div id="info">
	<br><button v-on:click ="demasquer">Démasquez l'image ? </button>
	<br><label>Votre commentaire </label>
	<br><input type ="text" v-model ="commentaire">
	<img src ="../images/bikini.jpg"  id ="sexy">
	<h2> {{commentaire}} !!!</h2>
</div>

<script>
var app = new Vue({
    el: "#info",
    data: {commentaire : " " },
	methods : { demasquer : function() {document.querySelector('#sexy').style.visibility ='visible';}
	}
} );
...

CSS : par défaut l'élément identifié "sexy" est masqué : #sexy {visibility : hidden; }

HTML :
Un bouton de commande appelle sur clic la fonction "demasquer".
Une image identifiée "sexy".
Un champ de saisie lié à la variable "commentaire".

JS : L'instance de Vue comprend désormais un troisième paramètre : methods.
On décrit dans ce paramètre des fonctions qui pourront être appelées dans le bloc concerné par la vue. Ici je décris la fonction "demasquer".

Le rendu

Cliquez sur le bouton de commande puis saisissez un commentaire.
L'image s'affiche ainsi que le commentaire sous l'image.

Remarque

Je n'étais pas obligé d'utiliser dans l'instance de Vue le paramètre methods.
Il suffisait d'écrire comme valeur de la directive v-on:click :
"document.querySelector('#sexy').style.visibility ='visible' "

Autre exemple sur v-on:click

Le code

...
<style>
	article {height : 200px ; width: 80%; margin : 50px auto; background : purple; }
	div {height : 100px ; width: 60%; margin : 10px auto; background : pink; }
	.centrer {text-align : center; line-height : 100px; }
</style>
</head><body>

<article id="info">
  <p>Cliquez sur la boite</p>
  <div v-on:click="changerTexte">
    <h2 class ="centrer">{{ texte }}</h2>
  </div>
</article>

<script>
 var app = new Vue({
    el: "#info",
    data: {texte : "Bonjour"},
	 methods: {changerTexte() {this.texte = 'Au revoir'} }
} );
...

CSS : notez que le texte est centré H & V (horizontalement et verticalement) dans la boite rose et que la boite rose est centrée H & V dans le conteneur violet.
Je rappelle que pour centrer verticalement un texte à ligne unique dans une boite il suffit que la ligne de texte (line-height) ait la même hauteur que la boite qui la contient.

HTML : si clic sur la boite rose appel de la fonction "changerTexte".

JS : dans le paramètre "methods" définition de la fonction avec une syntaxe simplifiée : nomFonction() : {...}. Le mot clé "function" a disparu.

Le rendu

Cliquez sur la boite rose.
Le texte change !

Exemple sur v-on:input

Cet événement survient à chaque fois que l'on saisit un caractère dans un champ.

Le code

Le nombre de caractères saisis dans le INPUT est affiché sous ce champ. ... input, p {height : 50px ; width : 40%; margin : 10px; font-size : 16px;} </style></head> <body> <div id="info"> <input type="text" v-on:input="compteur++" placeholder="Commencez à saisir"> <p>Nombre de caractères saisis : {{compteur }}</p> </div> <script> var app = new Vue({ el: "#info", data: {compteur : 0}, } ); ...

Dans l'instance de Vue j'initialise à zéro la variable compteur.
à chaque saisie dans le INPUT j'incrémente cette variable de 1.
J'affiche la variable compteur dans un paragraphe.
Ne négligez pas l'esthétique du formualaire d'où la règle de style pour que les contrôles ne soient pas trop petits.

Ici la valeur de la directive v-on:input n'est pas un appel de fonction mais une instruction.

Le rendu

Si vous voulez connaitre le nombre de lettres du mot "anticonstitutionnellement".

Un évènement ne doit se produire qu'une seule fois

Par exemple un seul clic possible. Il suffit d'écrire la directive de la façon suivante : v-on:click.once

Exemple de code

...
<div id="info">
	<input type ="text" v-model ="nom" placeholder ='Saisir votre nom'>
	<br><button v-on:click.once = "fsaluer" >Infos </button>
<script>
var app = new Vue({
    el: "#info",
    data: {nom : ''},
	methods: {fsaluer() {alert('Bienvenu(e) cher(e)' + this.nom)} }
} );
...

Dans la fonction "saluer()" n'oubliez pas le mot clé "this" sinon 'bog' avec message d'erreur : "nom is not defined".

Le rendu

La boite alert() apparait après un premier clic puis plus rien ...
Vous pouvez utiliser le suffixe ".once" avec d'autres évènements (:input, :mousemove, etc.)

Remarques

La directive v-on peut s'écrire tout simplement '@:'
Je peux donc écrire, par exemple : <button @:click="alert('salut')" > Validez !</button>

Traduction

Tutoriel sur JS natif, Vue.js, jQuery.js & Node.js

JavaScript natif

Framework Vue.js

Framework jQuery.js

Node.js

Tutoriel JavaScript - recherche

L'auteur : Patrick Darcheville

Vue.js : les directives

La directive v-html

Les conditions

Le code (extrait)

Le rendu

La saisie de valeurs

Exemple simpliste

Le code (extrait)

Le rendu

Exemple 2 : appreciation automatique en fonction de la note saisie

Le code (extrait)

Le rendu

Les boucles

Exemple

Le code (extrait)

Le rendu

À vous de travailler !

Le rendu

Ce que vous devez réaliser

La directive v-bind

Exemple 1 : v-bind:src

Le code (extrait)

Le rendu

Exemple 2 : v-bind:class

Le code de la page (extraits)

Le rendu

Créer de infos bulle

Le code

Le rendu

v-bind:style : "{règle de style en ligne}"

Le code

Le rendu

Remarques

Les événements

Exemple sur 'v-on:click'

Le code (extrait)

Le rendu

Remarque

Autre exemple sur v-on:click

Le code

Le rendu

Exemple sur v-on:input

Le code

Le rendu

Un évènement ne doit se produire qu'une seule fois

Exemple de code

Le rendu

Remarques