Vue中的事件绑定【3】

1.鼠标事件的绑定

1.概述：

  在js中我们已经了解过了事件的绑定方式（获取元素节点后，对元素节点进行事件绑定），实际上我们可以直接在标签元素上面绑定事件，并在Vue实例对象中添加一个methods属性，在此属性中添加对应的回调函数（即触发该事件时执行的内容）；

2.语法：

   v-on:事件名="回调函数"
例： 在button元素上绑定单击鼠标事件
  点击显示提示
  简写：
   @事件名="回调函数"
例： 点击显示提示

    let vm = new Vue({
        methods: {
            // 写方法
            showInfo(event) {
                console.log('执行了showInfo：', event,this.name)
            },
        }
    })

3.案例：

    
    



    
Hello,{{name}}
    
    
    点击显示提示
     

    
    
    点击显示提示

说明：在上述案例中有一个特殊的变量参数$event,他被作为参数传递给了showInfo2回调函数；

• 这个$event代表了触发这个点击事件的原生 DOM 事件对象。
• 通过这个事件对象，可以获取到与该事件相关的各种信息，比如事件类型、事件目标、鼠标位置（如果是鼠标事件）等。
• 在事件被触发时，触发该事件的原生DOM对象会作为第一个参数传递到事件绑定函数中，如果事件绑定的函数本身就有参数，则需要在绑定函数时，函数的第一个参数用$event进行占位，后面的参数为函数本身的参数，如果不进行占位，则该原生DOM对象无法被传递到绑定的函数中

4.总结：

• 可以使用v-on：事件名 或者 @事件名 绑定事件
• 事件的回调函数必须写在 methods 对象下 最终会出现在vm上
• 注意：methods对象中的方法 不能使用箭头函数 （否则this就不是vm了）
• $event 占位符 表示此处为触发事件的原生DOM对象

2.键盘事件的绑定：

1.概述：

键盘事件的绑定与鼠标事件绑定的方式类似，也是通过v-on：事件名 或者  @事件名 绑定事件。同时可以通过常用的按键修饰符绑定特定的键盘事件

2.常见的键盘修饰符：

1. .enter：回车键。
2. .tab：制表键。
3. .delete（捕获 “删除” 和 “退格” 键）。
4. .esc：Escape 键。
5. .space：空格键。
6. .up、.down、.left、.right：方向键。

3.案例分析：

说明：在上述案例中，我们给input标签元素绑定了一个键盘按下时触发的事件，并绑定了此事件的回调函数showinfo，将触发该事件的原生DOM对象传递到了回调函数中，在回调函数中，输出展示了一些相关信息，测试结果如上图所示；