Vue JS

logo VueJS

formation Grafikart

doc officielle, guide de démarrage (en français !)

Pour connaître la version utilisée,

npm list vue

… le fichier package.json ne contient pas la version exacte (^3.4.29 → et 3.5.8 via npm list vue !)

Pré-requis

Avoir node d'installé et npm, yarn ou autre
Avoir une bonne connaissance de JS, dont les fonctions fléchées, les map, filter, reduce

Installation

npm create vue@latest

qui va demander à installer le package create-vue si nécessaire, puis poser des questions à commencer par le nom du projet puis les dépendances (pour commencer, on répond non pour toutes)
une fois le projet créé, il nous invite à basculer dedans, lancer l'installation des dépendances et démarrer le serveur

cd nom-projet npm install # dans un onglet, exécuter npm run dev

Programmation

Les fichiers de base

À la racine du projet, on trouve le fichier index.html qui contient une div avec l'id app et l'appel du script JS src/main.js, et dans le répertoire source, on trouve les fichiers :

main.js qui crée une application App et réalise un montage dans la div #app

App.vue le fichier de base de notre application Vue

1ère modif

Lancer Codium/VSC ou votre éditeur de code préféré, puis ouvrez le fichier

<script setup></script> <template> <h1>You did it!</h1> <p> Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the documentation </p> </template> <style scoped></style>

On peut considérer que la partie <template> est le squelette et la partie <script> le _cerveau_

Commençons par remplacer le titre :

<script setup> import { ref } from 'vue' const mon_titre = ref('Mon Titre') </script> <template> <h1>{{ mon_titre }}</h1> <p> Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the documentation </p> </template> <style scoped></style>

L'essentiel est dans l'ajout pour la partie script de la définition de l'objet mon_titre qui est ensuite injecté dans le template en le mettant entre double-accolades.

1ère "bind"

L'exemple de base est d'ajouter à notre page un compteur : Commençons par ajouter les lignes suivantes : dans la section <script>

const count = ref(0)

et dans la section <template>

<p>Compteur : {{ count }}</p>

et pour pouvoir incrémenter notre compteur : dans la section <script>, on ajout la fonction increment

const increment = () => { count.value++ }

et dans la section <template>, on ajoute le bouton pour appeler cette fonction

<button v-on:click="increment">Incrémenter</button>
l'expression v-on:click peut-être remplacée par @click qui sera utilisé par la suite
Pour déboguer, on peut ajout event en paramètre de la fonction fléchée et dans la section <script> const increment = (event) => { console.log(event) count.value++ } <!-- et pour mieux comprendre : --> console.log(count, count.value) <!-- et comprendre que count est un objet, que dans la partie script, il faut count.value pour avoir sa valeur, mais dans la partie template, count est déconstruit et c'est bien sa valeur est utilisée -->

et maintenant, ajoutons un style qui mette en rouge le compteur si sa valeur est > 5 et en vert si >, dans la partie script :

<p :style="color: count > 5 ? 'red' : 'green'}">Compteur : {{ count }}</p>

Directives

doc officielle sur les directives