vue事件绑定

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）’