Vue09 事件

1 事件语法

　　Vue 中的事件绑定可以使用 v-on 指令进行处理，可以把 v-on 绑定事件简写为 @。

"root">
    "showinfo($event,123)">点我
    "showinfo($event,123)">点我2

2 事件方法

2.1 Vue示例对象里面有个属性，methods，所有事件方法都放到里面

2.2 注意事项

　　methods里面写函数，不要用箭头函数。否则在里面使用this就不是vm实例了。正常的函数，里面this是指向vm或组件实例对象的

　　普通函数中的this指向 它的直接调用者
　　箭头函数中的this指向 它的外层调用者

2.2.1 使用一般函数，this是vm对象

 

2.2.2 使用箭头函数，this是window对象

 

3 关于事件方法的参数说明

3.1 当没有参数需要传时

　　　　@click="方法名"

　　　　虽然我们没有传参数，但是默认会传一个事件实例对象，在事件方法处可以接收到，当然也可以不接收

3.2 需要传参数时

　　　　@click="方法名(参数值，参数值)"

　　　　注意，这个时候，如果需要event实例对象，需要加到方法参数列表里面，采用$event

3.3 示例

"root">
    "showinfo">点我
    "showinfo2($event,123)">点我2

4 事件修饰符

4.1 Vue官网介绍

　　https://cn.vuejs.org/v2/api/#v-on

4.2 事件的处理过程

　　事件流分为三个阶段：捕获、触发、冒泡(事件方法执行)，默认行为执行。触发是从DOM 树的外层向里捕获，从DOM 树的里层向外冒泡。

　　关于默认行为补充说明：

　　　　比如一个a标签，里面一个网址，点击它的默认行为就是跳转。我给他一个点击事件，那么点它的时候，会先执行点击事件，执行完成后，执行默认行为，也就是跳转

"root" >
    
"showinfo(123)"  class="d1">
        
"showinfo(456)" class="d2">

        
    

 点击红色区域，发现先打印456，再打印123，说明冒泡是从里往外。

5 键盘事件

5.1 简介

　　事件触发不仅仅只有鼠标，Vue 同样提供了一系列的修饰符来方便键盘事件的编写。

　　键盘事件的绑定同样支持 v-on 指令和 @ 快捷写法，Vue 内部提供了键别名和按键码来绑定不同的键

 

5.2 官网介绍

　　https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E7%A0%81

5.3 两个事件

　　@keyup ：按下键松开后触发(通常使用)

　　@keydown：按下键立即触发

5.4 格式

　　@keyup.按键名.按键名="函数"

　　可以是一个按键和多个按键。多个按键表示多个按键配合使用时触发

    
class="container">
        

            for="user_name">姓名

                
                "text" v-model="uname" @keyup.enter.shift.delete="clear" name="user_name">
            

            for="password">密码
                
                "password" v-model="upwd" @keyup.enter="submit" name="password">
            

            "button" @click.prevent="submit" value="提交">
        
    

    
    

如第 7 行代码所示，当多个按键一起按才触发时，链式调用即可。

5.5 按键名和按键编码

　　https://www.cnblogs.com/yiven/p/7118056.html

　　@keyup后面写的.xxx，这个xxx是键盘名，但是却不全是电脑上面标的文字。

　　可以通过e.key来获取按键的名称,也可以通过e.keyCode获取键盘编码

    
class="container">
        

            for="user_name">姓名

                
                "text" v-model="uname" @keyup="show" name="user_name">
            

        
    


    

　　

5.6 按键别名

5.6.1 Vue设置的别名

　　为了我们编写方便，vue为常用按键起了别名，直接使用别名即可

 

5.6.2 自定义别名

1） 格式

　　Vue.config.keyCodes.别名=按键编码

2）示例

　　Backspace的编码是8

　

 　　给它取别名为bs

Vue.config.keyCodes.bs = 8

    
class="container">
        

            for="user_name">姓名

                
                "text" v-model="uname" @keyup.bs="show" name="user_name">