v-on | Vue Directives Tutorial

Vue Directives: `v-on`

The v-on directive in Vue.js is used to listen for DOM events and execute a method when those events occur. It's the primary way to handle user interaction and respond to browser events within your Vue components. It's often shortened to the @ symbol for brevity.

Basic Usage:

<template>
  <button @click="handleClick">Click Me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert('Button clicked!');
    }
  }
}
</script>

In this example, the handleClick method will be executed whenever the button is clicked. @click is shorthand for v-on:click.

Syntax:

v-on:event="methodName"
@event="methodName" (shorthand)

Where:

event: The DOM event to listen for (e.g., click, mouseover, keydown, submit).
methodName: The name of the method in your component that will be called when the event occurs.

Event Modifiers:

Vue provides event modifiers to further control how event handling works. These are added after the event name, separated by a dot (.).

.stop: Prevents event propagation (stops the event from bubbling up to parent elements).
```
<button @click.stop="handleClick">Click Me</button>
```
.prevent: Prevents the default browser behavior for the event (e.g., preventing a form from submitting).
```
<form @submit.prevent="handleSubmit">
  
</form>
```
.capture: Uses event capturing mode instead of bubbling mode. Capturing mode triggers the handler before any other event listeners on the element or its ancestors.
```
<div @click.capture="handleCapture">
  <button @click="handleBubble">Click Me</button>
</div>
```
.self: Only triggers the handler if the event was dispatched from the element itself, not from a child element.
```
<div @click.self="handleClick">
  <button @click="buttonClick">Click Me</button>
</div>
```
.once: The handler will be called only once for the event. After the first trigger, the listener is automatically removed.
```
<button @click.once="handleClick">Click Me</button>
```
.passive: Indicates that the event listener will not call preventDefault(). This can improve scrolling performance. Useful for scroll events.
```
<div @scroll.passive="handleScroll">Scrollable Content</div>
```
.native: Allows you to listen for native events on a component. This is useful when working with components that wrap native elements.
```
<my-component @click.native="handleClick"></my-component>
```

Multiple Methods:

You can call multiple methods on an event by passing an array of method names.

<template>
  <button @click="[method1, method2]">Click Me</button>
</template>

<script>
export default {
  methods: {
    method1() {
      console.log('Method 1 called');
    },
    method2() {
      console.log('Method 2 called');
    }
  }
}
</script>

Passing Arguments to Methods:

You can pass arguments to the method called by v-on using the $event object, which represents the event object itself.

<template>
  <button @click="handleClick($event)">Click Me</button>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      console.log('Button clicked at:', event.clientX, event.clientY);
    }
  }
}
</script>

You can also pass specific values directly:

<template>
  <button @click="handleClick('Hello', 123)">Click Me</button>
</template>

<script>
export default {
  methods: {
    handleClick(message, number) {
      console.log(message, number);
    }
  }
}
</script>

Important Considerations:

Performance: Avoid using v-on with complex expressions directly in the template. Instead, define methods in your component and call those methods.
Event Propagation: Understand how event propagation works (bubbling and capturing) and use modifiers like .stop and .capture when necessary to control the flow of events.
$event: The $event object provides access to the underlying DOM event, allowing you to access event properties like target, clientX, clientY, etc.
Shorthand: Using the @ shorthand is generally preferred for cleaner and more readable code.

Vue Directives: v-on

Vue Directives: `v-on`