Vue中的事件绑定【3】
1.鼠标事件的绑定
1.概述：
在js中我们已经了解过了事件的绑定方式（获取元素节点后，对元素节点进行事件绑定），实际上我们可以直接在标签元素上面绑定事件，并在Vue实例对象中添加一个methods属性，在此属性中添加对应的回调函数（即触发该事件时执行的内容）；
2.语法：
v-on:事件名="回调函数"
例： 在button元素上绑定单击鼠标事件<button v-on:click="showInfo">点击显示提示</button>简写：@事件名="回调函数"
例： <button @click="showInfo">点击显示提示</button>
let vm = new Vue({methods: {// 写方法showInfo(event) {console.log('执行了showInfo：', event,this.name)},}})
3.案例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="root"><h2>Hello,{{name}}</h2><!-- 事件的绑定 --><!-- 指令 v-on:事件名="函数" --><button v-on:click="showInfo">点击显示提示</button><br/><!-- 简写 事件 v-on --- @ --><!-- $event 表示 此处是事件对象 --><button @click="showInfo2($event,'我是消息')">点击显示提示</button></div>
<script src="vue/vue.js"></script>
<script>let vm = new Vue({data() {return {name: '猿究院'}},methods: {// 写方法showInfo(event) {console.log('执行了showInfo：', event,this.name)},showInfo2(event, msg) {console.log('执行了showInfo2：', event, msg)}}})//绑定容器vm.$mount("#root");
</script></body>
</html>
说明：在上述案例中有一个特殊的变量参数$event,他被作为参数传递给了showInfo2回调函数；
- 这个
$event代表了触发<button @click="showInfo2($event,'我是消息')">这个点击事件的原生 DOM 事件对象。 - 通过这个事件对象，可以获取到与该事件相关的各种信息，比如事件类型、事件目标、鼠标位置（如果是鼠标事件）等。
- 在事件被触发时，触发该事件的原生DOM对象会作为第一个参数传递到事件绑定函数中，如果事件绑定的函数本身就有参数，则需要在绑定函数时，函数的第一个参数用$event进行占位，后面的参数为函数本身的参数，如果不进行占位，则该原生DOM对象无法被传递到绑定的函数中
4.总结：
- 可以使用v-on：事件名 或者 @事件名 绑定事件
- 事件的回调函数必须写在 methods 对象下 最终会出现在vm上
- 注意：methods对象中的方法 不能使用箭头函数 （否则this就不是vm了）
- $event 占位符 表示此处为触发事件的原生DOM对象
2.键盘事件的绑定：
1.概述：
键盘事件的绑定与鼠标事件绑定的方式类似，也是通过v-on：事件名 或者 @事件名 绑定事件。同时可以通过常用的按键修饰符绑定特定的键盘事件
2.常见的键盘修饰符：
.enter：回车键。.tab：制表键。.delete（捕获 “删除” 和 “退格” 键）。.esc：Escape 键。.space：空格键。.up、.down、.left、.right：方向键。
3.案例分析：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--2.准备一个容器-->
<div id="root">
<!-- input输入框绑定键盘按下回车时触发事件，事件绑定了回调函数showinfo --><input type="text" @keydown.enter="showInfo" v-model="name" placeholder="请输入...."/><!-- enter 回车 delete 删除 退格 esc space tab up down left right ....-->
</div>
<!--1.引入Vue js 文件-->
<script src="vue/vue.js"></script>
<script type="text/javascript">//3.创建Vue对象let vm = new Vue({data() {return {name: '测试数据'}},methods: {showInfo(event) {//this 》》》》 Vue实例//打印触发该事件的键盘按键的键名，键的数字码，以及触发事件的DOM对象的name属性值console.log(event.key, event.keyCode,this.name)//打印触发事件的目标元素的当前值，等同于this.nameconsole.log(event.target.value)}}}).$mount("#root");
</script>
</body>
</html>
说明：在上述案例中，我们给input标签元素绑定了一个键盘按下时触发的事件，并绑定了此事件的回调函数showinfo，将触发该事件的原生DOM对象传递到了回调函数中，在回调函数中，输出展示了一些相关信息，测试结果如上图所示；