Image Principale

Découverte de Vue JS 3


Vue JS est une librairie Javascript qui vous permettra de manipuler beaucoup plus facilement des données en HTML. Dans cet article, j'aborderai le principe de composants réutilisables.

Contact Person Mathieu Marteau
il y a 2 ans

Cette article est la suite du premier épisode, et du second épisode concernant la découverte de Vue JS.

Dans cet article, je vais essayer de vous faire comprendre la puissance de Vue JS à travers l'utilisation de composants réutilisables. Ces composants réutilisables sont comme de nouvelles balises HTML que vous allez pouvoir créer vous-même!

Pour rappel, nous nous étions arrêté à ce résultat:

Nous allons maintenant créer notre propre composant qui va automatiquement transformer notre markdown en html. L'avantage est que vous pourrez utiliser ce composant sur n'importe quelle page de votre site! Pas besoin de recréer la roue à chaque fois.

L'objectif de cet article est d'arriver à un tel HTML:

<div id="container">
    <render-markdown :markdown="message"></render-markdown>
    <textarea rows="30" cols="50" v-model="message"></textarea>
</div>

Comme vous le voyez, on a créé notre balise <render-markdown></render-markdown> qui prend un paramètre: du markdown.

Commençons par voir la syntaxe de création d'un tel composant:

var renderMarkdown = Vue.extend({
    // Déclaration du composant
});

Ce code permet de déclarer un nouveau composant, et de le stocker dans une variable renderMarkdown. Ce composant va ensuite se comporter exactement comme une instance de Vue, et nous allons pouvoir y ajouter toutes les caractéristiques que nous avons déjà vues.

Pour que ce composant puisse fonctionner, nous avons besoin de le déclarer également dans notre instance, pour que celle-ci sache que nous voulons l'utiliser:

new Vue({
    el: '#container',
    data: {
        message: '#This is a title'
    },
    components: {
        'render-markdown': renderMarkdown
    }
});

Remplissons donc ce composant! La première étape est de déclarer notre propriété markdown qui recevra le markdown à transformer:

var renderMarkdown = Vue.extend({
    props: ['markdown']
});

En déclarant une propriété dans l'array props, celle-ci sera accessible comme si c'était une donnée normale. Ainsi, dans votre composant, vous pourrez y accéder en tapant this.markdown. C'est aussi simple que ça!

Comme tout à l'heure, nous voulons que ce markdown soit transformé en HTML grâce à une computed property. Nous n'avons alors plus qu'à rajouter cela dans notre composant:

var renderMarkdown = Vue.extend({
    props: ['markdown'],
    computed: {
        convertedMessage: function() {
            var text = markdown.toHTML(this.markdown);
            return text;
        }
    }
});

Maintenant que l'on a définit tout ça, il ne nous reste plus qu'à définir ce à quoi notre composant va ressembler, sa structure HTML personnelle.

Pour cela, il faut créer un template dans notre code HTML, c'est très simple:

<template id="renderMarkdownTemplate">
  <div>{{{ convertedMessage }}}</div>
</template>

On n'a juste à utiliser le tag <template></template> et lui donner un id que nous allons ensuite utiliser dans notre composant pour lui dire d'utiliser ce template:

var renderMarkdown = Vue.extend({
    template: '#renderMarkdownTemplate',
    props: ['markdown'],
    computed: {
        convertedMessage: function() {
            var text = markdown.toHTML(this.markdown);
            return text;
        }
    }
});

Il me reste une dernière chose à vous expliquer plus précisément: l'utilisation de notre propriété markdown.

Au point où nous en sommes, nous pouvons utiliser notre composant comme suit:

<render-markdown markdown="- ma liste"></render-markdown>

Comme vous le voyez sûrement, notre composant rend le HTML pour le markdown - ma liste. Cependant, nous ne voulons pas passer du HTML pure à notre composant, mais une variable de notre instance! Pour cela, il suffit d'ajouter : devant le nom de notre propriété. Ainsi, le composant saura que l'on utilise une variable et non du texte. Cette variable est "réactive", c'est à dire que la propriété à l'intérieur du composant changera également quand la variable de l'instance changera. Vous commencez à comprendre à quel point c'est utile?

Ainsi nous écrirons notre code HTML comme suit:

<render-markdown :markdown="message"></render-markdown>

Et voici le résultat final: