本文主要是介绍VUE3 学习笔记（4）：VUE 事件处理、传参、事件修饰，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
常见的Web事件
页面事件
Onload --加载
Onunload --取消
Onscroll --滚动
Onresize --大小改变
表单事件
Onsubmit --提交
onchange --变更
Onselect --选择
Onreset --重置
焦点事件
Onfocus --得到焦点
Onblur --失去焦点
鼠标事件
Onclick --点击
Ondbclick --双击
onmouseup --松开
Onmousemove --移动
Onmouseover --停留
Onmouseout --移出
键盘事件
Onkeydown --按下
Onkeyup --松开
Onkeypress --按住
媒体事件
Play --播放
Pause --暂停
ended --停止
内联与外联
内联就是直接在对应事件上写功能，外联则是在JS里统一写，然后在事件上调用自定义函数（也有人叫方法，意思相同）。
示例
<template><div><!-- 内联测试 --><!-- 完整写法 --><button v-on:click="num++">内联事件演示 累加</button><!-- 简写 --><button @:click="num--">内联事件演示 累减</button><p>{{num}}</p><button @:click="add">外联事件演示 累加</button><button @:click="sub">外联事件演示 累减</button></div>
</template><script> export default {data(){return{num:0}},methods:{add(){this.num++},sub(){this.num--}}}
</script>传参
事件中的event对象与JS中一样
示例
<template><div><button @:click="add">外联事件演示 累加</button></div>
</template><script>export default {data(){return{num:0}},methods:{add(e){console.log(e.target.innerHTML)e.target.innerHTML='累加'+this.numthis.num++},sub(){this.num--}}}
</script>自定义函数最大的意义在于传值（或传参），否则意义不大。
传参示例
<template><div><button @:click="add(1,2)">外联事件演示 累加</button><p>{{num}}</p></div>
</template><script>export default {data(){return{num:0}},methods:{add(a,b){this.num=a+b}}}
</script>深入一下，实现对渲染列表中信息的识别
<template><div><p v-for="item in numList" :key="item" @click="showMsg(item)">{{item}}</p></div>
</template><script>export default {data(){return{num:0,numList:[1,2,3,4,5]}},methods:{showMsg(a){alert(a)}}}
</script>再深入一下，尝试把event对象也传一下
<template><div><p v-for="item in numList" :key="item" @click="showMsg(item)">{{item}}</p><p v-for="item in numList" :key="item" @click="showMsgAndEven(item,$event)">{{item}}</p></div>
</template><script>export default {data(){return{numList:[1,2,3,4,5]}},methods:{showMsg(a){alert(a)},showMsgAndEven(a,e){alert(a+' '+e.target.innerHTML)}}}
</script>修饰
由于VUE是模板式，所以可以直接集成了相应的事件修饰，而不用再在去event去做处理。
更多关于事件修饰说明可以进入官方查看
以下示例用于阻止跳转的代码示例
<template><div><p v-for="item in numList" :key="item" @click="showMsg(item)">{{item}}</p><a @click.prevent="showMsg(1)" href="https://www.baidu.com">baidu.com</a></div>
</template><script>export default {data(){return{num:0,numList:[1,2,3,4,5]}},methods:{showMsg(a){alert(a)},}}
</script>这篇关于VUE3 学习笔记（4）：VUE 事件处理、传参、事件修饰的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
