Learn Vue.js
By Overflow Club
Instructor: Mohamed Mansour
2.3
Section II
Getting Started with Vue (part 3)
Outline
- Template syntax (cont.)
- Events
- Docs references
Template Syntax (cont.)
Events Handling
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.
Template Syntax (cont.)
Events Handling
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)
Working with single-file components (cont.)
Attribute and Events Inheritance
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?
Working with single-file components (cont.)
Custom Events
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.
Docs Reference
Thank you
Overflow Vue Course - 2.3 (WIP)
By Mo Mansour
Overflow Vue Course - 2.3 (WIP)
- 55
