vue事件处理函数,vue事件对象的使用
本文主要介绍vue事件处理的原理和过程，并通过实例代码进行详细介绍。对大家的学习或者工作都有一定的参考价值，有需要的朋友可以参考一下。
:
目录
1.函数绑定2。带参数和$event3。多个函数绑定一个事件4。事件修饰词5。关键修饰词6。系统修改键。精确修改器鼠标按钮修改器汇总
1. 函数绑定
您可以使用v-on绑定事件处理程序：click=methodName 或shortcut @click=methodName
@click=methodName()没问题，@click=methodName guess是速记。
div v-on:click= add“{ count } }/div
div @ click= add“{ count } }/div
data() {
返回{
计数：0，
};
},
方法：{
add() {
this.count
},
},
2. 带参数和$event
可以在绑定到事件的函数中直接传递参数和$event。
div @click=set(0，$event){{ count }}/div
data() {
返回{
计数：0，
};
},
方法：{
add() {
this.count
},
集合(值，事件){
console.log(事件)；
this.count=value
},
},
3. 多个函数绑定一个事件
多个函数直接用逗号分隔。即使没有参数的函数也应该在这里用括号括起来，否则，该函数将不会被执行。
比如div @ click= set (0，$ event)，log“{ count } }/div只会执行set。
div @click=set(0，$event)，log(){{ count }}/div
data() {
返回{
计数：0，
};
},
方法：{
add() {
this.count
},
log() {
console . log( log-)；
},
集合(值，事件){
console.log(事件)；
this.count=value
},
},
4. 事件修饰符
使用修饰语时，顺序很重要；相应的代码将以相同的顺序生成。
！-阻止点击事件扩散-
a @click.stop=doThis/a
！-提交事件，不再重新加载页面-
form @ submit . prevent= on submit /form
！-修饰符可以连接在一起-
a @ click . stop . prevent= doThat /a
！-只有修饰符-
form @submit.prevent/form
！-添加事件侦听器时使用事件捕获模式-
！-也就是内部元素触发的事件先在这里处理，然后交给内部元素处理-
div @click.capture=doThis ./div
！-仅当event.target是当前元素本身时触发处理函数-
！-也就是说，事件不是由内部元素触发的-
div @click.self=doThat ./div
！-单击事件只会触发一个可用于定制组件的事件-
a @click.once=这样做/a
！-滚动事件的默认行为(即滚动行为)将被立即触发-
！-而不是等待onScroll完成-
！-这包括event.preventDefault()的情况-
！-尤其可以提高移动终端的性能-
div @scroll.passive=onScroll ./div
5. 按键修饰符
。进入。标签。删除(捕捉“删除”和“退格”键)。转义字符。空间。起来。向下。左边的。正确
！-仅在输入“key”时调用“vm.submit()”
input @keyup.enter=submit /
！-仅当“key”为PageDown时才调用“vm.onPageDown()”
input @ keyup . page-down= on pagedown /
6.系统修饰键
当事件被触发时，必须按下修饰键。计算机的ctrl按键。中高音。变化。自指的
！-按住Alt，按Enter -
input @keyup.alt.enter=clear /
！-按住ctrl单击-
div @click.ctrl=doSomething 做点什么/div
.exact修饰符
！-即使Alt或Shift同时按下，也会触发-
button @ click . ctrl= onClick a/button
！-是的，只有在按下Ctrl键时才会触发-
button @ click . ctrl . exact= onctrl click a/button
！-仅在未按下系统修饰键时触发-
button @ click . exact= onClick a/button
鼠标按钮修饰符
button @ click . left= log( left cllil CK )鼠标左键单击/button
button @ click . Right= log( Right cllick )右击/button
button @ click . middle= log( middle cllick )鼠标中键单击/button
总结
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。