Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- en:modul:m291:learningunits:lu08:theorie:01 [2025/04/10 10:01] – vdemir
+++ en:modul:m291:learningunits:lu08:theorie:01 [2025/04/29 12:28] (aktuell) – gelöscht vdemir
@@ Zeile 1: / Zeile 1: @@
-====== LU08a - VUE Events ======
-===== Learning ojectives =====
-  - I can explain what //events// basically are.
-  - I can name at least three events-types
-  - I can apply events within the VUE framework
-===== Introduction =====
-Events are actions or occurrences that happen in the browser—like a user
-  * clicking a button,
-  * typing into a field, or
-  * moving the mouse.
-In Vue, events let you respond to these actions by running specific methods when they occur. You can listen for events using the v-on directive or its shorthand @. This is how Vue apps become interactive, reacting to user input and behavior in real time.
-In Vue.js, events are how we listen to user interactions and respond to them—things like clicks, keypresses, mouse movements, and more. Vue uses the v-on directive (or the shorthand @) to attach event listeners to HTML elements.
-When an event is triggered, Vue runs the method you specify. This makes your components interactive and dynamic.
-===== Source =====
-  * [[https://www.w3schools.com/vue/vue_events.php| W3School-Events]]
-===== Example 1 =====
-This example below shows how to use v-on:click to handle a button click.
-  * @click="sayHello" listens for a click event.
-  * When the button is clicked, the sayHello method is called and the message displayed on the screen.
-  <template>
-    <div>
-      <button @click="sayHello">Click Me, please!</button>
-    </div>
-  </template>
-  <script>
-    export default {
-      methods: {
-        sayHello() {
-          alert('Hello World, it's me VUE!');
-        }
-      }
-    }
-  </script>
-===== Example 2 =====
-Here's how you can capture input from a user and update data in real-time:
-  * @input="updateName" listens for input changes.
-  * The updateName method grabs the input value and updates the name data.
-  * The UI updates reactively with { { name } }.
-  <template>
-    <div>
-      <input @input="updateName" placeholder="Enter your name" />
-      <p>Hello, {{ name }}!</p>
-    </div>
-  </template>
-  <script>
-    export default {
-      data() {
-        return {
-          name: ''
-        };
-      },
-    methods: {
-      updateName(event) {
-        this.name = event.target.value;
-      }
-    }
-  }
-  </script>
-===== Vocabulary =====
-^ English ^ German ^
-| ... | ... |
-----
-[[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir