这篇文章主要介绍了vue常用事件之v-on:click 以及事件对象,事件冒泡,事件默认行为,其实v-on后面跟的不止是click事件也可以是其他的事件,用法均相似,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
其实v-on后面跟的不止是click事件也可以是其他的事件,用法均相似。比如:v-on:click/mouseout/mouseover/mousedown.......
以下click为例
注意:所有的v-on都可以简写为@,比如说v-click可以简写为@click
1.监听事件
可以用v-on
指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。通常来讲就是监听dom触发一些操作,这些操作(比如点击)触发后执行的动作(js)可有直接写在后面
v-on:click="item+=1"
eg:
{{item}}
结果:
可以看见每点击一次绑定的值就增加1.也就是说可以吧js的操作放在事件触发的后面。但是有时候逻辑太复杂的时候写在里面就会造成混乱,视图和逻辑混淆。所以click后面可以接一个方法,把所有处理逻辑的方法封装在一个函数里面click的时候调用
2.事件处理方法
v-on:click="greet"
eg;
{{res}}
效果:
可以看见点击之后执行了greet方法里面js逻辑
3.带参数的时间绑定方法:
同上,唯一区别是携带了参数
v-on:click="greet(name)"
{{res}}
效果一致。对方法的调用同样可以一个方法多处多次的调用
4.内联处理器中的方法
也就是说在方法里面调用其他的方法,这里的其他方法可以是js原生的方法比如阻止冒泡呀等等,也可以是自定义的方法
v-on:click="greet(name,$event)"
eg:
{{res}}
效果:
5.事件对象
$event 拿到当前点击事件的事件对象,比如click就是拿到当前点击的dom事件对象信息
v-on:click="greet($event)"
eg:
v-on:click="greet($event)"/>
v-on:click="greet($event)"/>