Vue.js : les composants

Avant d'aborder le gros morceau que constitue le concept de composant je vais évoquer les templates, les propriétés calculées et les observateurs.

L'option template dans l'instance de Vue

Le code HTML qui sera inséré peut être décrit dans l'option "template" de l'instance de Vue plutôt que dans la partie BODY.

Exemple

Le code de l'exemple

...
	div {height : 200px ; width: 60%; margin : 20px auto; background : yellow; }
</style>
<body>
<div id="info"></div>
</body>
<script>
const app = new Vue({
	el: "#info",
	template : `<div><h4>Bonjour cher(e) {{nom}}
				<br> {{prenom}}
				<br>Comment allez vous ? 
				</h4></div>`,
	data : {nom : "Dupont", prenom : "Louis"}
	
}); 
</script>
...

Le code dans la partie BODY se résume à une instruction : <div id="info" ... c'est à dire la description de l'élément HTML qui sera l'objet de l'instance de Vue.
Au lieu d'écrire le code HTML dans la partie BODY, il est décrit dans l'option "template" de l'instance de Vue.
Ce template peut être décrit sur plusieurs lignes (comme dans l'exemple) à condition de délimiter la chaine multiligne par des guillemets inversés (altgr + è).

Dans le cadre des composants, l'option "template" deviendra indispensable.

Le rendu

Propriétés calculées

Les cases à cocher

Code de l'exemple

...
<div id="app">
	<p>Urgent ? <input type="checkbox" v-model="case1"> {{ case1 }}
	<p>Confidentiel ? <input type="checkbox" v-model="case2"> {{ case2 }}
</div>
<script>
const app = new Vue({
	el : "#app",
    data : {case1: false, case2 : true },
  })
 </script>
 ...

La première case est initialisée à false (donc décochée) et la deuxième case est initialisée à true donc cochée.

Le rendu

Si vous demandez à quelqu'un si quelque chose est important ou confidentiel il répondra par OUI ou par NON mais pas par True OU False.
Il faut adapter le formulaire au langage naturel. C'est possible grâce aux propriétés calculées.

Cases à cocher & propriétés calculées

Les propriétés calculées sont comme les propriétés de données (data) sauf qu'elles dépendent d'autres propriétés
Pour créer dans l'instance de Vue des propriétés calculées il faut utiliser l'option computed:

Le code précédent amélioré

...
<div id="info">
	<p>Urgent ? <input type="checkbox" v-model="case1"> {{ case1yn }}
	<p>Confidentiel ? <input type="checkbox" v-model="case2"> {{ case2yn }}
</div>
<script>
const app = new Vue({
	el: "#info",
    data :  { case1: false, case2 : true },
	computed: {
		case2yn() {if(this.case2){return 'OUI'} else {return 'NON'} },
		case1yn() {if(this.case1){return 'OUI'} else {return 'NON'} }
		}
  })
...

Apparition de l'option computed: dans l'instance de Vue.
La propriété calculée "case1yn" (yn comme YES NO) dépend de "case1" et la propriété calculée "case2yn" dépend de "case2".

Le rendu

Pour chacune des deux cases : si cochée affichage à droite de OUI et si décochée affichage de NON.
Ce qui est conforme au langage naturel d'un francophone.

Observateur

Un observateur ("watcher") est une méthode qui surveille une propriété de données portant le même nom.
Cette méthode s'exécute chaque fois que la valeur de la propriété de données change.
Il faut utiliser un "watcher" si une certaine valeur de propriété de données nécessite une action.
Pour créer un observateur il faut utiliser l'option watch.

Exemple

Le curseur autorise une saisie entre 0 et 20 mais le "watcher" interdit la sélection dans cette plage de 7 et 13.

Le code

...
<style>
	div {border: 2px dashed black ;   width: 60%;   padding: 20px; margin : 20px auto ;   }
   	input {width : 350px ; height : 30px ; margin : 10px ; vertical-align : top  }
</style>
</head><body>
<div id="affichage">
  <input type="range" min="0" max="20" step="1" v-model="curseur">
  <p>Valeur saisie : {{ curseur }}</p> 
</div>
<script>
  const app = Vue.createApp({
    data() { return { curseur: 10}},
    watch: {curseur(val) {
        if(val==7) this.curseur=6
		if(val==13) this.curseur =12
		}
	}
  })
 app.mount('#affichage')
 ...

Le rendu

Vous n'arrivez à saisir ni 7 ni 13.

Les composants

Le concept

Un composant ("component") c'est une brique utilisée pour construire une page HTML.
Un composant c'est en fait un nouvel élément HTML personnalisé.
Un composant est basé sur un modèle de description : template.
Un composant peut être utilisé autant de fois qu'on le souhaite.
Un composant comprend obligatoirement l'option "template".

Premier exemple

Le code

...
<style>
	.fbutton {display : block; margin : 10px ; height : 40px ; width : 150px; background-color : skyblue;  
			box-shadow : 5px 5px 5px navy ; 	border-radius : 5px;	}
</style>
</head><body>
<div id="affichage">
<bouton></bouton>
<bouton></bouton>
<bouton></bouton>
</div>
<script>
Vue.component('bouton', {template: "<button class ='fbutton'>Clique ici !</button>" }); 
const app = new Vue({ el: '#affichage' });
...

CSS : mise en forme très soignée d'une boite avec la classe "fbutton'.

HTML : utilisation trois fois d'une balise BOUTON c'est à dire d'un composant.

JS : création d'un composant avec Vue.componant()
Deux options seulement ici : le nom du composant et "template" : modèle de description du composant.

Le rendu

J'ai créé une nouvelle balise HTML :bouton et je l'utilise 3 fois dans cette page.

Exemple 2

Rien n'interdit de manipuler des données dans un composant ; le modèle de description ("template") sera plus complexe ...

Le code

...
<div id="affichage">
  <bouton-compter></bouton-compter>
  <bouton-compter></bouton-compter>
  <bouton-compter></bouton-compter>
</div>
<script>
Vue.component('bouton-compter', {
   data: function () {return {compter: 0}},
  template: "<button v-on:click='compter++'>Vous m'avez cliqué {{ compter }} fois sur ce bouton</button>"
}); 
const app = new Vue({ el: '#affichage' });
...

La nouvelle balise se nomme bouton-compter.
Trois options dans Vue.componant() : nom du composant, data(), template.
La nouvelle balise affiche le contenu de compteur. Cette donnée est incrémentée de 1 à chaque clic.
Les briques sont indépendantes les unes des autres : il y aura donc une variable "compter" pour chaque élément bouton-compter

La propriété data doit impérativement être une fonction ainsi une variable compter sera propre à chaque élément bouton-compter.

Le rendu

Cliquez plusieurs fois sur les différentes boutons. Vous constatez qu'il y a bien trois compteurs différents !
Composant avec propriété "props"

Dans l'exemple prédédent le composant n'a accès à aucune donnée en dehors des siennes.
Si on veut transmettre des données au composant il faut ajouter à sa définition la propriété props (comme propertys).
Transmettre des données statiques au composantLe code
... <style> .joli {text-align : center; font-size :16px; color : white ; background : black; width : 50%; margin : 10px auto; line-height : 40px; } </style> </head><body> <div id="affichage"> <iden nom="Dufour" prenom ="Martine"></iden> <iden nom="Pasqua" prenom ="Charles"></iden> <iden nom="Poher" prenom ="Alain"></iden> <iden></iden> </div> <script> Vue.component('iden', { props: ['nom', 'prenom'], template: "<p class ='joli'>Mon nom est {{nom}} et mon prenom est {{prenom}}</p>" }); const app = new Vue({ el: '#affichage' }); ...
Le composant se nomme iden (comme identité).
Notez que dans la description du composant la propriété props à pour valeur un tableau avec deux items.
Observez aussi le "template" qui permet l'affichage d'un nom et un prénom.
Le rendu

Transmettre des données dynamiques au composant

On veut afficher dans le composant des données saisies au clavier.
Le code
... <style> .joli {text-align : center; font-size :16px; color : white ; background : black; width : 50%; margin : 10px auto; line-height : 40px; } input {width : 150px ; height : 40px ; margin : 10px;} </style> </head><body> <div id="affichage"> <input type ="text" v-model ="nomSaisi" placeholder ="Saisir nom"> <br><input type ="text" v-model ="prenomSaisi" placeholder ="Saisir prénom"> <iden v-bind:nom ='nomSaisi' v-bind:prenom ='prenomSaisi'></iden> </div> <script> Vue.component('iden', { props: ['nom', 'prenom'], template: "<p class ='joli'>Mon nom est {{nom}} et mon prénom est {{prenom}}</p>" }); const app = new Vue({ el: '#affichage' , data: {nomSaisi : '', prenomSaisi : ''}});
Pas de changement pour la définition du composant. Par contre l'appel du composant en HTML est notablement modifié :
<iden v-bind:nom ='nomSaisi' v-bind:prenom ='prenomSaisi' > :
On crée l'attribut "nom" qui récupère 'nomSaisi" et l'attribut "prenom" qui récupère 'prenomSaisi'. On utilise donc deux fois la directive v-bind.
Le rendu

Gestion de listes

Le code
... <style> div {height : auto ; width: 60%; margin : 10px auto;} li {height : 30px ; font-size : 18px;} </style> </head> <body> <div id="affichage"> <liste v-for="individu in individus" v-bind:personne="individu"></liste> </div> <script> Vue.component('liste', { props: ['personne'], template: "<li>Nom : {{personne.nom}} - prénom : {{personne.prenom}}</li>" }); const app = new Vue({ el: '#affichage', data: { individus: [ {nom: "Durand", prenom: "Jacques"}, {nom: "Dupont", prenom: "Albert"}, {nom: "Martin", prenom: "Denis"}, ] }}); ...
Script :
Dans "data" de l'instance de Vue un tableau d'objets nommé "individus".
Création d'un composant nommé "liste" basé sur l'élement natif LI.
HTML :
liste v-for="individu in individus" v-bind:personne="individu" : pour chaque élément de la liste "individus" une instance du composant est créée.
L'attribut "personne" récupère une ligne de la liste.
Le rendu

Si vous voulez affichez 4 noms et prénoms il suffit de rajouter une ligne dans le tableau d'objets.
Chapitre précédent Haut de page

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 composants

L'option template dans l'instance de Vue

Exemple

Le code de l'exemple

Le rendu

Propriétés calculées

Les cases à cocher

Code de l'exemple

Le rendu

Cases à cocher & propriétés calculées

Le code précédent amélioré

Le rendu

Observateur

Exemple

Le code

Le rendu

Les composants

Le concept

Premier exemple

Le code

Le rendu

Exemple 2

Le code

Le rendu

Composant avec propriété "props"

Transmettre des données statiques au composantLe code

Le rendu

Transmettre des données dynamiques au composant

Le code

Le rendu

Gestion de listes

Le code

Le rendu