Vue.js事件处理

1、v-on指令

用法如下:使用v-on：指令指定其执行的具体内容或者方法名即可。

        <button v-on:click='num++'>giao</button>

简写形式

        <button @click='num++'>giao</button>

随着业务逻辑的增加，这种方式并不适用于我们实际的开发，所以我们实际的开发中，一般把vue中的事件单独定义为一个方法。方法定义在vue中的methods中，如果要在该方法中使用vue的data中的属性时，使用this关键字来调用。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="../vue-2.4.0.js"></script>

</head>

<body>

    <div id="app">

        <p>{{num}}</p>

        <button @click='say()'>giao</button>

    </div>

    <script>

        var vm = new Vue({

            el:'#app',

            data:{

                num : 0

            },

            methods:{

                say(){

                    this.$data.num++;

                }

            }

        });

    </script>

</body>

</html>

如果方法中需要传递参数，或者得到调用方的对象。可以进行如下操作。

其中普通参数直接传入实际参数，在方法中定义形参即可，获取当前被触发的对象使用$event即可。

注意点：

如果事件直接绑定半数名称，那么默认会传递事件对象作为事件函数的第一个参数(就是直接加参数名不加小括号的形式。例如@click='btnClick' )

如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event(例如@click='btnClick(123,345,$event)')

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="../vue-2.4.0.js"></script>

</head>

<body>

    <div id="app">

        <p>{{num}}</p>

        <button @click='say(500,600,$event)'>giao</button>

    </div>

    <script>

        var vm = new Vue({

            el:'#app',

            data:{

                num : 0

            },

            methods:{

                say(p1,p2,event){

                    this.$data.num++;

                    console.log(p1);

                    console.log(p2);

                    console.log(event.target.tagName);

                    console.log(event.target.innerHTML);

                }

            }

        });

    </script>

</body>

</html>

2、事件修饰符

2.1、.stop阻止冒泡

什么是冒泡行为？

如果标签以及其父标签都存在click方法，那么点击子标签会自动再执行其父标签的单击事件。这种现象就叫做冒泡。

如何阻止冒泡？

在vue中，我们可以通过.stop修饰符来实现冒泡的阻止。具体的操作：在子标签中加入@click.stop="eventName()"即可。

2.2、.prevent组织默认行为

什么又是默认行为呢？

在html页面中，我么的很多标签具有它自己本身的功能，例如a标签有点击跳转的功能，那么我们给它指定单击事件的时候就存在一些异议。此时可以使用时间修饰符来阻止它的默认行为。

如何阻止默认行为？

使用.prevent修饰符可以阻止默认行为，具体操作如下：

<a @click.prevent='handle'>跳转</a>

2.3、其他修饰符

在vue中还存在其他的事件修饰符，但是它们不是很常用，我们需要时再去查看即可。

另外事件修饰符还支持串联，例如@click.stop.prevent='handle()'，串联还存在先后顺序。

.capture

.self

.once

.passive

3、按键修饰符（键盘事件修饰符）

vue中不仅有鼠标事件的修饰符，还有键盘事件的修饰符。常用的如下

3.1、.enter修饰符

用法如下：<input type="button" @keyup.enter='handleSubmit()' v-model='pwd'>

3.2、.delete修饰符

这个修饰键，一般用于清空当前输入框，用法如下：<input type='input' @keyup.delete='handle()'>

其他按键修饰符

vue还提供了这些按键修饰符，这里不做过多的演示，需要的话可以去官网了解。

.tab

.esc

.up

.down

.space

.left

.right

自定义按键修饰符。

除了vue提供的这些按键修饰符以外，我们还可以使用config.keyCodes对象来自定义按键修饰符。

首先通过@keyup='handle'给标签添加一个键盘弹起事件，然后在该方法的方法体内获取按键的keyCode

handle:function(){concole.log(event.keyCode);}可以得到需要的按键的键码，

然后使用@keyup.键码='handle'即可。但是这样可读性比较低。所以一般我们使用vue中的自定义按键修饰符，方法如下：在script标签中写上Vue.config.keyCode.aaa= 65 ;此时通过.aaa就可以实现，按下键码为65 的按钮的效果。