en:modul:m291:learningunits:lu06:theorie:01

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung		 Vorhergehende Überarbeitung
en:modul:m291:learningunits:lu06:theorie:01 [2025/04/10 09:52] – [Example 1] vdemiren:modul:m291:learningunits:lu06:theorie:01 [2025/04/25 10:17] (aktuell) – vdemir
Zeile 1: Zeile 1:
-====== LU05a - VUE Events ======+====== LU06a - Events ======
  
 ===== Learning ojectives ===== ===== Learning ojectives =====
-  - I can explain what //events// basically are.  +  - Be able to explain the objectives of event handling and give examples. 
-  - I can name at least three events-types +  - Be able to name actions that can follow events. 
-  - I can apply events within the VUE framework+  - Be able to use simple Vue events.
  
  
 ===== Introduction ===== ===== Introduction =====
-Events are actions or occurrences that happen in the browser—like a user  +After discussing the topic of //vue directives// in the last few weeks, the next chapter in the semester is **event-handling** in vue. Events are actions, that trigger further actions in the browser. For example, we press a button (event), which then performs a calculation.
-  * 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.+Or with other words **event handling** is a key concept in programming that allows applications to respond to user actions like clicks, key presses, or mouse movements. It works by detecting specific events and triggering corresponding functions, known as event handlers. This mechanism is essential for creating interactive and dynamic user interfaces in web and software development.
  
-When an event is triggered, Vue runs the method you specify. This makes your components interactive and dynamic.+===== Examples for events ===== 
 +  * Forms: Open, display, input, change, delete, close 
 +  * Form input fields: when changed, when touched with mouse pointer, when clicked, when double-clicked, when UP or DOWN key pressed 
 +  * Command buttons: when approaching, clicking, double-clicking
  
 ===== Source ===== ===== Source =====
-  * [[https://www.w3schools.com/vue/vue_events.php| W3School-Events]] +  * [[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> +
- +
- +
  
 ===== Vocabulary ===== ===== Vocabulary =====
  • en/modul/m291/learningunits/lu06/theorie/01.1744271550.txt.gz
  • Zuletzt geändert: 2025/04/10 09:52
  • von vdemir