1. Function binding
You can use v-on:click="methodName" or shortcut @click="methodName" to bind event processing function
@click="methodName()" is OK, @click="methodName" guess is abbreviation
<div v-on:click="add">{{ count }}</div>
<div @click="add">{{ count }}</div>
data() {
return {
count: 0,
};
},
methods: {
add() {
++;
},
},
2. With parameters and $event
You can directly pass parameters and $event into the event-bound function
<div @click="set(0, $event)">{{ count }}</div>
data() {
return {
count: 0,
};
},
methods: {
add() {
++;
},
set(value, event) {
(event);
= value;
},
},
3. Multiple functions bind an event
Multiple functions are separated directly by commas. Even if a function without parameters is not included, brackets must be added, otherwise the function will not be executed.
For example, <div @click="set(0, $event), log">{{ count }}</div> will only execute set
<div @click="set(0, $event), log()">{{ count }}</div>
data() {
return {
count: 0,
};
},
methods: {
add() {
++;
},
log() {
("log---");
},
set(value, event) {
(event);
= value;
},
},
4. Event modifier
When using modifiers, the order is important; the corresponding code will be generated in the same order
<!-- Prevent click events from continuing to propagate -->
<a @="doThis"></a><!-- Submit event no longer reloads the page -->
<form @="onSubmit"></form><!-- Modifiers can be concatenated -->
<a @="doThat"></a><!-- Only modifiers -->
<form @></form><!-- Use event capture mode when adding event listeners -->
<!-- That is, the events triggered by the internal element are processed here first, and then handed over to the internal element for processing -->
<div @="doThis">...</div><!-- The processing function is triggered only when it is the current element itself -->
<!-- i.e. events are not triggered from internal elements -->
<div @="doThat">...</div><!-- Click event will only trigger once, which can be used on custom component events -->
<a @="doThis"></a><!-- The default behavior of the scroll event (i.e. the scrolling behavior) will be triggered immediately -->
<!-- without waiting for `onScroll` to complete ->
<!-- This includes the situation where `()` is -->
<!-- It can especially improve the performance of the mobile terminal ->
<div @="onScroll">...</div>
5. Key modifier
.enter.tab-
.delete (Capture the "Delete" and "Backspace" keys) .esc.space.up.down.left.right
<!-- `()` is called only if `key` is `Enter` -->
<input @="submit" /><!-- `()` is called only if `key` is PageDown -->
<input @-down="onPageDown" />
6. System Modification Key
The modifier key must be pressed when the event is triggered
.ctrl.alt.shift.meta
<!-- Press Alt, press Enter -->
<input @="clear" /><!-- Hold Ctrl + Click -->
<div @="doSomething">Do something</div>
.exact modifier
<!-- Triggers even when Alt or Shift is pressed together -->
<button @="onClick">A</button><!-- There is and only triggers when Ctrl is pressed -->
<button @="onCtrlClick">A</button><!-- Triggered only when no system modifier is pressed -->
<button @="onClick">A</button>
Mouse button modifier
<button @="log('left cllilck')">Left mouse click</button>
<button @="log('right cllilck')">Right-click on the mouse</button>
<button @="log('middle cllilck')">Click on the mouse</button>
Summarize
That’s all for this article. I hope it can help you, and I hope you can pay more attention to more of my content!