事件监听v-on语法糖为@用于监听事件
例子:
<body>
<div id="app">
<h2>{{counter}}</h2>
<button v-on:click="btn1">+</button> //v-on写法
<button @click="btn2">-</button> //语法糖写法
<button @click="btn3('123',$event)">-</button>
</div>
<script>
const app =new Vue({
el:'#app',
data:{
counter:0,
message:'aaa',
},
methods:{
btn1(){ this.counter++ },
btn2(abc){ this.counter--, console.log('+++++',event)
btn3(abc,event){ this.counter--, console.log('+++++',event)
}
})
</script>
当methods的方法被v-on调用时候,如果方法没有参数,调用时候()可以省略如上btn1
如果方法含有参数,但是调用时候也没带()默认会把原生事件event参数传递进去如btn2
当需要event对象又需要有其他参数,在调用时用$event获取如btn3
v-on的修饰符
<button @click.stop="btn2">-</button> //.stop用于停止冒泡(冒泡事件)
<button @click.prevent="btn2">-</button> //.prevent阻止默认行为
<button @click.enter="btn2">-</button> //.keyCode当事件是从特定的键位触发才回调如此为当enter点击时候触发事件
<button @click.once="btn2">-</button> //once为只触发一次回调