Event Handling and Modifiers'
Vue.js provides a rich set of tools to handle events and streamline user interactions in web applications. By combining event handling, modifiers, and directives, Vue allows developers to create highly responsive and interactive user interfaces.
Event Handling in Vue.js
Event handling is a fundamental part of creating dynamic applications. Vue uses the v-on directive (or its shorthand @) to listen for DOM events.
Example: Updating a Name
Here’s a simple example of how to use the v-on directive to update a name:
<button v-on:click="updateName" type="button">Click me</button>
The updateName function modifies the name reactive variable:
const name = ref('Tomas');

function updateName() {
  name.value = 'Steve';
}
Passing Arguments to Event Handlers
Sometimes, you may want to pass custom arguments to event handlers. However, when you do so, Vue removes the direct access to the default event object. To include it, you must pass it explicitly as a second argument.
Example: Passing a Name and Event
<button v-on:click="updateName('Steve', $event)" type="button">Click me</button>
In the handler:
const name = ref('Tomas');

function updateName(newName, event) {
  console.log(event); // Logs the event object
  name.value = newName;
}
Using Event Modifiers
Vue offers event modifiers to simplify handling common event behaviors. Modifiers are appended to event listeners using a dot (.). They prevent default actions, stop propagation, and more.
Example: Right-Click Event Modifier
Vue allows you to handle specific mouse events like right-click using .right:
<button v-on:click.right="updateName('Pepa', $event)" type="button">Click me</button>
Now, the updateName function only triggers on a right-click.
Preventing Default Behavior
Forms in web applications often submit data and reload the page by default. With Vue, you can prevent this behavior using the .prevent modifier.
Classic JavaScript Method
function handleForm(event) {
  event.preventDefault();
  console.log('Form submitted');
}
Using .prevent Modifier
Vue simplifies this process. Instead of manually calling event.preventDefault(), use .prevent:
<form v-on:submit.prevent="handleForm">
  <input type="text">
  <button>Submit</button>
</form>
This ensures that the page doesn’t reload on form submission, while the handleForm function handles the form data.
Comprehensive Example
Here’s a complete example combining the concepts discussed:
<!DOCTYPE html>
<html>
<head>
  <title>Vue.js Tutorial</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <style>
      .box {
          background: red;
          width: 200px;
          height: 200px;
      }
  </style>
</head>
<body>
<div id="app">
  <h1>{{ name }}</h1>
  <button v-on:click.right="updateName('Pepa', $event)" type="button">Click me</button>
  <hr>
  <form v-on:submit.prevent="handleForm">
      <input type="text">
      <button>Submit</button>
  </form>
</div>
<script>
  const { createApp, ref } = Vue;

  createApp({
      setup() {
          const name = ref('Tomas');

          function updateName(newName, event) {
              console.log(event);
              name.value = newName;
          }

          function handleForm() {
              console.log('Form submitted');
          }

          return { name, updateName, handleForm };
      },
  }).mount("#app");
</script>
</body>
</html>
Looping: From Basic Arrays to Complex Collections