Vue核心技术-7,方法,事件和修饰符

###一,前言

之前在介绍Vue的基本使用时,已经接触了Vue事件处理的概念v-on
通过v-on:click绑定methods选项中对应的方法,实现事件的监听
这一篇将详细介绍方法,事件和Vue提供的事件修饰符

###二,methods定义事件

监听一个按钮的点击事件,使每次点击按钮时,页面计数器+1
点击次数:{{counter}}

运行结果:

Vue核心技术-7,方法,事件和修饰符_第1张图片

事件效果:

当点击+1按钮时,计数器值+1,当点击+10按钮时,计数器值+10

分析:

Vue中的事件方法可以在methods中进行定义
通过@click(同v-on:click,@是v-on的语法糖)对methods中的方法进行绑定实现事件监听
这样通过HTML可以知道调用的方法名,将逻辑与DOM解耦,便于维护
当ViewModel销毁时,所有事件处理器都会自动删除,无需手动清理

注意:

在Vue中@click调用的方法名后可以不跟括号"()"
此时,如果该方法有参数,默认会将原生事件对象event传入
Vue中提供了一个特殊变量$event,用于访问原生DOM事件

###三,$event变量

以一个a标签跳转url为例:



                    
                    

你可能感兴趣的:(Vue,Vue核心技术,方法,事件,修饰符,Vue)