Detailed explanation of how to handle events in vue.js
The followingvue.js tutorial will introduce to you how to use vue.js to handle events. I hope it will be helpful to everyone.
When you use Vue to build a dynamic website, you will most likely want it to respond to events.
For example, you might want your Vue website to respond in a certain way if the user clicks a button, submits a form, or even just moves the mouse.
Handling events using Vue
We can intercept events by adding the v-on
directive to the relevant DOM element . Let's say we want to handle clicks on a button element - we can add the following to our Vue template:
<button v-on:click="clickHandler"></button>
Note that we added a parameter to the directive, the v-on
parameter will be the name of the event we want to handle (click in this case).
We then bind the expression to the directive, which is typically the method you want to use to handle the event. In this case we call it clickHandler
.
Tip: The v-on directive has a convenient shorthand form @, which can be used instead of v-on::<button @click="clickHandler">< /button>
.
Event types that can be processed
In addition to click, what else can be processed DOM events?
Vue can handle any type of web or mobile native event (as well as custom events we'll discuss later), including:
submit
keyup
drag
scroll
Most common List of DOM events
Event handling methods
If we bind a method to an event handling directive, we can now Run some custom code.
In this example, let's keep it simple and just log a message to the console, but you can also do some more interesting things like show/hide another element, increment a counter, etc.
<div id="app"> <button v-on:click="clickHanlder"></button> </div>
new Vue({ el: "#app", methods: { clickHandler () { console.log("You clicked the button!"); } } })
Event Object
The event object is passed to the event handler, opening up more possibilities for how to respond to the event. This object contains many useful properties and methods, including references to the element from which the event originated (event.target), the time when the event occurred (event.timeStamp), etc.
clickHandler (event) { console.log(`The button was clicked at ${event.timeStamp}.`); }
Please note that this object is provided by the native Web API, not Vue, so it will be the same object you find in pure JavaScript. For convenience, the following is the event interface reference.
Event Modifiers
A common pattern in JavaScript applications is to handle form submission manually instead of using native functionality. To do this, you need to use the preventDefault native method of the Submit event before running the form handling code, otherwise the page will be redirected before it has a chance to complete.
formHandler (event) { event.preventDefault(); // form handling logic }
Vue provides an event modifier to do this directly from the template instead of doing it manually in a handler. Note that the modifier is the '.' added after the directive:
<form @submit.prevent="formHandler"></form>
Vue provides several different event modifiers that are useful in common event handling scenarios:
.stop
.prevent
.capture
. self
.once
.passive
Custom event
So far we have been discussing how to handle native events. But Vue is a component-based framework, so can we make the component emit its own events?
Yes, this can be very useful. Suppose you want a child component to send data to a parent component. We can't use props here because prop data is only passed from parent to child and not otherwise.
ParentComponent | | (data travels down via props, never up) v ChildComponent
The solution is to have the child component emit the event and have the parent component listen to the event.
To do this, call this.$emit("my-event") from the child component when you want the event to be emitted. For example, let's say we have a component DialogComponent that needs to notify its parent MainPage that it has been closed:
export default { methods: { onClose() { this.$emit("dialog-closed"); } } };
The parent component can then handle custom events exactly like local events.
<div> <dialog-component @dialog-closed="eventHandler" /> </div>
You can also send data in a custom event, which can be received through the processing method:
onClose() { this.$emit("dialog-closed", { time: Date.now() }); }
eventHandler (event, { time }) { console.log(`Dialog was closed at ${time}`); }
Tip: Use kebab-case names for custom events! HTML is not case sensitive, so a camelcased event name, such as myEvent, will be confusing as myevent is in the template. Therefore, it is better to use kebab-case my-event to avoid confusion.
活动巴士
如上所述,子组件可以将事件发送到父组件。但是,如果您希望组件将事件发送到层次结构中的任何其他组件怎么办?例如,同级,祖父母等。
为此,我们可以使用一种称为事件总线的模式。在这里,我们创建了一个单独的Vue实例,以将事件传输到导入该事件的任何组件。
首先,在新的模块文件中创建并导出Vue实例:
import Vue from "vue"; export default new Vue();
接下来,将总线导入到您要发出事件的组件中。您可以使用$emit总线Vue实例的方法。
import eventBus from "./eventBus"; export default { ... methods: { myMethod () { eventBus.$emit("my-event") } } }
最后,将总线导入到您想听事件的组件中。然后,您应该在代码中的某个位置设置侦听器。我建议您使用生命周期挂钩,就像created您可以在此处访问组件实例一样。
这是通过$on总线方法完成的,该方法带有两个参数-您要监听的事件和一个回调。
import eventBus from "./eventBus"; export default { ... created () { eventBus.$on("my-event", () => { console.log("my-event called on global event bus"); }); } }
相关推荐:
更多编程相关知识,请访问:编程入门!!
The above is the detailed content of Detailed explanation of how to handle events in vue.js. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

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)

Hot Topics

When using the Vue framework to develop front-end projects, we will deploy multiple environments when deploying. Often the interface domain names called by development, testing and online environments are different. How can we make the distinction? That is using environment variables and patterns.

Ace is an embeddable code editor written in JavaScript. It matches the functionality and performance of native editors like Sublime, Vim, and TextMate. It can be easily embedded into any web page and JavaScript application. Ace is maintained as the main editor for the Cloud9 IDE and is the successor to the Mozilla Skywriter (Bespin) project.

The difference between componentization and modularization: Modularization is divided from the perspective of code logic; it facilitates code layered development and ensures that the functions of each functional module are consistent. Componentization is planning from the perspective of UI interface; componentization of the front end facilitates the reuse of UI components.

Vue.js has become a very popular framework in front-end development today. As Vue.js continues to evolve, unit testing is becoming more and more important. Today we’ll explore how to write unit tests in Vue.js 3 and provide some best practices and common problems and solutions.

Foreword: In the development of vue3, reactive provides a method to implement responsive data. This is a frequently used API in daily development. In this article, the author will explore its internal operating mechanism.

In Vue.js, developers can use two different syntaxes to create user interfaces: JSX syntax and template syntax. Both syntaxes have their own advantages and disadvantages. Let’s discuss their differences, advantages and disadvantages.

There are two ways to query the current Vue version: 1. In the cmd console, execute the "npm list vue" command to query the version. The output result is the version number information of Vue; 2. Find and open the package.json file in the project and search You can see the version information of vue in the "dependencies" item.

How to handle exceptions in Vue3 dynamic components? The following article will talk about Vue3 dynamic component exception handling methods. I hope it will be helpful to everyone!
