v-on指令的基本使用说明你知道吗？

v-on指令的作用

为元素绑定事件。表达式可以是一个方法的名字或一个内联语句

• 事件类型由v-on后面的参数决定
• 在普通元素上时，只能监听原生 DOM 事件
• v-on可以简写为@

语法示例

v-on绑定事件时，处理函数的定义

用户自定义函数应该在methods中定义

• methods是实例中单独的结构，主要用于定义用户自定义函数
• methods中的this指向当前的组件实例，通过this可以访问组件实例的其它成员
• data中的this指向null，意味着无法进行具体的业务处理

v-on绑定事件的参数的传递

1. 可以选择是否传递参数
2. 在指定处理函数的时候可以进行参数的传递
3. 参数传递的细节
   • 如果事件处理函数没有手动的传递参数，那么就会默认传递事件源对象
   • 如果手动的传递了参数，那么默认的事件源对象就不再传递了
   • 如果还想使用事件源对象，则需要手动的传递$event($event名称绝对不能改)
   • $event 是 vue 提供的特殊变量，用来表示原生的事件参数对象 event。$event 可以解决事件参数对象 event 被覆盖的问题

v-on绑定事件时常用的事件(按键)修饰符

1.在事件处理函数中调用 event.preventDefault() 或 event.stopPropagation()，或基于某个按钮进行事件的触发，这些都是非常常见的需求。因此，vue 提供了修饰符的概念，主要有两种(事件修饰符和按键修饰符)，来辅助程序员更方便的对事件的触发进行控制，这里介绍比较常见的几个修饰符