v-on参数问题
- 如果@click不需要额外的参数,该方法后的()可以不添加
- 如果方法本身中有一个参数,那么会默认将原生事件event参数传递进去
- 如果需要同时传入某个参数,同时需要event时,可以通过$event传入事件
<div id="app">
<!--undefine-->
<button @click="btn1Click()">btn1</button>
<!--默认传入mouseEvent对象-->
<button @click="btn2Click">btn2</button>
<!--需要自己传入参数,有需要event对象-->
<button @click="btn3Click(123,$event)">btn3</button>
</div>
<script>
const vm = new Vue({
el: '#app',
methods: {
btn1Click: function (a) { console.log(a);},
btn2Click: function (a) { console.log(a);},
btn3Click: function (a,event) { console.log(a,event);},
}
})
</script>
v-on修饰符
事件冒泡? => 点击btn时div也被点击
<div id="app">
<div @click="divClick">
aaa
<button @click="btnClick">btn1</button>
</div>
</div>
<script>
const vm = new Vue({
el: '#app',
methods: {
btnClick: function () { console.log('btnClick');},
divClick: function () { console.log('divClick');},
}
})
</script>
这样写即可
<button @click.stop="btnClick">btn1</button>
阻止表单自动提交,自己手动提交,重写函数
<form action="kkk">
<input type="submit" @click.prevent="submitClick" value="submit"/>
</form>
键盘修饰符
<input @keyup.enter="onEnter">
<input @keyup.13="onEnter">
<button @click.once >只触发一次</button>