目录
前言
Vue事件处理
指令的语法格式
事件绑定指令—v-on
回调函数
前言
我们知道如何在原生js中实现事件绑定，那在vue中如何实现呢？
Vue事件处理
指令的语法格式
<标签 v-指令名：参数名="表达式">{{插值语法}}</标签>
其中表达式位置可以写：常量、js表达式、被Vue实例管理
事件绑定指令—v-on
语法格式：
v-on:事件名="表达式"
简写：
v-on: ==> @ 换成@即可
例：v-on:click 简写 @click
例：
v-on:click="表达式"表示当鼠标单击事件后，执行表达式
v-on:keydown="表达式"表示当键盘按下事件后，执行表达式
回调函数
在vue中执行函数需要在Vue实例的配置项methods中进行定义
methods是一个对象：{}
如下例：
<button v-on:click="sayHello()">{{msg}}</button><script>const vm = new Vue({el:'button',data:{msg:'hello'},methods:{sayHello:function(){alert('hello')}}})</script>
在methods中，可以定义多个回调函数
绑定的回调函数，如果函数调用时不需要传递任何参数，小括号()可以省略
<button v-on:click="sayHello">{{msg}}</button>而在Vue调用回调函数的时候，会自动给回调函数传递一个参数对象,这个对象是：当前发生的事件对象
例
在methods中
sayHello:function(e){console.log(e.target.innerText);}
打印出当前发生的事件对象
如果传递了参数，只需要在参数上使用$event占位符,Vue框架看到这个$event占位符之后,自动将当前事件以对象形式传递过去，函数也需要形参来接收
<button @click="sayHello('xiaoWu',$event)">{{msg}}</button><script>const vm = new Vue({el:'button',data:{msg:'hello'},methods:{sayHello:function(name,e){console.log(name,e.target.innerText);}}})</script>
