Différences

Ci-dessous, les différences entre deux révisions de la page.

--- informatique:vuejs [2026/01/07 15:15] – bertrand
+++ informatique:vuejs [2026/02/27 14:41] (Version actuelle) – ancienne révision (2026/01/07 17:23) restaurée bertrand
@@ Ligne 4: / Ligne 4: @@
   * [[https://grafikart.fr/formations/vuejs|formation Grafikart]]
-  * [[https://fr.vuejs.org/guide/quick-start.html|doc officielle, guide de démarrage]] (disponible en français, cf. bouton en haut à droite, à droite de //Partners//)
+  * [[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 !)
@@ Ligne 22: / Ligne 22: @@
 </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
@@ Ligne 60: / Ligne 65: @@
 ==== 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]]