Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- en:modul:m291:learningunits:lu06:theorie:02 [2025/04/28 08:56] – angelegt vdemir
+++ en:modul:m291:learningunits:lu06:theorie:02 [2025/04/28 09:11] (aktuell) – vdemir
@@ Zeile 6: / Zeile 6: @@
   - Be able to use simple Vue events.
+===== Source =====
+  * [[https://www.w3schools.com/vue/vue_v-on.php|W3School-Events - v-on]]
+  *
 ===== Introduction =====
-After discussing the principle of events in VUE in the last chapter, this chapter goes a little further. In other words, more exciting exercises. Have fun!!
+After discussing the principle of events in VUE in the last chapter, this chapter goes a little further. In other words, more exciting exercises, e.g.
+  * Mouseover,
+  * Mousemove,
+  * ...
+===== Example 1 =====
+  <div id="app">
+    <button v-on:click="count++">Clicked {{ count }} times</button>
+  </div>
+  <script>
+    new Vue({
+      el: '#app',
+      data: {
+        count: 0
+      }
+    })
+  </script>
-===== ...  =====
-===== Source =====
+===== Example 2 ====
-  * [[https://www.w3schools.com/vue/vue_v-on.php|W3School-Events - v-on]]
+  <div id="app">
+    <p v-on:mouseover="message = 'Mouse is over the text!'">{{ message }}</p>
+  </div>
+  <script>
+    new Vue({
+      el: '#app',
+      data: {
+        message: 'Hover over me!'
+      }
+    })
+  </script>
 ===== Vocabulary =====
 ^ English ^ German ^
-| ... | ... |
+| further | weiter |
 ----
 [[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir