VueJS - Instances

Salut à toi, aspirant·e développeur·euse web ! Aujourd'hui, nous allons plonger dans le merveilleux monde des instances Vue.js. Ne t'inquiète pas si tu es nouveau·elle en programmation – je vais te guider pas à pas, comme j'ai fait pour des centaines d'étudiant·e·s au fil des ans. Alors, prends une tasse de café (ou de thé, si c'est ton truc), et c'est parti !

VueJS - Instances

Qu'est-ce qu'une instance Vue ?

Avant de sauter dans le code, comprendre ce qu'est une instance Vue. Imagine que tu construis une maison. L'instance Vue est comme le fondation de cette maison – c'est là que tout commence. C'est le cœur qui contrôle toute ton application Vue.

Syntaxe

Créer une instance Vue est plutôt simple. Voici la syntaxe de base :

new Vue({
// options
})

C'est tout simple ! On utilise le mot-clé new suivi de Vue(), et à l'intérieur des parenthèses, on passe un objet avec diverses options. Ces options sont comme les plans de notre maison – elles disent à Vue comment nous voulons que notre application se comporte.

Ta première instance Vue

Créons notre première instance Vue ensemble. Ne t'inquiète pas si tu ne comprends pas tout de suite – on va tout décomposer morceau par morceau.

Exemple 1

<!DOCTYPE html>
<html>
<head>
<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

Bonjour, Vue !

Voici un décryptage :

Nous incluons la bibliothèque Vue.js dans notre fichier HTML.
Nous créons un <div> avec un id de "app". C'est là que notre application Vue va vivre.
À l'intérieur du <div>, nous utilisons {{ message }}. C'est ce qu'on appelle l'interpolation – c'est comment nous affichons les données dans Vue.
Dans notre balise <script>, nous créons une nouvelle instance Vue.
Nous utilisons el: '#app' pour dire à Vue quel élément il doit contrôler (notre div avec l'id "app").
Dans l'objet data, nous définissons une propriété message avec la valeur 'Bonjour, Vue !'.

Quand Vue voit {{ message }} dans notre HTML, il le remplace par la valeur de message de notre données. De la magie, n'est-ce pas ?

Données et Méthodes

Les instances Vue peuvent avoir plus que juste des données. Elles peuvent aussi avoir des méthodes – des fonctions qui peuvent effectuer des actions ou des calculs.

Exemple 2

<!DOCTYPE html>
<html>
<head>
<title>Exemple de Méthodes Vue</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

Au départ, vous verrez "Bonjour, Vue !" et un bouton. Lorsque vous cliquez sur le bouton, le message s'inversera en "!euV ,olleH".

Dans cet exemple :

Nous avons ajouté un bouton avec v-on:click="reverseMessage". Cela dit à Vue d'appeler la méthode reverseMessage lorsque le bouton est cliqué.
Dans notre instance Vue, nous avons ajouté un objet methods avec une fonction reverseMessage.
La fonction divise le message en un tableau de caractères, l'inverse, et le rejoint en une chaîne.
Nous utilisons this.message pour accéder et modifier la propriété message des données.

Hooks de Cycle de Vie

Les instances Vue ont un cycle de vie – elles sont créées, montées dans le DOM, mises à jour, et finalement détruites. Vue fournit des hooks qui vous permettent d'exécuter du code à des étapes spécifiques de ce cycle.

Exemple

<!DOCTYPE html>
<html>
<head>
<title>Hooks de Cycle de Vie Vue</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: 'Bonjour, Vue !'
},
created: function() {
console.log('Instance Vue créée !')
},
mounted: function() {
console.log('Instance Vue montée dans le DOM !')
this.message = 'Bienvenue sur Vue !'
}
})
</script>
</body>
</html>

Output

Dans le navigateur, vous verrez "Bienvenue sur Vue !". Dans la console, vous verrez deux messages :

Instance Vue créée !
Instance Vue montée dans le DOM !

Voici ce qui se passe :

Le hook created s'exécute lorsque l'instance Vue est créée. Nous enregistrons un message dans la console.
Le hook mounted s'exécute lorsque l'instance Vue est montée dans le DOM. Nous enregistrons un autre message et changeons la propriété message des données.

Ces hooks sont incroyablement utiles pour exécuter du code à des points spécifiques du cycle de vie de votre application.

Propriétés et Méthodes des Instances Vue

Les instances Vue sont également livrées avec des propriétés et des méthodes intégrées. Jetons un coup d'œil à quelques-unes :

Exemple

<!DOCTYPE html>
<html>
<head>
<title>Propriétés et Méthodes des Instances Vue</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="updateMessage">Mettre à jour le message</button>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: 'Bonjour, Vue !'
},
methods: {
updateMessage: function() {
this.$data.message = 'Message mis à jour !'
console.log(this.$el)
this.$nextTick(function() {
console.log('DOM mis à jour !')
})
}
}
})

console.log(app.$data)
</script>
</body>
</html>

Dans cet exemple :

Nous utilisons this.$data pour accéder directement à l'objet des données.
Nous utilisons this.$el pour enregistrer l'élément racine de l'instance Vue.
Nous utilisons this.$nextTick pour exécuter une fonction après que le DOM a été mis à jour.
En dehors de l'instance Vue, nous pouvons accéder à ses propriétés en utilisant app.$data.

Voici un tableau de quelques propriétés et méthodes souvent utilisées :

Propriété/Méthode	Description
$data	L'objet des données que l'instance Vue observe
$el	L'élément que l'instance Vue gère
$watch	Surveiller une propriété de l'instance Vue pour des changements
$set	Définir une propriété sur un objet, déclenchant les mises à jour de la vue
$nextTick	Décaler l'exécution d'un callback après le cycle de mise à jour DOM suivant

Souviens-toi, ceux-ci ne sont que quelques exemples. Vue.js a bien plus de fonctionnalités et de capacités que nous explorerons dans les leçons à venir.

J'espère que cette introduction aux instances Vue t'a été utile ! souviens-toi, apprendre à coder, c'est comme apprendre une nouvelle langue – ça prend du temps et de la pratique. Ne te décourage pas si tu ne comprends pas tout de suite. Continue à expérimenter, à coder, et surtout, continue à t'amuser ! à la prochaine leçon !

Credits: Image by storyset