VueJS est un Framework JavaScript qui va vite vous simplifier la vie. Dans cette introduction, nous allons voir comment intégrer VueJS dans un projet via le CDN, afin d'utiliser rapidement certaines fonctionnalités de Vue.
Intégrer VueJS
Je vous conseille "Le Guide officiel" qui est disponible ici fr.vuejs.org/v2/guide
Prenons une page index.html toute simple a laquelle nous souhaitons rajouter certains éléments dynamiques rapidement et le plus simplement possible :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>VueJS Intro</title>
</head>
<body>
<section>
<h1>Bienvenue</h1>
<h2>
Hello, VueJS !
</h2>
<p>
This is really
<span>cool, huh ?</span>
</p>
</section>
</body>
</html>
La première étape consiste à intégrer le CDN dans votre projet, entre les balises head :
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>VueJS Intro</title>
</head>
Voilà! VueJS est maintenant disponible dans le projet... enfin pas tout à fait. Il reste encore une étape importante : il faut créer une nouvelle instance de VueJS, et l'attacher à un élément du DOM afin de lui indiquer quel élément contrôler.
Rien de compliquer, il suffit de rajouter dans un premier temps une balise script à la fin de votre balise body, de créer une nouvelle instance et de préciser quel élément contrôler avec VueJS (dans notre exemple, il s'agit de l'élément avec l'ID app)
<script>
var app = new Vue({
el: '#app',
})
</script>
Nous pouvons maintenant utiliser VueJS comme outil de templating en ajoutant de la data dans notre instance et afficher celle-ci dans notre élément "#app" via la syntaxe double moustache {{ }}
<section>
<!-- Cette partie est controllée par VueJS -->
<div id="app">
<h1>
{{ title }}
</h1>
<p>This is really <span>{{ message }}</span> </p>
</div>
<!-- Cette partie n'est PAS controllée par VueJS -->
<footer>Ceci est un footer.</footer>
</section>
<script>
var app = new Vue({
el: '#app',
data: {
title: 'Hello, VueJS!',
message: 'cool, huh ?'
}
})
</script>
Il est tout à fait possible de créer plusieurs instances afin de contrôler différents éléments d'un projet.
<section>
<!-- Cette partie est controllée par VueJS -->
<div id="app">
<h1>
{{ title }}
</h1>
<p>This is really <span>{{ message }}</span> </p>
</div>
<!-- Cette partie est controllée par la deuxième instance de VueJS -->
<footer id="footer">{{ title }}</footer>
</section>
<script>
var app = new Vue({
el: '#app',
data: {
title: 'Hello, VueJS!',
message: 'cool, huh ?'
}
})
var footer = new Vue({
el: '#footer',
data: {
title: 'ci-gît le footer!',
}
})
</script>
Directives VueJS
Nous allons clôturer cette introduction avec une présentation rapide des Directives. Les directives sont des attributs HTML que vous pouvez rajouter à vos éléments. Il s'agit d'attributs spécialement créés pour VueJS. Elles ont en commun de toutes démarrer par "v-" afin d'indiquer qu'il s'agit d'attributs VueJS.
Nous allons voir la Directive v-model qui permet de modifier la data via une balise input, select, textarea ou un composant. Pour utiliser la directive v-model, il suffit de préciser quelle data doit être modifiée. Dans notre cas, nous voulons attacher notre v-model à la data 'message' ( message: 'cool, huh ?' )
<input class="border border-blue-300 p-2" v-model="message" />
Comme toujours, le meilleur moyen d'apprendre est de pratiquer! Testez votre compréhension via un exercice simple que j'ai préparé pour vous: VueJS est DEJA intégré au projet. Votre objectif est de
- Créer une instance de VueJS,
- Ajouter le contenu de la balise 'p' dans la data,
- Afficher le contenu via la syntaxe double moustache
- Et si vous êtes motivés, intégrer l'attribut v-model dans l'input afin de modifier le message.
Alors, prêt ?