LU05a - VUE Events

1. I can explain what events basically are.
2. I can name at least three events-types
3. I can apply events within the VUE framework

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.

• W3School-Events

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>

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>

Volkan Demir