4.Vue中的事件处理，键盘事件，事件处理，事件修饰符

本人坚持更新C语言，数据结构，操作系统，前端知识，可以收藏＋关注随时了解 

---

目录

        1.键盘事件

        2.事件处理

        3.事件修饰符 

---

1.键盘事件

 Vue中常用的按键别名:

        回车 => enter

        删除 => delete (删除和退格)

        退出 => esc

        空格 => space

        换行 => tab(特殊,必须必须配合keydown)

        上 => up

        下 => down

        左 => left

        右 => right

    系统修饰符(用法特殊):ctrl,alt,shift,meta(window)

        1.配合keydown使用

        2.使用keyup得按下其他键,然后再松那个键才行

举一个按下回车的事件 

    

        
Welcome to {{name}}
        
    
    

 

按下回车弹出提示 

 2.事件处理

 事件的基本使用

        1.使用v-on:xxx or @xxx 绑定事件,其中xxx是事件名

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

        3.method中配置的函数不能用箭头函数

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

        ⭐事件也可以配置在data当中,但是这样会加重Vue的负担,data中的数据会进行数据代理和数据劫持

        如果把函数放在data中,会对函数也进行代理,但是函数并不需要进行数据代理

    

        
欢迎来到{{name}}学习
        click me
        
        click me
        click me

        
    

    

3.事件修饰符 

Vue中的事件修饰符：

        1.prevent:阻止默认事件(常用)

        2.stop:阻止事件冒泡(常用)

        3.once:事件只触发一次(常用)

        4.capture:使用事件的捕获模式,（点击子元素，会发生冒泡事件的逆过程）

        5.self:只有event.target是当前操作的元素时才触发事件

        6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕

        ⭐事件修饰符可以连用

    

        
欢迎来到{{name}}学习
        百度
        

            click me(stop)
        
        
        click me(once)

        
        

            

                capture
            
        

        
        
        

            click me(self)
        

    
    

 我们可以复制一下代码，来试试修饰符的作用