Prise en main de VueJS 3
Dans ce TP nous allons découvrir l'utilisation de VueJS sans bundler. Nous allons donc utiliser directement le CDN de VueJS.
Table des matières
Initialisation
Ajouter VueJS dans un projet est aussi simple que d'ajouter une librairie. Première étape, créer un fichier index.html
puis insérer à l'intérieur « une structure HTML 5 »
TIP
Si vous utilisez Visual Studio Code, vous pouvez faire html:5Tab une structure HTML sera automatiquement écrite.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Démo VueJS</title>
</head>
<body>
<!-- Votre code ici -->
</body>
</html>
Pour ajouter VueJS dans la page ? Il faut juste ajouter la balise script suivante dans le « head » de votre page :
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
Et voilà !
Ah ouais ? C'est aussi simple !?
Bon en vrai on va devoir ajouter quelques petits trucs… Si vous avez suivi pendant mon cours :
- Une balise « racine » qui contiendra notre template.
- Une balise script qui contiendra notre code JavaScript.
Ajout des éléments
Remplacer le commentaire <!-- Votre code ici -->
par
<div id="app">{{ message }}</div>
<script>
const { createApp } = Vue
createApp({
mounted() {
console.log('Ding ! 🍪 Votre code fonctionne !')
},
data() {
return {}
}
}).mount('#app')
</script>
🚀 Et voilà ! Là c'est vraiment tout. Votre code est prêt. Vous pouvez faire du VueJS 🍪.
Tester votre code
Votre code doit dès à présent fonctionner ! Vérifier dans la console de votre navigateur que vous avez la phrase :
Ding ! 🍪 Votre code fonctionne !
Un simple bouton
Nous allons ajouter un simple « button » dans notre page. Celui-ci affichera une alert
lorsque l'utilisateur clique dessus. Modifier votre objet VueJS pour qu'il ressemble à :
createApp({
mounted() {
console.log('Ding ! 🍪 Votre code fonctionne !')
},
data() {
return {}
},
methods: {
action() {
alert("🎉 Bravo 🎉");
},
},
}).mount('#app')
Vous venez de déclarer une nouvelle méthode, celle-ci se nomme action
, celle-ci affiche « Bravo ». Il faut donc maintenant l'appeler…
En VueJS, c'est simple ! Il vous suffit d'ajouter dans <div id="app"></div>
un bouton. Après modification votre code doit ressembler à :
<div id="app">
<button @click="action">Clique ici</button>
</div>
🤓 Notez le @click="action"
qui fait référence à votre méthode action
.
🚀 Tester votre code.
Modifier une variable depuis la vue
Nous allons maintenant modifier une variable depuis la vue. Pour cela nous allons :
- Déclarer une variable dans les
data
. - L'afficher dans le template.
- Modifier la variable depuis le template.
Les data
Vous vous souvenez comment déclarer les datas ? Non !? un petit rappel alors, nous allons déclarer une variable directement dans la méthode data
de notre objet VueJS. Quelque chose comme :
data(){
return {
compteur: 0
}
}
🤓 Notez que la variable est nommée compteur
.
L'affichage
Nous allons maintenant afficher la variable dans le template. Pour cela il suffit d'ajouter {{ compteur }}
dans le template. Après modification votre code doit ressembler à :
<div id="app">
<button @click="action">Clique ici</button>
<p>{{ compteur }}</p>
</div>
🚀 Tester votre code.
La modification
Nous allons maintenant modifier la variable depuis le template. Pour cela il suffit d'ajouter @click="compteur++"
dans le template. Après modification votre code doit ressembler à :
<div id="app">
<button @click="action">Clique ici</button>
<p @click="compteur++">{{ compteur }}</p>
</div>
🚀 Tester votre code.
Afficher une liste
Un bouton c'est bien, mais une liste c'est mieux non ? Vous allez voir qu'afficher une liste c'est aussi simple qu'un bonjour 👋. Comme vu ensemble en cours, nous allons :
- Déclarez-les
data
. - Faire un
v-for
dans le code.
Les data
Vous vous souvenez comment déclarer les datas ? Non !? un petit rappel alors, nous allons déclarer un tableau ([]
) directement dans la méthode data
de notre objet VueJS. Quelque chose comme :
data(){
return {
liste: ["Item 1", "Item 2", "Item 3"]
}
}
🤓 Notez que la variable est nommée liste
.
Une fois intégré à votre code :
createApp({
mounted() {
console.log('Ding ! 🍪 Votre code fonctionne !')
},
data() {
return {
liste: ["Item 1", "Item 2", "Item 3"]
}
},
methods: {
action() {
alert("🎉 Bravo 🎉");
},
},
}).mount('#app')
🚀 Valider avec les Vue Dev Tools que votre liste est bien présente.
Afficher la liste
Pour afficher la liste nous allons devoir faire un v-for
sur l'élément qui sera répété
ou afficher plusieurs fois
. Exemple :
<ul>
<li v-for="item in liste">{{item}}</li>
</ul>
Ajouter le code HTML dans la div#data
, vous devez obtenir :
<div id="app">
<button @click="action">Clique ici</button>
<ul>
<li v-for="item in liste">{{item}}</li>
</ul>
</div>
🚀 Tester votre application ! Vous devez voir les éléments de votre liste.
🤓 Tester d'ajouter un élément « à la main » via les VueJS dev tools.
Ajouter un élément dans la liste
Le but de VueJS c'est aussi de rendre simple la modification de la vue / template / affichage. Nous allons (enfin vous…) modifier le code précédent pour ajouter dans la liste l'élément saisi par l'utilisateur :
Modifier la méthode action pour y mettre le code suivante :
this.liste.push(prompt("Entrer une valeur"));
🚀 Tester votre code
Et via un input ?
Un prompt c'est « pas très beau » non ? Passer par un input HTML serait quand même plus sympa ! Pour ça rien de plus simple, ajouter le code suivant dans #app
:
<input
type="text"
@keyup.enter="liste.push($refs['input'].value)"
ref="input"
/>
☝️ Quelques explications :
@keyup.enter
Permets de déclarer une méthode qui sera appelée lors de l'appui sur la touche entrée.ref
permet de déclarer une référence vers l'élément HTML, celui-ci sera ensuite disponible par$refs['input']
Et via un input version à privilegier ?
La première solution est pas trop mal, mais, utiliser les data est serait certainement une meilleure idée. Autre solution, mais tout aussi simple (et certainement bien meilleur).
- Déclarer une nouvelle variable dans les
data
, par exemple, dans mon cas la variable estsaisie
:
data(){
return {
saisie: "",
liste: ["Item", "Item 2"],
}
}
- Ajouter un input qui utiliser la variable saisie :
<input type="text" v-model="saisie" @keyup.enter="liste.push(saisie)" />
☝️ Quelques explications :
v-model
Permets de connecter la variable saisie à votre input.@keyup.enter
Permets de déclarer une méthode qui sera appelée lors de l'appui sur la touche entrée.
L'input n'est pas vidé ?
Comme vous l'avez très certainement remarqué, le champ n'est pas vidé après une saisie… Vous avez deux solutions pour faire ça:
- Modifier le code dans le
@keyup.enter
pour effacer la variablesaisie
. (Via la création d'une nouvelle méthode dans votre objet). - Autre solution via un watcher sur la variable
saisie
.
C'est à vous implémenté la première solution, puis la seconde.
Et si on voulait supprimer un élément ?
Pour supprimer un élément, il faut que vous ajoutiez un bouton dans votre liste. Pour ça, ajouter le code suivant dans votre v-for
:
<button @click="liste.splice(index, 1)">Supprimer</button>
Je vous laisse chercher comment l'implémenter dans votre code.
index ?
index
est une variable qui est automatiquement créée par VueJS, elle représente l'index de l'élément dans le tableau. Vous pouvez la spécifier lors de l'écriture de votre v-for
:
<li v-for="(item, index) in liste">{{item}}</li>
Conclusion
Vous avez maintenant les bases de VueJS, vous pouvez maintenant vous lancer dans la création de vos premières applications. VueJS permet de simplifier énormément la récupération de données via une API REST.
Je vous propose de continuer votre aventure avec le TP 2 : Disponible ici