Vue中v-on的基础用法、参数传递和修饰符的示例详解_vue.js_

一、v-on的基本用法

使用v-on:click给button绑定监听事件以及回调函数，@是v-on:的缩写，也就是简写也可以使用@click。方法一般是需要写方法名加上()，在@click中可以省掉，如上述的加。

以简单的计数器为例

{{count}}
加减

二、v-on的参数传递

在methods中定义的方法，我们可以进行调用，可以带上（），也可以不带（）

如下的btnClick的调用中，加了（）想要调用，里面必须要有值，如果不加小括号,就只会调用事件对象。

btnClick3想要传入event，需要在调用时写$event,才能调用事件对象。

按钮1按钮2按钮3按钮4按钮5按钮6

事件没传参，可以省略()事件调用方法传参了，写函数时候省略了小括号，但是函数本身是需要传递一个参数的，这个参数就是原生事件event参数传递进去如果同时需要传入某个参数，同时需要event是，可以通过$event传入事件。

三、v-on的修饰词

.stop的使用，btn的click事件不会传播，不会冒泡到上层，调用event.stopPropagation()。

.prevent调用event.preeventDefault阻止默认行为。

.enter监听键盘事件;

once事件只触发一次（常用）；

capture使用事件的捕获模式；

self只有event.target是当前操作的元素时才触发事件；

passive事件的默认行为立即执行，无需等待事件回调执行完毕；

按钮1
提交
 账号 密码
点我提示信息
 div1外面 
 div2里面 
点我

到此这篇关于Vue中v-on的基础用法、参数传递和修饰符的文章就介绍到这了,更多相关Vue中v-on参数传递和修饰符内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！