Listen to events
You can use the v-on instruction to listen for DOM events to trigger some javascript code.
demo:
<div v-on:click="++counter">Click，Increase1</div>
<span>{{counter}}</span>
data:{
counter:0
}
Method Event Handler
The logic of many event processors is very complicated, so it is not feasible to write javaScript code directly into v-on instructions. Therefore v-on can receive a defined method to call
<div v-on:click="counter()">Click，Increase1</div>
<span>{{counter}}</span>
data:{
counter:0
},
method:{
counter:function(){
++;
}
}
Sometimes you also need to access native DOM events in the inline statement processor. You can use the special variable $event to pass it into the method:
$event native event object
Event modifier
Calling() or() in an event handler is a very common requirement. Although we can easily achieve this in methods, better
The method is: methods are just pure data logic, not to handle the details of DOM events.
To solve this problem, an event modifier is provided for v-on, which is called through the instruction suffix represented by (.).
.stop
.prevent
.capture
.self
.once
<!-- Prevent click events from bubbles --> <a v-on:="doThis"></a> <!-- Submit event no longer reloads the page --> <form v-on:="onSubmit"></form> <!-- Modifiers can be concatenated --> <a v-on:="doThat"></a> <!-- Only modifiers --> <form v-on:></form> <!-- Use event capture mode when adding event listeners --> <div v-on:="doThis">...</div> <!-- Only when the event is in the element itself（Not child elements）Trigger callback when triggered --> <div v-on:="doThat">...</div>
New
<!--Click event will only trigger once--> <a v-on:="dothis"></a>
Unlike other modifiers that can only work on native DOM events, the .once modifier can also be used on custom component events.
Key modifier
When listening for keyboard events, we often need to listen for common key values. Vue allows adding key modifiers to v-on when listening for events:
<!--Only inkeyCodeyes13Called on time()--> <input v-on:keyup.13="submit">
Common keys include alias:
<input v-on:="submit"> <input @="submit">
All key alias:
.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right
Custom case modifier alias can be customized through global objects
//You can use v-on:keyup.f1.f1=112
Key modifier added
You can use the following modifier to enable mouse or keyboard event monitoring to cause reactions when the key is pressed.
.ctrl
.alt
.shift
.meta
Note: On keyboards of different systems, the corresponding keys of meta are different.
Why listen for events in HTML
You may have noticed that this kind of event monitoring goes against the traditional concept of separation of concerns. Don't worry, because all event handling methods and expressions are strictly bound to the ViewModel of the current view, it will not cause any maintenance difficulties. Actually, there are several benefits to using v-on:
1. Scan the HTML template to easily locate the corresponding method in JavaScript code
2 Because you don't have to manually bind events in JavaScript, your viewModel code can be very pure logic, completely decoupled from the DOM, making it easier to test.
3 When a ViewModel is destroyed, all event processors will be automatically deleted, and you don't have to worry about how to clean them yourself.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.