Image Principale

Découverte de Vue JS 1


Vue JS est une librairie Javascript qui vous permettra de manipuler beaucoup plus facilement des données en HTML. Nous découvririons les bases de cette libraire dans cet article

Contact Person Mathieu Marteau
il y a 3 ans

Vue JS est une librairie Javascript qui va vous permettre de lier des données de votre HTML à des variables javascript que vous pourrez manipuler très facilement.

Pour cet article, nous construirons un petit traducteur de markdown en HTML en temps réel.

I Ajout de Vue JS à un fichier HTML

Avant tout, nous allons nous créer une petite arborescence pour notre projet, je vous propose la suivante:

├── css
│   └── app.css
│ 
├── js
│   └── app.js
│ 
└── index.html

Commençons donc par une structure simple pour notre HTML qui va inclure la bibliothèque Vue JS via un CDN:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Projet Markdown</title>
    <link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.7/vue.min.js"></script>
    <script src="js/app.js"></script>
</body>
</html>

II Principe de base de VueJS

Le but de Vue JS est de lier des données au sein de votre page HTML. Commençons tout de suite pour que vous puissiez tous comprendre. Créons un petit input de type text, contenu dans une <div id="container"></div> :

<!-- index.html --> 
<div id="container">
    <input type="text">
</div>

Puis nous allons ajouter un peu de JS et commencer à parler à VueJS. Tout d'abord, nous allons créer une nouvelle Vue:

// js/app.js
new Vue({
    el: '#container'
});

Comme vous le voyez, on va lier cette Vue à notre #container. Toutes les variables que nous allons utiliser travaillerons dans cette partie du HTML. Commençons d'ailleurs à ajouter un peu de données à notre input. On va lui assigner une variable message liée à notre formulaire:

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

Et enfin, on va afficher notre variable message quelque part dans notre code:

<!-- index.html --> 
<div id="container">
    <p>{{ message }}</p>
    <input v-model="message">
</div>

Voici le résultat: