Un composant permet de créer des nouvelles balises HTML avec un comportement spécifique personnalisé. L'idée est de rendre son utilisation très facilement réutilisable.

Dans ce tutoriel, nous allons voir comment créer un tel composant. Il pourra ensuite être utiliser comme n'importe quelle balise HTML.

<mon-composant></mon-composant>

Exemple d'utilisation du composant mon-composant

Par exemple, nous allons ici créer un champ de mot de passe personnalisé. L'idée sera d'avoir un champ mot de passe, avec son contenu masqué, qui disposera d'un bouton permettant d'afficher le texte saisi.

Pour cela, nous allons utiliser le framework VueJS.

Démonstration

Ce codepen vous montrera le fonctionnement du champ mot de passe que nous allons développer : Voir la démo.

Initialisation

Nous allons utiliser VueJS comme une librarie JavaScript classique. Il suffit donc d'insérer le framework dans notre page HTML avec la balise script. Par soucis de performance, il est préférable de l'ajouter en fin de page, avant la fermeture du body.

Nous allons également créer notre propre fichier JS app.js et l'importer dans la page. Le code HTML ressemble à ceci :

<html>
    <head>...</head>
    <body>
        <div id="app">
            ...
        </div>
        <script src="https://unpkg.com/vue"></script>
        <script src="app.js"></script>
    </body>
</html>

Insertion du Vue JS par CDN

Téléchargement et installation

Vous pouvez utiliser un CDN ou directement importer Vue depuis le fichier JS que vous aurez téléchargé.

Initialiser VueJS

J'ai ajouté une balise avec l'ID app. C'est au sein de celle-ci que nous allons écrire notre code. En effet, VueJS a besoin d'une balise au sein de laquelle s'éxecuter. C'est ce que nous déterminons avec l'option el lors de la création de l'instance VueJS, dans le fichier app.js.

var app = new Vue({
    el: '#app'
})

Initilisation de VueJS dans le fichier app.js

Enregistrer le composant

Le composant que nous allons utiliser va être un champ mot de passe disposant de fonctionnalités supplémentaires. Nous allons l'appeler sobrement input-password.

Un composant doit être enregistré au sein de VueJS, avant son initialisation, pour être utiliser. Pour cela, il sufit d'utiliser la fonction component de VueJS tout en haut du fichier app.js.

Vue.component('input-password', {
    template: '<input type="password">'
});

Enregistrement du composant input-password dans notre application VueJS

Le premier paramètre est le nom du composant, le second est un objet d'options. La seule option définie ici est template. C'est le contenu HTML qui va être affiché lors de l'utilisation du composant.

Après quoi, nous allons utiliser le composant dans notre code HTML.

<div id="app">
    <input-password></input-password>
</div>

Utilisation du composant input-password dans la page HTML

La page affiche maintenant un champ password classique.

Template

Nous allons modifier le template HTML de notre composant pour mettre en place les différents éléments nécessaires. Il y aura :

  • Le champ password dans lequel l'utilisateur pourra saisir son mot de passe
  • Le champ text qui affichera le mot de passe en clair
  • Le bouton pour permettra de changer la visibilité du mot de passe

Par défaut, le champ password sera affiché et le champ text masqué. En maintenant le click sur le dernier bouton, on échangera la visibilité de ces champs.

