v-on

1.基础

官方文档链接 https://cn.vuejs.org/v2/api/#v-on

作用：绑定事件监听。 事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

预期：Function | Inline Statement | Object

语法：

<div id="app"> <!--eventA()是自己定义的方法--> <button v-on:click="eventA()">A1</button> </div> 语法糖（简写）： <div id="app"> <!--和上面的没有区别--> <button @click="eventA()">A1</button> </div>

参数： – event对象（代表事件的状态，如鼠标、键盘的状态等），默认参数。 – 自定义参数

用法： 用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。 在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event property：v-on:click=“handle(‘ok’, $event)”。 从 2.4.0 开始，v-on 同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时，是不支持任何修饰器的。

2.参数传递

Html：

<div id="app"> <!-- sw--> <button v-on:click="eventA">A1</button> <button v-on:click="eventA()">A2</button> <button v-on:click="eventB()">B1</button> <button v-on:click="eventB">B2</button> <button v-on:click="eventB('okk')">B3</button> <button v-on:click="eventC('okkC')">C</button> <button v-on:click="eventD('okkD')">D</button> <button v-on:click="eventD('okkD',$event)">D2</button> </div>

js：

<script> const app=new Vue({ el:'#app', //用于管理要挂载的数据 data:{ //定义数据 message:'Hello world!', }, methods:{ eventA:function () { console.log("alright!"); }, eventB:function (abc) { console.log("-B-"+abc); }, eventC:function (abc,event) { console.log("-C-"+abc+' '+event); }, eventD:function (abc,$event) { console.log("-D-"+abc+' '+$event); }, } }); </script> eventA:function () eventB:function (abc) eventC:function (abc,event) eventD:function (abc,$event)

如上，按钮A对应eventA()方法，以此类推。

一次点击按钮，可以得到如上图结果。当需要参数而未传入参数时，就会出现默认参数event对象。而需要传入event对象时，需要使用“$event”，否则vue会认为其只是一个普通参数，名为event。

3.修饰符

.stop - 调用 event.stopPropagation()，即阻止事件冒泡。.prevent - 调用event.preventDefault()，即提交时不再重载页面。.capture - 添加事件侦听器时使用 capture 模式，即当元素发生冒泡时，先触发带有该修饰符的元素绑定的事件。.self -只当事件是从侦听器绑定的元素本身触发时才触发回调，即只当事件在该元素本身（而不是子元素）触发时才执行相应的操作。.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。.native - 监听组件根元素的原生事件。.once - 只触发一次回调。.left - (2.2.0) 只当点击鼠标左键时触发。.right - (2.2.0) 只当点击鼠标右键时触发。.middle - (2.2.0) 只当点击鼠标中键时触发。.passive - (2.3.0) 以 { passive: true } 模式添加侦听器 语法： <div id="app"> <!-- sw--> <button v-on:click.stop="eventA()">A1</button> </div>

别人的博客，修饰符这里讲的细： https://blog.csdn.net/weixin_42695446/article/details/84680018