v-on
Syntactic sugar : @
Usage:
bind event listener. The event type is specified by the parameter. The expression can be the name of a method or an inline statement, or it can be omitted if there is no modifier.
When used on ordinary elements, only native DOM events can be monitored. When used on custom element components, you can also listen to custom events triggered by subcomponents.
1. The method called by the event has no parameters
When the event is monitored, call the corresponding method, if the method has no parameters, you don’t need to add ()
<button type="button" @click="add">+</button>
or
<button type="button" @click="add()">+</button>
These two have the same effect
methods:{
add(){
this.counter ++
}
}
2. There are parameters
1. There are parameters but no parameters or parentheses
In the event definition, the parentheses are omitted, but the method itself requires parameters. At this time, Vue will pass the event event object generated by the browser as a parameter to the method by default, so when the event object is needed, the event Write to the formal parameters of the defined function, which is equivalent to:
<button type="button" @click="btnClick2(event)">button 2
<button type="button" @click="btnClick2">按钮2</button>
methods:{
btnClick2(event){
console.log(event);
}
}
2. There are parameters but no parameters are written, and parentheses are written when calling
Adding parentheses will output undefined, which is the same as a function that has formal parameters but no actual parameters are passed when it is called.
<button type="button" @click="btnClick2()">按钮2</button>
methods:{
btnClick2(abc){
console.log(abc);
}
}
3. There are parameters and an event object is required
When the method is defined, the event object is required and other parameters are required.
When the method is called, the event object of the browser is manually obtained. $event is a fixed way of writing.
Here, if you add parentheses when calling but do not pass parameters, event The object will output, but other ordinary parameters will output undefined
<button type="button" @click="btnClick3(123,$event)">按钮3</button>
methods:{
btnClick3(abc,event){
console.log(abc,event);
}
}
3. Event modifier
v-on modifier
In some cases, the purpose of getting event is to handle some events;
Vue provides modifiers to help us handle some events
1、.stop
.stop-call event.stopPropagation()
<div @click="divClick">
<!-- .stop 阻止冒泡 调用 event.stopPropagation() 加了.stop button的事件就不再往上冒泡了，值返回自己的点击事件了 -->
<button type="button" @click.stop="btnClick">按钮</button>
</div>
methods: {
divClick() {
console.log('divClick');
},
btnClick() {
console.log("btnClick");
}
}
2、.prevent
.prevent-call event.preventDefault()
<div id="app">
<a href="http://www.baidu.com" @click.prevent="alinkClick">百度一下 你就知道</a>
<!-- .prevent 阻止了<a>标签的默认跳转行为，点击只会触发alinkClick事件，不会跳转页面 -->
</div>
methods: {
alinkClick() {
console.log("alinkClick")
}
}
(The following modifiers will be written in detail when I have time. You can see the official website: Vue v-on )
3、.{keyCode| keyAlias}
.{keyCode | keyAlias}-The callback is triggered only when the event is triggered from a specific key
4、.native
.native-listen to the native events of the root element of the component.
5、.once
.once-trigger the callback only once