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

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"

Directives

doc officielle sur les directives