Différences

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

--- informatique:vuejs [2026/01/07 16:24] – [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 102: / Ligne 102: @@
 </note>
-et maintenant, ajoutons un style qui mette en rouge le compteur si sa valeur est > 5 et en vert si >, dans la partie //script// :
+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>
+<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]]