8、Vue指令v-on事件绑定

---

1、v-on的介绍及使用

v-on用于绑定一个或多个事件，事件函数的参数名代表了在方法对象methods中定义的函数。
语法；v-on：事件名=”方法名”
简写：@ 事件名=”方法名”

<div id="app">
        <button v-on:click="method">按钮</button>
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
               method:function(){
                   console.log("a")
               }
            }
        })
    </script>

这里我们也可以使用简写的方法：

<button @click="method">按钮</button>

2、v-on事件参数

2.1、v-on的使用

有时，根据业务要求，事件方法需要传递参数，形式有如下3种:
①如果传递就使用传递的(有传递实参)
②如果没有声明() ，形参就是“事件对象”
③如果声明(),还没有传递实参，形参就是undefined
举例：绑定事件处理函数并传参

举例：

<div id="app">
        <button v-on:click="test">没加括号</button>
        <button v-on:click="test()">加了括号</button>
        <button v-on:click="test(123)">加括号传入参数123</button>
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
             
            },
            methods:{//methods是用来存放函数的，这里的函数会自动成为vue实例的方法
                 test(ev){
                     console.log(ev)//事件对象
                 }
            }
        })
    </script>

我们从上往下依次点击，看到最终输出的结果为MouseEvent，undefined，123，由此可以知道当不加括号绑定事件，默认情况下第一个形参就是事件对象。加了括号，无论传不传参数，形参默认就是要接收你传入的参数，因此打印undefined。

2.2、手动传递事件对象

<div id="app">
        <button @click="myev('haha' , '手动传递事件对象')">点击</button>
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
             
            },
            methods:{//methods是用来存放函数的，这里的函数会自动成为vue实例的方法
                 myev(ev,str){
                    console.log(str);
                    console.log('ev',ev);
                 }
            }
        })

当我们想要查看v-on中传递事件的对象时，我们可以使用jQuery中的方法$event来查看。比如在上面的例子中，我们可以使用下面的方法来查看。

<div id="app">
        <button @click="myev($event , '手动传递事件对象')">点击</button>
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
             
            },
            methods:{//methods是用来存放函数的，这里的函数会自动成为vue实例的方法
                 myev(ev,str){
                    console.log(str);
                    console.log('ev',ev);
                 }
            }
        })
    </script>

2.3、使用v-on绑定多个事件

各个事件用逗号隔开。

<div id="app">
        <button v-on="{click:click,dblclick:dbclick}">点击</button>
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
             
            },
            methods:{//methods是用来存放函数的，这里的函数会自动成为vue实例的方法
                click(){
                    console.log("我被点击了")
                },
                dbclick(){
                    console.log("我被双击了")
                }
            }
        })

这里需要注意的是使用v-on来绑定多个事件对象时，应该用{}将各个事件扩起来，即使用v-on={}的形式，同时各个事件用逗号隔开。

3、v-on修饰符

事件指令提供了多种修饰符，可以快捷的阻止默认事件，阻止冒泡等等。
通用修饰符：这些修饰符是所有事件都通用的。
通用修饰符：