Accueil

Traduction

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

Tutoriel JavaScript - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

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

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

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é

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

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

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

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

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

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

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.