1.事件使用方法

Vue中添加事件，所谓事件其实也就是定义函数，然后调用即可。在Vue实例当中添加配置项methods：{}即可，在调用的时候使用v-on指令，如下所示：

 <div id="root">
        <h1>欢迎来到{{name}}</h1>
        
        <!--  v-on:click也可以写成@click   -->
        
        <button v-on:click="showInfo">
            点我提示信息
        </button>

    </div>
    <script>

        new Vue({
            el: '#root',
            data: {
                name: '硅谷'
            },
            
            //添加methods配置项，在里面定义事件
            methods: {
                showInfo() {

                    alert('弹窗成功')
                }
            }
        })
    </script>

2.函数中的参数传递

 methods: {
     showInfo(event) {
     console.log(event);
     }
}

showInfo被button按钮调用，默认传来一个参数，用event作为形参接收，可以打印出来

被Vue管理的函数，其this就是Vue实例，但是不要写成箭头函数的形式，写普通函数即可。

在调用函数的地方可以直接传入参数，普通参数直接传即可，如果想同时传参数+事件，那么需要按如下做：

<button v-on:click="showInfo(66,$event)">   
            点我提示信息
</button>

接收的时候按顺序接收即可

 showInfo(a, event) {
     console.log(a);
     console.log(event);
}

3.总结

事件的基本使用：

1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；

2.事件的回调需要配置在methods对象中，最终会在vm上；

3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；

4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象；

5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；

06Vue事件

1.事件使用方法

2.函数中的参数传递

3.总结