Vue提供了v-on指令来监听DOM事件,在事件绑定上,类似原生JavaScript的onclick事件写法,也是在HTML上进行监听。
基本用法
Vue中的事件绑定,使用v-on:事件名=函数名来完成,这里函数名定义在Vue实例的methods对象中,Vue实例可以直接访问其中的方法。
语法规则:
v-on:事件名.修饰符 = 方法名()|方法名|简单的JS表达式 简写:@事件名.修饰符 = 方法名()|方法名|简单的JS表达式 事件名:click|keydown|keyup|mouseover|mouseout|自定义事件名
1.直接使用
直接在标签中书写js方法,代码如下:注意:@click等同于v-on:click,是一个语法糖。
2.调用methods的方法
通过v-on绑定实例选项属性methods中的方法作为事件的处理器
单击button按钮,即可触发say函数,弹出alert框’Say Hello’。
(1)方法传参,方法直接在调用时在方法内传入参数,代码如下:
(2)传入事件对象,代码如下:
修饰符
Vue为指令v-on提供了多个修饰符,方便我们处理一些DOM事件的细节,Vue主要的修饰符如下。
(1).top:阻止事件继续传播,即阻止它的捕获和冒泡过程。代码如下:
@click.stop='handle()' //只要在事件后面加上.stop就可以阻止事件冒泡
如例所示单击“内部单击”按钮,阻止了冒泡过程,即只执行inner这个方法,如果不加.stop,则先执行inner方法,然后执行outer方法,即通过了冒泡这个过程。
(2).prevent:阻止默认事件。代码如下:
@click.prevent='handle()' //只要在事件后面加上.prevent就可以阻止默认事件
如下阻止了a标签的默认刷新:
(3).capture:添加事件监听器时使用事件捕获模式,即在捕获模式下触发。代码如下:
@click.capture='handle()'
如下实例在单击最里层的“单击6”时,outer方法先执行,因为outer方法在捕获模式执行,先于冒泡事件。按下列执行顺序执行:outer→set→inner,因为后两个还是冒泡模式下触发的事件,代码如下:
(4).self:当前元素自身是触发处理函数时才会触发函数。
原理是根据event.target确定是否为当前元素本身,以此来决定是否触发事件/函数。
如下示例,如果单击“内部单击”按钮,冒泡不会执行outer方法,因为event.target指的是内部单击的DOM元素,而不是外部单击的,所以不会触发自己的单击事件,代码如下:
(5).once:只触发一次。代码如下:
(2).prevent:阻止默认事件。代码如下:
@click.prevent='handle()' //只要在事件后面加上.prevent就可以阻止默认事件
如下阻止了a标签的默认刷新:
(3).capture:添加事件监听器时使用事件捕获模式,即在捕获模式下触发。代码如下:
@click.capture='handle()'
如下实例在单击最里层的“单击6”时,outer方法先执行,因为outer方法在捕获模式执行,先于冒泡事件。按下列执行顺序执行:outer→set→inner,因为后两个还是冒泡模式下触发的事件,代码如下:
(4).self:当前元素自身是触发处理函数时才会触发函数。
原理是根据event.target确定是否为当前元素本身,以此来决定是否触发事件/函数。
如下示例,如果单击“内部单击”按钮,冒泡不会执行outer方法,因为event.target指的是内部单击的DOM元素,而不是外部单击的,所以不会触发自己的单击事件,代码如下:
(5).once:只触发一次。代码如下:
(6)键盘事件。
方式一:@keydown=‘show($event)’