Différences

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

--- informatique:vuejs [2026/01/07 15:59] – [1ère "bind"] bertrand
+++ informatique:vuejs [2026/02/27 14:41] (Version actuelle) – ancienne révision (2026/01/07 17:23) restaurée bertrand
@@ Ligne 86: / Ligne 86: @@
 et dans la section //<template>//, on ajoute le bouton pour appeler cette fonction
 <code html>
-<button v-on:click="increment">Incrément</button>
+<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]]