VueJS - Introduction

Bonjour là-bas, futurs développeurs web ! Je suis ravi de vous guider sur ce voyage passionnant dans le monde de Vue.js. En tant que quelqu'un qui enseigne la programmation depuis plus d'une décennie, je peux vous dire que Vue.js est l'un des frameworks les plus accessibles pour les débutants. Alors, plongons dedans et découvrons pourquoi Vue.js est devenu le favori des développeurs du monde entier !

Qu'est-ce que Vue.js ?

Vue.js est un framework JavaScript progressif utilisé pour construire des interfaces utilisateur. Je sais que cela peut sembler un peu intimidant, mais pensez-y comme une boîte à outils remplie d'accessoires pratiques qui rendent la création de sites web interactifs un jeu d'enfant.

Lorsque j'ai découvert Vue.js pour la première fois, cela m'a rappelé l'assemblage de blocs LEGO. Vous commencez avec de petites pièces manageable et construisez progressivement quelque chose d'incroyable. Voilà la beauté de Vue.js - il est abordable, polyvalent et puissant.

Pourquoi choisir Vue.js ?

Facile à apprendre : Si JavaScript était une langue, Vue.js serait son dialecte convivial, facile à saisir.
Flexible : Il s'adapte à vos besoins, que vous construisiez un simple widget ou une application complexe.
Performance : Il est léger et rapide, comme une voiture de sport mais pour le développement web.
Communauté supportive : Il y a toujours quelqu'un prêt à vous aider lorsque vous êtes bloqué.

Maintenant, mettons les mains dans le cambouis avec un peu de code !

Votre Première Application Vue.js

Exemple

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon Premier App Vue</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: 'Bonjour, Vue !'
}
})
</script>
</body>
</html>

Output

Lorsque vous ouvrez ce fichier HTML dans votre navigateur, vous verrez :

Bonjour, Vue !

Détails de la Console

Si vous ouvrez la console de votre navigateur, vous ne verrez pas d'erreurs. C'est un bon début !

Décomposition du Code

Decortiquons ce code comme si nous étions dans une classe d'anatomie fun et geeks :

Structure HTML : Nous avons un document HTML basique. Rien deAlarmant ici !
Script Vue.js :
```
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
```
Cette ligne est comme inviter Vue.js à notre fête. Elle charge la bibliothèque Vue.js à partir d'un réseau de diffusion de contenu (CDN).
Le Conteneur de l'App :
```
<div id="app">
{{ message }}
</div>
```
Ce <div> est où notre application Vue va vivre. Les accolades doubles {{ }} sont la manière de Vue de dire, "Eh, je vais mettre du contenu dynamique ici !"
Instance Vue :
```
var app = new Vue({
el: '#app',
data: {
message: 'Bonjour, Vue !'
}
})
```
C'est là que la magie opère ! Décomposons-le un peu plus :

new Vue({...}) crée une nouvelle instance Vue.
el: '#app' dit à Vue de se connecter à l'élément DOM avec l'ID 'app'.
data: { message: 'Bonjour, Vue !' } est comme donner à Vue un sac à dos de données à transporter.

Rendre Interactive

Maintenant, rendons notre application un peu plus sympa. Nous allons faire en sorte qu'elle réponde à l'entrée utilisateur :

Exemple

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Application Vue Interactive</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input v-model="message">
<p>Le message est : {{ message }}</p>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: 'Bonjour, Vue !'
}
})
</script>
</body>
</html>

Output

Vous verrez un champ de saisie avec "Bonjour, Vue !" pré-rempli, et en dessous :

Le message est : Bonjour, Vue !

Lorsque vous tapez dans le champ de saisie, le message en dessous se mettra à jour en temps réel !

Détails de la Console

Encore une fois, votre console devrait être exempte d'erreurs. Si vous tapez app.message dans la console, vous verrez la valeur actuelle du message.

Qu'est-ce qui se passe ici ?

v-model : Cette directive crée un lien de données bidirectionnel sur les champs de formulaire. C'est comme une corde magique reliant le champ de saisie et notre données message.
Mises à jour en temps réel : Vue met automatiquement à jour le DOM lorsque les données changent. Pas besoin de manipulation manuelle du DOM !

Méthodes dans Vue

Ajoutons un peu de comportement à notre application :

Exemple

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue avec des Méthodes</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Inverser le message</button>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: 'Bonjour, Vue !'
},
methods: {
reverseMessage: function() {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>

Output

Vous verrez :

Bonjour, Vue !
[Inverser le message]

En cliquant sur le bouton, le message s'inversera !

Détails de la Console

Essayez de taper app.reverseMessage() dans la console. Il inversera le message tout comme en cliquant sur le bouton !

Comprendre les Méthodes

Objet methods : C'est là que nous définissons des fonctions qui ajoutent du comportement à notre application.
v-on:click : Cette directive attache un écouteur d'événement au bouton. Lorsqu'il est cliqué, il appelle notre méthode reverseMessage.
this.message : À l'intérieur d'une méthode Vue, this se réfère à l'instance Vue, nous permettant d'accéder et de modifier nos données.

Vue's Reactivity in Action

Ce que nous venons de voir est le système de réactivité de Vue à l'œuvre. Lorsque les données changent, Vue met automatiquement à jour le DOM. C'est comme avoir un assistant diligent qui met à jour votre tableau blanc dès que vous changez vos notes.

Conclusion

Félicitations ! Vous avez appena fait vos premiers pas dans le merveilleux monde de Vue.js. Nous avons couvert les bases de la création d'une instance Vue, du travail avec des données et de l'ajout d'interactivité avec des méthodes.

Souvenez-vous, apprendre à coder, c'est comme apprendre à cuisiner. Vous commencez avec des recettes simples (comme nos exemples), et avant de vous en rendre compte, vous créez des applications complexes et délicieuses qui éblouissent tout le monde !

Dans notre prochaine leçon, nous explorerons d'autres fonctionnalités de Vue comme les propriétés calculées et les hooks de cycle de vie. Jusque-là, continuez à expérimenter avec ce que vous avez appris. Essayez de changer les messages, d'ajouter plus de propriétés de données ou de créer de nouvelles méthodes. Plus vous jouerez, plus vous apprendrez !

Bonne programmation, futurs maîtres de Vue ! ??‍??‍?

Credits: Image by storyset

Tutoriel précédent:

VueJS - Configuration de l'environnement

Tutoriel suivant:

VueJS - Instances