Member-only story
Vue 3 — Event Handling
3 min readOct 17, 2020
Vue 3 is in beta and it’s subject to change.
Vue 3 is the up and coming version of Vue front end framework.
It builds on the popularity and ease of use of Vue 2.
In this article, we’ll look at how to handle events in Vue 3 components.
Listening to Events
We can listen to events with the v-on directive, or @ for short.
For instance, we can listen to clicks by writing:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<button v-on:click="onClick">click me</button>
</div>
<script>
const vm = Vue.createApp({
methods: {
onClick() {
alert("clicked");
}
}
}).mount("#app");
</script>
</body>
</html>We added the v-on:click directive to run the onClick method when we click the button.
So we should see an alert when we click the button.
To shorten it, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<button @click="onClick">click…
