Home > Article > Web Front-end > Introduction to Vue.js methods and events
This article brings you an introduction to Vue.js methods and events. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
Methods and events
@click The method name called does not need to be followed by brackets (). If the method has parameters, the native event object event will be passed in by default .
This design of monitoring events on HTML elements seems to tightly couple the DOM and JavaScript, violating the principle of separation, but in fact it is just the opposite. Because you can know which method is called through HTML, it decouples the logic from the DOM and facilitates maintenance.
The most important thing is that when the viewModel is destroyed, all event handlers will be automatically destroyed without handling it yourself.
Vue provides a special variable $event for accessing native DOM events.
<div id="app"> <a href="https://www.apple.com/" @click="handleClick('禁止打开',$event)">打开链接</a> </div>
Modifiers
Vue supports the following modifiers:
.stop
.prevent
.capture
.self.once
The specific usage is as follows:
Modifier function | Usage example |
---|---|
Prevent click events from bubbling | <a @click.stop="handle"></a> |
Submit events no longer reload the page | <form @submit.prevent="handle"></form> |
Modifiers can be concatenated | <a @click.stop.prevent="handle"></a> |
Only modifiers | <form @submit.prevent></form> |
...
|
|
...
|
|
...
|
Usage example | |
---|---|
keyCode is 13 when calling vm.submit()
| ##
|
.enter
.tab
.delete (replenish the "delete" and "backspace" keys)
.esc
.space
.up
.down
.left
.right
These key modifiers can also be used in combination, or with the mouse:
.ctrl
.alt
.shift
.meta
This article is all over here. For more courses about vue.js, you can follow the php Chinese website The
JavaScript video tutorialThe above is the detailed content of Introduction to Vue.js methods and events. For more information, please follow other related articles on the PHP Chinese website!