Vue.component('input-password', {
    template: '<span>' +
        '<input type="password" name="password">' +
        '<input type="text">' + 
        '<button></button>' +
    '</span>'
}

Template du composant input-password

Tous les templates doivent nécessairement avoir une balise unique en racine, c'est pourquoi nous utilisons une span qui emglobe les champs et le bouton.

Propriétés

v-model

VueJS propose un événement qui permet de lier un champ à une variable. C'est à dire qu'à chaque modification du champ, la variable sera affectée de la même façon. Et inversement, à chaque modification de la variable, le champ sera affecté.

Pour cela, il suffit d'utiliser l'événement v-model sur le champ. Ici, les deux champs modifient la même variable : password.

Vue.component('input-password', {
    template: '<span>' +
        '<input type="password" v-model="password" name="password">' +
        '<input type="text" v-model="password">' + 
        '<button></button>' +
    '</span>'
}

Utilisation de v-model sur les champs

Data

Seulement, la variable password n'existe pas. Elle doit être déclarée au sein de l'objet composant, dans un nouvelle option nommée data.

Vue.component('input-password', {
    template: '<span>...</span>',
    data: function() {
        return {
            password: '',
            visible: false
        }
    }
}

Définition des variables utilisables dans l'objet composant

La propriété data permet de définir les variables dont nous aurons besoin dans notre template et son comportement. Dans notre cas, deux variables sont nécessaires :

  • password contiendra le texte que l'utilisateur aura saisi, vide par défaut
  • visible est un booléen permettant de définir si le mot de passe est visible

Vous noterez que data est une fonction qui retourne un objet. Ceci est une exigence de VueJS lorsque nous travaillons au sein d'un composant.

Dorénavant, lorsque vous éditez un des deux champs, le second se met automatiquement à jour. Votre saisie a entrainé la modification de la variable password qui a elle-même entrainé la modification du second champ.

Visibilité

Pour le moment, les deux champs sont visibles. Il est nécessaire de masquer le champ text et uniquement afficher le champ password. Pour cela, nous allons utiliser v-show.

v-show

v-show est une propriété qu'il est possible d'ajouter aux éléments HTML pour afficher ou non l'élement en fonction d'une variable.

<input type="password" v-show="visible == false">
<input type="text" v-show="visible == true">

Affiche ou masque les champs en fonction de la variable visible

La propriété prend en paramètre une règle simple qui retournera un booléen permettant de définir la visibilité de l'élement. Dès lors que la variable visible sera modifiée, les champs s'afficheront ou se masqueront en conséquence.

Il est possible de simplifier l'utilisation de v-show :

<input type="password" v-show="!visible">
<input type="text" v-show="visible">

Version compacte de la gestion de visibilité des champs

v-if

Pour information, il existe une autre propriété, nommée v-if, qui fonctionne exactement de la même façon. La différence réside dans le fait que v-if supprime l'élément du DOM alors que v-show le masque simplement.

Comportement

Vous l'avez compris, il ne nous reste plus qu'à modifier la variable visible. Pour ce faire, il va falloir détecter le click sur le bouton. Un premier click passe la variable visible à vrai, un second la repasse à faux.

Le bouton va donc se voir attacher l'événement click qui appellera une fonction.

<input type="password" v-show="!visible">
<input type="text" v-show="visible">
<button v-on:click="set_visible()"></button>

Appel de la fonction set_visible() au click sur le bouton

v-on

v-on est une propriété attachée à un élément HTML qui permet de lui lier un événement. Dans notre cas, c'est l'événement click. Lorsque cet événement est exécuté, la fonction set_visible() est appelée.

Par ailleurs, v-on peut être écrit par un raccourci @, plus lisible.

<button @click="set_visible()"></button>

Utilisation du @ pour remplacer v-on:

Methods

La fonction set_visible() n'existe pas, nous allons la créer. Elle doit être insérée dans une nouvelle propriété, methods, de l'objet composant.

Vue.component('input-password', {
    template: '<span>...</span>',
    data: function() {
        return {
            password: '',
            visible: false
        }
    },
    methods: {
        set_visible: function() {
            this.visible = !this.visible;
        }
    }
}

Définition de la méthode set_visible()

Comme vous le voyez, la méthode est définie dans l'objet methods. Elle permet simplement de modifier la variable visible accessible via this (qui fait référence à l'objet composant courant).

De ce fait, au click sur le bouton, les champs échangent leur visibilité.

Conclusion

L'utilisation de VueJS pour créer des composants est vraiment excellente. En très peu de lignes, il est possible de créer des interactions poussées et réutilisables.

Les possibilités sont vraiment énormes. Ici, nous n'avons pas parlé du système d'animations, de récursion des composants ou des événements personnalisés qui permettrait de créer des systèmes complexes réutilisables très facilement via une seule balise HTML.

Liens importants