Vue中如何快速掌握事件绑定技巧？

本文共计2248个文字，预计阅读时间需要9分钟。

目录

一、监听事件

二、事件修饰符

1. stop修饰符 2. capture修饰符 3. self修饰符 4. prevent修饰符 5. 键盘事件修饰符 6. 鼠标事件修饰符

三、监听事件概述

目录

• 一、监听事件
• 二、事件修饰符
• 1、stop修饰符阻止事件冒泡
• 2、capture修饰符
• 3、self修饰符
• 4、prevent修饰符
• 5、键盘事件修饰符
• 6、鼠标事件修饰符

一、监听事件

监听事件一般使用的是v-on指令，可以在JavaScript代码中将v-on直接将写在代码上面，语法是：v-on:你所定的事件名=‘代码’，v-on指令可以接收到函数的调用，并且将其分成是无参数调用函数还是有参数调用函数。当然v-on函数可以简写成@+事件名的写法，很方便。

在初始化vue对象的时候要申明事件调用的函数，初始化对象的时候，在传递的对象参数中加入一个methods属性，这样才可以在methods属性申明的事件调用函数。

v-on指令是可以起到绑定元素所有的事件的作用，而且每一个函数都有对应的事件，只要通过v-on对时间进行绑定才能进行函数的监听事件。