Français

Tutoriel VueJS

Tutoriel VueJS : Premiers pas avec Vue.js

Bonjour, 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 l'informatique 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, mettons-nous à l'œuvre et créons ensemble un peu de magie !

VueJS - Home

Qu'est-ce que Vue.js ?

Vue.js est un framework JavaScript progressif pour construire des interfaces utilisateur. Mais que cela signifie-t-il en langage simple ? Eh bien, imaginez que vous construisez une maison. Vue.js est comme un ensemble de murs et de chambres préfabriqués que vous pouvez assembler facilement pour créer votre maison de rêve. Il rend la construction d'applications web complexes aussi simple que l'assemblage de briques LEGO !

Pourquoi Vue.js ?

  1. Facile à apprendre
  2. Flexible et évolutif
  3. Excellent performances
  4. Superbe support communautaire

Prérequis

Avant de commencer, assurons-nous que nous avons tout ce dont nous avons besoin :

  • Compréhension de base de HTML et CSS
  • Familiarité avec JavaScript (ne vous inquiétez pas si vous n'êtes pas un expert !)
  • Un navigateur web moderne (je recommande Chrome ou Firefox)
  • Un éditeur de texte (VS Code est mon favori personnel)

Créer Votre Premier Projet Vue.js

Commençons par créer une application simple "Hello, Vue !". Premièrement, nous devons inclure Vue.js dans notre projet. Nous pouvons le faire en ajoutant une balise script à notre fichier HTML.

<!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>
new Vue({
el: '#app',
data: {
message: 'Hello, Vue !'
}
})
</script>
</body>
</html>

Reprenons cela :

  1. Nous incluons la bibliothèque Vue.js en utilisant un lien CDN.
  2. Nous créons un <div> avec un id de "app". C'est là que notre application Vue va vivre.
  3. À l'intérieur du div, nous utilisons {{ message }}. C'est ce qu'on appelle l'interpolation, et c'est ainsi que nous affichons les données dans Vue.
  4. Dans notre balise <script>, nous créons une nouvelle instance Vue, en lui disant de cibler l'élément avec l'id "app".
  5. Nous définissons un objet data avec une propriété message. Ce sont les données que Vue utilisera dans notre application.

Si vous enregistrez ce fichier et l'ouvrez dans un navigateur, vous devriez voir "Hello, Vue !" affiché sur la page. Félicitations ! Vous venez de créer votre première application Vue.js !

Directives Vue : Rendre les Choses Interactives

Maintenant que nous avons les bases, rendons notre application un peu plus interactive. Vue nous offre des directives - des attributs spéciaux qui donnent des instructions à Vue sur comment se comporter. Jetons un coup d'œil à quelques-unes des plus courantes :

v-model : Liaison de Données à Double Sens

v-model crée une liaison à double sens entre les entrées de formulaire et l'état de l'application. Mettons à jour notre application pour inclure un champ d'entrée :

<div id="app">
<input v-model="message">
<p>Le message est : {{ message }}</p>
</div>

<script>
new Vue({
el: '#app',
data: {
message: 'Hello, Vue !'
}
})
</script>

Maintenant, lorsque vous tapez dans le champ d'entrée, vous verrez le message se mettre à jour en temps réel. C'est magique, non ?

v-if et v-else : Rendu Conditionnel

Parfois, nous voulons afficher ou masquer des éléments en fonction d'une condition. C'est là que v-if et v-else deviennent pratiques :

<div id="app">
<button @click="toggleVisibility">Basculer le Message</button>
<p v-if="isVisible">Maintenant tu me vois !</p>
<p v-else>Maintenant tu ne me vois pas !</p>
</div>

<script>
new Vue({
el: '#app',
data: {
isVisible: true
},
methods: {
toggleVisibility() {
this.isVisible = !this.isVisible
}
}
})
</script>

Dans cet exemple, nous utilisons v-if et v-else pour basculer entre deux messages. La directive @click est un raccourci pour v-on:click, qui écoute les événements de clic.

v-for : Rendu de Liste

Lorsque nous avons besoin d'afficher une liste d'items, v-for est notre directive de choix :

<div id="app">
<ul>
<li v-for="fruit in fruits">{{ fruit }}</li>
</ul>
</div>

<script>
new Vue({
el: '#app',
data: {
fruits: ['Pomme', 'Banane', 'Cerise', 'Durian']
}
})
</script>

Cela rendra une liste de fruits. C'est aussi simple que cela !

Méthodes dans Vue

Les méthodes sont des fonctions que nous pouvons utiliser pour ajouter du comportement à nos instances Vue. Créons un compteur simple :

<div id="app">
<p>Compte : {{ count }}</p>
<button @click="increment">Incrémenter</button>
<button @click="decrement">Décrémenter</button>
</div>

<script>
new Vue({
el: '#app',
data: {
count: 0
},
methods: {
increment() {
this.count++
},
decrement() {
this.count--
}
}
})
</script>

Ici, nous avons défini deux méthodes : increment et decrement. Ces méthodes sont appelées lorsque les boutons respectifs sont cliqués, mettant à jour notre propriété count.

Propriétés Calculées : Calculs Intelligents

Les propriétés calculées sont comme des propriétés de données super-puissantes. Elles peuvent effectuer des calculs complexes et sont mises en cache en fonction de leurs dépendances. Jetons un exemple :

<div id="app">
<input v-model="firstName">
<input v-model="lastName">
<p>Nom Complet : {{ fullName }}</p>
</div>

<script>
new Vue({
el: '#app',
data: {
firstName: '',
lastName: ''
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName
}
}
})
</script>

Ici, fullName est une propriété calculée qui combine firstName et lastName. Elle se mettra automatiquement à jour whenever l'une de ses dépendances change.

Résumé des Méthodes Vue.js

Voici un tableau résumant les méthodes Vue.js que nous avons couvertes :

Méthode Description Exemple
data Contient les données pour l'instance Vue data: { message: 'Hello' }
methods Contient des fonctions pour ajouter du comportement methods: { greet() { alert('Hi!') } }
computed Propriétés mises en cache qui se mettent à jour lorsque les dépendances changent computed: { fullName() { return this.firstName + ' ' + this.lastName } }
el Spécifie l'élément sur lequel monter l'instance Vue el: '#app'

Conclusion

Félicitations ! Vous avez fait vos premiers pas dans le merveilleux monde de Vue.js. Nous avons couvert les bases de la création d'une instance Vue, l'utilisation de directives pour ajouter de l'interactivité, et l'ajout de comportement avec des méthodes et des propriétés calculées.

N'oubliez pas, apprendre à coder est comme apprendre une nouvelle langue - cela nécessite de la pratique et de la patience. Ne soyez pas découragé si tout ne vous vient pas d'emblée. Continuez à expérimenter, continuez à construire, et surtout, continuez à prendre du plaisir !

Dans notre prochaîne leçon, nous plongerons plus profondément dans les composants, les éléments constitutifs des grandes applications Vue.js. Jusque-là, bon codage !

Credits: Image by storyset

 
Tutoriel suivant:
VueJS - Aperçu