1. Preface
Event binding in vuejs, using<v-on: Event name = Function name>To complete it, the function name is defined in the methods object in the Vue instance, and the Vue instance can directly access the methods in it.
2. Event binding method
1. Write js method directly in the tag
<button v-on:click="alert('hi')">The first way to write the execution method</button>
2. Method to call method
<button v-on:click="run()">The first way to write the execution method</button>
<button @click="run()">Execute method Abbreviation How to write</button>
export default {
data () {
return {
msg: 'Hello vue',
list:[]
}
},
methods:{
run:function(){
alert('This is a method');
}
}
}
(1) Method passes parameters, the method directly passes parameters in the method during call
<button @click="deleteData('111')">Execute method to pass values111</button>
<button @click="deleteData('222')">Execute method to pass values2222</button>
deleteData(val){
alert(val);
},
(2) Passing in event object
<button data-aid='123' @click="eventFn($event)">Event Object</button>
eventFn(e){
(e);
// dom node ='red';
(); /*Get the value of the custom attribute*/
}
3. Event modifier
1. stop //Stop the event from continuing to spread, that is, prevent its capture and bubble process
Method 1:@click='show($event)' After we have the event object, can we use the native function=true；
Method 2:@='show()' Just add .stop after the event to prevent the event from bubbled.
For example:
Example: The following click internal click prevents the bubble process, that is, only the tz method is executed. If you do not add .stop, first execute the tz method and then execute the gett method. That is, the bubble process has been passed.
<div v-on:click="gett"> External click <div v-on:="tz">Internal click</div> </div>
2. prevent //Block the default event:
Method 1:@click='show($event)' After we have the event object, can we use the native function();
Method 2: @='show()' Just add .prevent after the event to block the default event.
For example: The default refresh of the a tag is blocked
<a href="" v-on:>Click</a>
3. capture // Use event capture mode when adding event listeners, that is, triggered in capture mode
Example: When clicking on the innermost click 6, the gett method is executed first, because the gett method is executed in the capture mode, and the bubble event is first associated with the bubbling event. The following execution order is get->set->tz , because the last two events are still triggered in bubble mode.
<div v-on:="gett">External click5 <div v-on:click="tz">Internal click5 <div v-on:click="set">Click6</div> </div> </div>
4. Self //The function will be triggered when the current element itself is triggered.
Principle: It is based on whether the current element itself determines whether the event/function is triggered.
Example: If you click internally click 2, the gett method will not be executed, because it refers to the dom element of internal click 2, not external click 1, so your own click event will not be triggered.
<div v-on:="gett"> External click1 <div v-on:click="tz">Internal click2</div> </div>
5. Once // Only trigger once
Example:
<div v-on:="tz">once</div>
6. Keyboard events
Method 1:@keydown='show()'
Of course, we can also get $event in the function
if(==13){
alert('You pressed the Enter key! ')
}
Method 2:
<input type="text" @="show()">Enter to execute <input type="text" @='show()' >Up key to execute <input type="text" @='show()' >Push key to execute <input type="text" @='show()' >Left-click to execute <input type="text" @='show()' >Right-click to execute
Summarize
The above is a detailed explanation of the example code of the method of implementing binding events introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!