Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "how to use event modifiers and key modifiers in vue", so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use event modifiers and key modifiers in vue" article.

Calling event.preventDefault () or event.stopPropagation () in an event handler is a very common requirement. Although we can easily do this in methods, it is better that methods has pure data logic rather than dealing with the details of DOM events.

To solve this problem, Vue.js provides event modifiers for v-on. Through the point (.) Represents the instruction suffix to invoke the modifier.

.originent.capture.self.once Click the parent element and click the child element

When the parent element is clicked, the doThis is executed, and when the child element an is clicked, the click action triggers not only the a tag, but also the div tag, which is event bubbling, so assuming that the a tag in the above example is called "a", the doThis will be executed twice. Both the parent element and the child element execute a click event, while .stop prevents the event bubbling and clicks on the a tag again. The click event is executed only once

Key modifier

When listening for keyboard events, we often need to monitor common key values. Vue allows you to add button modifiers for v-on when listening for keyboard events:

Remembering all the keyCode is difficult, so Vue provides aliases for the most commonly used keystrokes:

All key aliases:

.enter.tab.delete (capture delete and backspace keys) .esc.space.up.down.left.right

You can customize key modifier aliases through the global config.keyCodes object:

/ / you can use v-on:keyup.f1 Vue.config.keyCodes.f1 = 112

Key modifier

2.1.0 New

You can turn on mouse or keyboard event monitoring with the following modifiers to respond when the key is pressed.

.ctrl.alt.shift.meta

Note: on the Mac system keyboard, meta corresponds to the command key (⌘). On the Windows system keyboard meta corresponds to the windows logo key (⊞). On the keyboard of the Sun operating system, meta corresponds to a solid gem key (◆). On other specific keyboards, especially MIT and Lisp keyboards and their subsequent keyboards, such as Knight keyboards, space-cadet keyboards, and meta are marked "META". On the Symbolics keyboard, meta is marked "META" or "Meta".

For example:

Alt + C

Ctrl + Click

Do something above is about the content of this article on how to use event modifiers and key modifiers in vue. I believe you all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

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.