How to use event binding with v-on shorthand?
Jun 26, 2025 am 12:20 AM
v-on is used in Vue.js to listen for DOM events, and its abbreviation is @. Use @ to make the template more concise, such as
In Vue.js, v-on is a directive used to listen for DOM events. For the convenience of writing, Vue provides a short form of v-on : using an @ symbol instead of v-on: . This is very common in actual development and can also make the template simpler.
Here are some specific usages and precautions you may be concerned about:
How to use @ to bind events
Use @ directly on the element and specify the method to call. For example:
<button @click="handleClick">Click me</button>
This code is equivalent to:
<button v-on:click="handleClick">Click me</button>
The two functions are exactly the same, but the former is more concise to write.
Common event binding scenarios
- Click event :
@click - Input box changes :
@inputor@change - Keyboard event : For example,
@keyup.enterindicates that it triggers when pressing Enter - Mouse events : such as
@mouseover,@mouseleave
For example, when a user enters content in the input box, the data is updated in real time:
<input @input="updateInput" />
Define methods in scripts:
methods: {
updateInput(event) {
this.inputValue = event.target.value;
}
}Where can it be used?
@ can be used not only on native HTML elements, but also on components. for example:
<my-component @custom-event="doSomething" />
When you trigger an event through $emit('custom-event') inside the child component, the parent component can receive and execute doSomething method.
Some tips and precautions
If you do not need parameters in the method, you can omit the brackets:
@click="handleClick".If you need to pass parameters, you can write it like this:
@click="handleClick(arg)".Using modifiers can make the code more concise, for example:
-
@submit.prevent: Block default commit behavior -
@click.once: Triggered only once
-
Multiple event listening can be written together, such as listening to clicks and double-clicks at the same time:
<button @click="onClick" @dblclick="onDblClick">Tap or double-click</button>
Basically that's it. Replacing
v-on:with@seems simple, but it can significantly improve efficiency when writing templates. After getting familiar with it, you will find that it has almost become the standard writing method in Vue development.The above is the detailed content of How to use event binding with v-on shorthand?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
How to use v-on:focus to listen to focus events in Vue
Jun 11, 2023 am 08:25 AM
In Vue, we can use the v-on directive to bind various events, including mouse events, keyboard events, form events, etc. Among them, v-on:focus can monitor the event when the element gains focus. The basic syntax of the v-on directive is as follows: v-on: event name = "event handler function" In Vue, we can use v-on: focus to monitor the event when the element gains focus. For example, we can apply it to the input element so that the input box gets focus
Learn to use Vue's v-on instruction to handle mouse move-in and move-out events
Sep 15, 2023 am 08:34 AM
Learn to use Vue's v-on instruction to handle mouse move-in and move-out events. Mouse move-in and move-out events are one of the common interactive effects in Web pages. Vue provides the v-on instruction to handle these events conveniently. This article will introduce how to use Vue's v-on directive to handle mouse move-in and move-out events, and provide specific code examples. Before using Vue's v-on directive to handle mouse move-in and move-out events, we need to understand the basic usage of the v-on directive. The v-on directive is used to listen to DOM events and
How to use v-on:mousemove to listen to mouse movement events in Vue
Jun 11, 2023 pm 06:03 PM
Vue is a flexible, efficient, and easy-to-learn front-end framework. It provides us with a wealth of instructions and events to help developers quickly build interactive web applications. Among them, v-on:mousemove is the mouse movement event command provided by Vue, which can be used to monitor the movement of the mouse on the element. This article will introduce how to use v-on:mousemove in Vue, as well as some related development tips and precautions. The basic usage of v-on:mousemove is in Vue,
Learn to use Vue's v-on directive to handle keyboard shortcut events
Sep 15, 2023 am 11:01 AM
Learn to use Vue's v-on directive to handle keyboard shortcut events. In Vue, we can use the v-on directive to listen for element events, including mouse events, keyboard events, etc. This article will introduce how to use the v-on directive to handle keyboard shortcut events and provide specific code examples. First, you need to define a method in the Vue instance to handle shortcut key events. For example, we can add a method named handleShortcut to methods: methods:{
How to use v-on:click.right to implement the right mouse click event in Vue
Jun 11, 2023 pm 03:13 PM
In Vue, we can use the v-on:click directive to bind click events to elements. However, in some cases, we need to distinguish between left and right mouse click events. So, how to use the v-on:click.right instruction to implement the right mouse click event in Vue? Below, we will explain through some simple examples. First, we need to understand the v-on:click instruction in vue. This directive can monitor the click event of the element and can be executed when the event is triggered.
How to use v-on:keyup to listen to keyboard events in Vue
Jun 11, 2023 pm 05:42 PM
In Vue, we can use the v-on directive to bind event listeners, where v-on:keyup can monitor the pop-up event of the keyboard key. The v-on directive is an event binding directive provided by Vue, which can be used to monitor DOM events. Its general syntax is: v-on: event name="callback function", where the "event name" refers to the standard event or custom event name supported by the DOM element, and the "callback function" is executed when the event is triggered. The function. When listening for keyboard events, we can use v-on:k
Vue practical skills: use the v-on instruction to handle mouse drag events
Sep 15, 2023 am 08:24 AM
Vue practical skills: Use the v-on instruction to handle mouse drag events Preface: Vue.js is a popular JavaScript framework. Its simplicity, ease of use and flexibility make it the first choice for many developers. In Vue application development, handling user interaction events is an essential skill. This article will introduce how to use Vue's v-on directive to handle mouse drag events and provide specific code examples. Create a Vue instance: First, introduce the Vue.js library file in the HTML file: &
How to use the event modifier .v-on:keyup.enter in Vue to handle the event of pressing the Enter key
Jun 10, 2023 pm 11:43 PM
Vue is a very powerful JavaScript framework that can easily help us build interactive web applications. Vue provides some very convenient features, including event modifiers. Event modifiers are a way to simplify DOM event binding and provide us with a way to quickly handle specific events. In Vue, we can bind events by using the v-on directive. The v-on directive allows us to listen for specific events and trigger event handlers. For common DOM things
