By Overflow Club
Instructor: Mohamed Mansour
2.3
Vue allows us to listen to DOM events and execute JavaScript code in response using the v-on directive.
These events can trigger inline JavaScript code or call methods defined in our Vue component.
We commonly use the @ symbol as a shorthand for v-on. For example, @click is equivalent to v-on:click.
Vue allows us to listen to DOM events and execute JavaScript code in response using the v-on directive.
These events can trigger inline JavaScript code or call methods defined in our Vue component.
We commonly use the @ symbol as a shorthand for v-on. For example, @click is equivalent to v-on:click.
We can execute simple JavaScript code directly in the template, similar to the native onclick attribute. This is called inline event handler.
<template>
<button @click="count++">count = {{ count }}</button>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>Or, we could call a method as the event handler, which allows us to add more complex logic.
We commonly use the @ symbol as a shorthand for v-on. For example, @click is equivalent to v-on:click.
We can execute simple JavaScript code directly in the template, similar to the native onclick attribute. This is called inline event handler.
<template>
<button @click="count++">count = {{ count }}</button>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>Or, we could call a method as the event handler, which allows us to add more complex logic.
Vue automatically passes the native DOM event object to method handlers, allowing us to access event details such as event.target.
<template>
<input type=text v-model="name">
<button @click="(event) => greeting(name, event)">
Hello
</button>
</template>
<script setup>
import { ref } from 'vue'
const name = ref('')
function greeting(name, event) {
// now we have access to the native event object from js
if (event) {
event.preventDefault()
}
alert('hello, ' + name)
}
</script>Or, we could call a method as the event handler, which allows us to add more complex logic.
Vue automatically passes the native DOM event object to method handlers, allowing us to access event details such as event.target.
<template>
<input type=text v-model="name">
<button @click="(event) => greeting(name, event)">
Hello
</button>
</template>
<script setup>
import { ref } from 'vue'
const name = ref('')
function greeting(name, event) {
// now we have access to the native event object from js
if (event) {
event.preventDefault()
}
alert('hello, ' + name)
}
</script>We can also use event modifiers like .stop, .prevent, and .once to modify event behavior, ensuring cleaner and more efficient event handling in our Vue components.
<template>
<!-- the click event's propagation will be stopped -->
<a @click.stop="doThis"></a>
<!-- the submit event will no longer reload the page -->
<form @submit.prevent="onSubmit"></form>
<!-- modifiers can be chained -->
<a @click.stop.prevent="doThat"></a>
<!-- just the modifier -->
<form @submit.prevent></form>
<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div @click.self="doThat">...</div>
</template>Additionally, key modifiers and mouse button modifiers allow us to listen for specific key or mouse button combinations. (Check the docs references for the list of all events and modifiers options)
Right now you already know how to listen for events on some HTML element, or pass an attribute either static (the HTML way) or dynamic (the Vue way) to an element, as well as using Vue's own directives.
But what if you pass an attribute such as a class name to your own custom component? How will it be handled?
Now that you know how to listen to the native events in JS,
We commonly use the @ symbol as a shorthand for v-on. For example, @click is equivalent to v-on:click.