当前位置：首页 > 前端技术 > vue >内容正文

vue

003_Vue事件

发布时间：2025/5/22 vue 82 豆豆

生活随笔收集整理的这篇文章主要介绍了 003_Vue事件小编觉得挺不错的,现在分享给大家,帮大家做个参考.

1. Vue如何处理事件?

1.1. v-on指令用法

1.2. v-on简写形式

2. 事件函数的调用方式

2.1. 直接绑定函数名称

2.2. 调用函数

3. 事件函数参数传递

3.1. 普通参数和事件对象

3.2. 如果事件直接绑定函数名称, 那么默认会传递事件对象作为事件函数的第一个参数。

3.3. 如果事件绑定函数调用, 那么事件对象必须作为最后一个参数传递, 并且事件对象的名称必须是$event。

4. 点击事件案例

4.1. 代码

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>点击事件</title></head><body><div id="app"><div>{{num}}</div><div><button v-on:click="++num">点击1</button><button @click="++num">点击2</button><button @click="handle1">点击3</button><button @click="handle1($event)">点击4</button><button @click="handle2(500, $event)">点击5</button></div></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">var vm = new Vue({el: "#app",data: {num: 0,},methods: {handle1: function(event){++this.num;console.log(event.target.innerHTML);},handle2: function(p, event){++this.num;this.num += p;console.log(event.target.innerHTML);}}});</script></body> </html>

4.2. 运行效果

4.3. 点击1

4.4. 点击2

4.5. 点击3

4.6. 点击4

4.7. 点击5

9. 事件修饰符-阻止冒泡

9.1. .stop阻止冒泡。

9.2. 代码

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>事件-阻止冒泡.stop</title></head><body><div id="app"><div>{{num}}</div><div @click="handle1"><button @click.stop="handle2">点击1</button></div></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">var vm = new Vue({el: "#app",data: {num: 0,},methods: {handle1: function(event){++this.num;console.log('handle1: ' + event.target.innerHTML);},handle2: function(event){console.log('handle2: ' + event.target.innerHTML);// js默认的阻止冒泡函数// event.stopPropagation();}}});</script></body> </html>

9.3. 运行效果

10. 事件修饰符-阻止默认行为

10.1. .prevent阻止默认行为

10.2. 代码

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>事件-阻止默认行为.prevent</title></head><body><div id="app"><a href="http://www.baidu.com" @click.prevent="handle1">百度</a></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">var vm = new Vue({el: "#app",data: {},methods: {handle1: function(event){// js默认的阻止默认行为函数// event.preventDefault();}}});</script></body> </html>

10.3. 运行效果, 点击超链接不跳转

总结

以上是生活随笔为你收集整理的003_Vue事件的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。

事件
_vue