Shulou(Shulou.com)06/03 Report--

This article mainly introduces what are the events in vuejs, which can be used for reference by interested friends. I hope you will gain a lot after reading this article. Let's take a look at it.

Events in vuejs are: focus, blur, click (click), dblclick, contextmen, mousemove, mouseover, mouseout, mouseup, keydown, keyup, select, wheel, and so on.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

Event Handler event handling

Event handling in Vuejs is very powerful and important. We must learn it well.

The reason why Event Handler is given high status by Vuejs is based on the following considerations:

Write the code related to the event independently, it is very easy to locate all kinds of logic and easy to maintain.

After the event handler is isolated, the DOM element of the page looks simple. It's easy to understand.

When a page is closed, the corresponding ViewModel is also recycled. Then the various event handler defined on this page will also be garbage collected. Does not cause a memory overflow.

Supported Event

We have seen v-on:click before, so what events can be supported by v-on?

As long as it is a standard HTML defined Event, it is supported by Vuejs.

Focus (element gets focus)

Blur (element loses focus)

Click (left mouse button click)

Dblclick (double-click the left mouse button)

Contextmenu (stand-alone right mouse button)

Mouseover (move the pointer to the element or its child elements that have event listeners)

Mouseout (the pointer moves out of the element or over its child elements)

Keydown (keyboard action: press any key)

Keyup (keyboard action: release any key)

All HTML standard events: https://developer.mozilla.org/zh-CN/docs/Web/Events

Example:

A total of 162 standard events and dozens of non-standard events, as well as Mozilla-specific events, are defined. As shown in the following figure:

We don't have to remember all of them. Usually in daily development, less than 20 are the most common event.

Use v-on for event binding

We can assume that almost all events are driven by v-on, the directive. Therefore, this section provides a more detailed description of v-on.

1. Using variables in v-on

You can reference variables in v-on, as shown in the following code:

You clicked: {% raw%} {{% endraw%} count}} + 1 var app = new Vue ({el:'# app' Data: {count: 0}})

The above code, after opening it in a browser, click the button, and you can see that the variable count will follow + 1. As shown in the following figure:

two。 Using method names in v-on

The above example can also be written as follows:

You clicked: {% raw%} {{% endraw%} count}} + 1 var app = new Vue ({el:'# app' Data: {count: 0} Methods: {increase_count: function () {this.count + = 1})

As you can see, increase_count is the name of a method in vtalk on a clickproof increment count'.

3. Use method name + parameters in v-on

We can also use v-on:click='some_function ("your_parameter") 'directly, as shown in the following example:

{% raw%} {% endraw%} message}} say hello to me ~ var app = new Vue ({el:'# app' Data: {message: "this is an example of calling method + parameters in click"} Methods: {say_hi: function (name) {this.message = "Hello "+ name +"! "}})

After opening it using the browser, click the button, and you can see the following figure:

4. Redesign the logic of the button

In actual development, we often encounter such a situation: click a button, or trigger an event, want the default state of the button.

The most typical example: when submitting a form (), we want to validate the form first. If the validation fails, do not submit the form.

At this point, if you want the form not to be submitted, we have to let the submit button without further action. In all development languages, there is a corresponding method called "preventDefault"

(stop default action)

Let's look at this example:

Please enter the URL you want to open, and the judgment rule is: 1. Be sure to start with "http://" 2." Cannot be an empty string dot I am sure var app = new Vue ({el:'# app' Data: {url:''} Methods: {validate: function (event) {if (this.url.length = = 0 | | this.url.indexOf ('http://')! = 0) {alert ("the URL you entered does not conform to the rules. Cannot jump ") if (event) {alert (" event is: "+ event) event.preventDefault () })

In the above code, you can see that we have defined a variable: url. And through the code:

I'm sure I've done two things:

Bind url to this element.

This element calls the validate method when the click event is triggered. This method passes a special parameter: $event. This parameter is an instance of the current event. (MouseEvent)

In the validate method, we define it as follows: first verify that the rules are met. If it matches, the release continues to trigger the default action of the element (causing the browser to jump). Otherwise

If so, a "alert" prompt will pop up.

Open this code in a browser and you can see the following figure:

Let's enter a legal address: http://baidu.com, and you can see that after clicking, the page jumps. Jump to Baidu.

Let's enter another "illegal" address: https://baidu.com Note: the address does not start with "http://", so our vuejs code will not let it go.

As shown in the following figure:

On further observation, the page won't jump (it's a good explanation that the tag doesn't work at this time).

5. Event Modifiers event modifier

Most of the time, we want to write the code elegantly. In the traditional way, the code may be bloated. If an element behaves differently under different event, the code appears to have

A lot of if... else... A branch like this.

Therefore, Vuejs provides "Event Modifiers".

For example, we can modify the above example slightly:

Please enter the URL you want to open, and the judgment rule is: 1. Be sure to start with "http://" 2." Cannot be an empty string dot I am sure var app = new Vue ({el:'# app' Data: {url:''} Methods: {validate: function (event) {if (this.url.length = = 0 | | this.url.indexOf ('http://')! = 0) {if (event) { Event.preventDefault ()} Show_message: function () {alert ("the URL you entered does not conform to the rules. Cannot jump ")})

As you can see, the core of the above code is:

Click methods: {validate: function (event) {if (this.url.length = = 0 | | this.url.indexOf ('http://')! = 0) {if (event) {event.preventDefault ()}) Show_message: function () {alert ("the URL you entered does not conform to the rules. Cannot jump ")}}

First, two click events are defined in, one is click, the other is click.prevent. The latter indicates what action should be triggered if the element's click event is blocked.

Then, in the methods code snippet, show_message is specifically defined for use by click.prevent.

The above code runs exactly the same as the previous example. It's just that the degree of abstract classification is higher. Useful in complex projects.

Such a "event modifier" has these:

When stop propagation is stopped (that is, after calling the event.stopPropagation () method), it is triggered

Prevent is triggered after calling event.preventDefault ().

Events in the capture child element can be triggered in that element.

When the event.target of the self event is this element, it is triggered.

Once this event can be triggered at most once.

Passive is used for mobile devices. (when defining addEventListeners, add the passive option.)

The above "event modifier" can also be connected and used. For example: v-on:click.prevent.self

6. Key Modifiers button modifier

Vuejs is also sweet to provide Key Modifiers, which is a shortcut to support keyboard events. Let's look at the following example:

When you have finished typing, press enter The "show_message" event ~ var app = new Vue ({el:'# app', data: {message:''}) is triggered Methods: {show_message: function () {alert ("you entered:" + this.message)})

As you can see, in the above code, vmurondisplacement keyup.enter= "show_message" defines an event for the element, which corresponds to the "enter key".

(strictly speaking, it is the moment when the enter button is pressed to release and bounce.)

We use a browser to open the file corresponding to the above code, enter a paragraph of text, press enter, and we can see that the event has been triggered.

In total, Vuejs supports the following Key modifiers:

Enter enter key

Tab tab key

Delete corresponds to both backspace and del keys.

Esc ESC key

Space Spac

Up up Arrow

Down down arrow

Left left Arrow

Right right Arrow

With the continuous iteration and update of the Vuejs version, more and more Key modifiers has been added, such as page down, ctrl.

Thank you for reading this article carefully. I hope the article "what are the events in vuejs" shared by the editor will be helpful to you? at the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.