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(&#39;禁止打开&#39;,$event)">打开链接</a>
</div>

Modifiers

Vue supports the following modifiers:

.stop

.prevent

.capture

.self.once

The specific usage is as follows:

##When adding an event listener Use event capture modeOnly Execute the callback when the event is triggered on the element itself (not a child element)Only triggered once, the same applies to components

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>
	...
	...
	...

When listening for keyboard events on a form element, you can also use key modifiers.

Modifier functionUsage exampleOnly in ##In addition to a specific keyCode, Vue also provides some shortcut names:

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 tutorial

column! ! !

The 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!