Just a few weeks until the 2021 JavaScript Full-Stack Bootcamp opens.
Signup to the waiting list!
What are Vue.js events
Vue.js allows us to intercept any DOM event by using the v-on
directive on an element.
If we want to do something when a click event happens in this element:
<template>
<a>Click me!</a>
</template>
we add a v-on
directive:
<template>
<a v-on:click="handleClick">Click me!</a>
</template>
Vue also offers a very convenient alternative syntax for this:
<template>
<a @click="handleClick">Click me!</a>
</template>
You can choose to use the parentheses or not. @click="handleClick"
is equivalent to @click="handleClick()"
.
handleClick
is a method attached to the component:
<script>
export default {
methods: {
handleClick: function(event) {
console.log(event)
}
}
}
</script>
Methods are explained more in detail in my Vue Methods tutorial.
What you need to know here is that you can pass parameters from events: @click="handleClick(param)"
and they will be received inside the method.
Access the original event object
In many cases, you will want to perform an action on the event object or look up some property in it. How can you access it?
Use the special $event
directive:
<template>
<a @click="handleClick($event)">Click me!</a>
</template>
<script>
export default {
methods: {
handleClick: function(event) {
console.log(event)
}
}
}
</script>
and if you already pass a variable:
<template>
<a @click="handleClick('something', $event)">Click me!</a>
</template>
<script>
export default {
methods: {
handleClick: function(text, event) {
console.log(text)
console.log(event)
}
}
}
</script>
From there you could call event.preventDefault()
, but there’s a better way: event modifiers
Event modifiers
Instead of messing with DOM “things” in your methods, tell Vue to handle things for you:
@click.prevent
callevent.preventDefault()
@click.stop
callevent.stopPropagation()
@click.passive
makes use of the passive option of addEventListener@click.capture
uses event capturing instead of event bubbling@click.self
make sure the click event was not bubbled from a child event, but directly happened on that element@click.once
the event will only be triggered exactly once
All those options can be combined by appending on modifier after the other.
For more on propagation, bubbling/capturing see my JavaScript events guide.
Download my free Vue Handbook
The 2021 JavaScript Full-Stack Bootcamp will start at the end of March 2021. Don't miss this opportunity, signup to the waiting list!
More vue tutorials:
- An overview of Vue.js
- The Vue.js CLI: learn how to use it
- The Vue.js DevTools
- Configuring VS Code for Vue Development
- Create your first app with Vue.js
- Vue.js Single File Components
- Vue.js templates and interpolations
- Vue.js Directives
- Vue.js Methods
- Vue.js Computed Properties
- Styling Vue.js components using CSS
- Vue.js Watchers
- Vue methods vs watchers vs computed properties
- Vue.js Filters
- Vue.js Components
- Vue.js Slots
- Vue.js Component Props
- Vue.js Events
- Vue.js Components Communication
- Vuex, the Vue.js State Manager
- Vue, use a component inside another component
- Vue, how to use a prop as the class name
- How to use SCSS with Vue.js Single File Components
- Using Tailwind with Vue.js
- The Vue Router
- Dynamically show a Vue component
- The Vue.js Cheat Sheet
- Store Vue data to localStorage using Vuex
- How to dynamically apply a class using Vue
- Vue, how to use v-model
- Vue, why data must be a function
- Roadmap to become a Vue.js developer in 2020