Image Principale

Découverte de Vue JS 2


Vue JS est une librairie Javascript qui vous permettra de manipuler beaucoup plus facilement des données en HTML. Cet article traite particulièrement des données calculées, computed data en anglais.

Contact Person Mathieu Marteau
il y a 3 ans

Nous allons continuer le petit projet que nous avions commencé précédemment, c'est à dire créer un éditeur de texte qui traduit automatiquement du markdown en contenu HTML.

Et pour cela, nous allons découvrir les données calculées (computed data), des données dynamiques, auxquelles on peut appliquer des transformations et qui sont synchronisées avec notre HTML.

Reprenons le code que nous avions précédemment:

<div id="container">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
new Vue({
    el: '#container',
    data: {
        message: 'Hello Vue.js!'
    }
});

Nous allons maintenant déclarer une donnée calculée:

new Vue({
    el: '#container',
    data: {
        message: 'Hello Vue.js!'
    },
    computed:{
        convertedMessage: function(){
            var retour = this.message + ' et une modification'
            return retour;
        }
    }
});

Comme vous le voyez, convertedMessage prend la valeur d'une fonction, et cette fonction retourne une chaine de caractère contenant le message, ainsi que 'et une modification'.

Comme vous pouvez peut-être le deviner, nous allons donc nous servir de données calculées pour transformer notre markdown en html.

Et pour cela, nous allons utiliser une libraire, markdown-js qui va nous permettre de transformer facilement le texte d'une textarea en markdown. Pour ajouter cette librairie à notre projet, il suffit d'ajouter cela, juste après la déclaration de Vue JS dans votre HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown.js/0.5.0/markdown.min.js"></script>

Nous allons ensuite, transformer l'input que nous avions avant par un textarea, et nous allons entourer notre donnée calculée par 3 accolades, parce que notre donnée calculée va comprendre du HTML pur. Si nous avions laissé 2 accolades, on aurait pu voir sur notre écran <h1>Mon titre</h1.

<div id="container">
    {{{ convertedMessage }}}
    <textarea rows="30" cols="50" v-model="message">

    </textarea>
</div>

Et nous allons ajouter une ligne dans notre javascript pour transformer notre markdown en html:

new Vue({
    el: '#container',
    data: {
        message: 'Hello Vue.js!'
    },
    computed:{
        convertedMessage: function(){
            var html = markdown.toHTML(this.message);
            return html;
        }
    }
});

Et voilà, on peut déjà avoir un résultat sympa, tout ce qu'on tape dans notre textarea est automatiquement converti en HTML et affiché sur notre page.