====== Vue JS ======

{{ :informatique:2java:vuejs-favicon.ico|logo VueJS}}

  * [[https://grafikart.fr/formations/vuejs|formation Grafikart]]
  * [[https://fr.vuejs.org/guide/quick-start.html|doc officielle, guide de démarrage]] (en français !)

Pour connaître la version utilisée, <code bash>npm list vue</code>… 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 [[:informatique:js#les_fonctions_flechees_arrow_function|fonctions fléchées]], les [[https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Map|map]], [[https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/filter|filter]], [[https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce|reduce]]

===== Installation =====
<code bash>npm create vue@latest</code>
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
<code bash>
cd nom-projet
npm install
# dans un onglet, exécuter 
npm run dev
</code>

===== 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 
<file html App.vue>
<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>
</file>
On peut considérer que la partie **<template>** est le squelette et la partie **<script>** le _cerveau_

Commençons par remplacer le titre :
<file html App.vue>
<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>
</file>
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>//
<code javascript>
const count = ref(0)
</code>

et dans la section //<template>//
<code html>
<p>Compteur : {{ count }}</p>
</code>
et pour pouvoir incrémenter notre compteur :
dans la section //<script>//, on ajout la fonction //increment//
<code javascript>
const increment = () => {
  count.value++
}
</code>

et dans la section //<template>//, on ajoute le bouton pour appeler cette fonction
<code html>
<button v-on:click="increment">Incrémenter</button>
</code>
<note tip>l'expression **v-on:click** peut-être remplacée par **@click** qui sera utilisé par la suite</note>
<note tip>Pour déboguer, on peut ajout //event// en paramètre de la fonction fléchée et 
dans la section //<script>//
<code javascript>
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 -->
</code>
</note>

et maintenant, ajoutons un style qui mette en rouge le compteur si sa valeur est > 5 et en vert si >, dans la partie //template// :
<code html>
<p :style="{color: count > 5 ? 'red' : 'green'}">Compteur : {{ count }}</p>
</code>
<note>le **:** devant //style// est équivalent à **v-bind:**
On peut aussi définir un attribut variable à partir de count : <code javascript>:id="`p-${count}`"</code></note>

==== 1ère boucle ====
Un des intérêts d'utiliser un framework JS est évidement que ça s'adapte automatiquement à un contenu variable comme une liste de valeurs.\\
On ajout, dans la partie //script// :
<code javascript>
const movies = ref([
  'Les tontons flingueurs',
  'Le grand bleu',
  'Le chant des forêt'
])
</code>
et dans le //template// :
<code html>
<ul>
  <li v-for="movie in movies"
      :key="movie">
    {{ movie }}
  </li>
</ul>
</code>
<note important>La ligne **:key="movie"** n'est dans l'absolue pas indispensable, mais si on l'omet, Vue, lors du trie, va redéfinir les lignes au lieu de simplement les ré-organiser</note>

ajoutons un petit formulaire pour ajouter un film :\\ 
dans le template 
<code html>
<form action="" @submit.prevent="addMovie">
  <input type="text" placeholder="nouveau titre de film"
    v-model="movieName">
  <button>Ajouter</button>
</form>
</code>
dans le //script//
<code javascript>
const movieName = ref('')
const addMovie = () => {
  movies.value.push(movieName.value)
  movieName.value = '' // On vide après la soumission
}
</code>
===== Directives =====
[[https://vuejs.org/api/built-in-directives.html|doc officielle sur les directives]]