Vue修饰符（Vue事件修饰符、Vue按键修饰符）

目录

前言

Vue事件修饰符

列举较常用的事件修饰符

.stop

.prevent

.capture

.once

Vue按键修饰符

四个特殊键

获取某个键的按键修饰符

---

前言

本文介绍Vue修饰符，包括Vue事件修饰符以及按键修饰符

Vue事件修饰符

列举较常用的事件修饰符

.stop:             停止事件冒泡        等同于event.stopPropagation()

.prevent:        阻止事件的默认行为        等同于 event.preventDefault()

.capture:        添加事件监听器时使用事件捕获模式

                        添加事件监听器包括两种不同的方式：

                        内到外（事件冒泡模式）、外到内（事件捕获模式）

.once:             事件只发生一次

例

没有任何修饰符的情况下

        

            
                {{msg}}
            
        
    
    

程序会发生冒泡事件，依次在控制台打印出1,2,3

.stop

添加了.stop事件修饰符

        

             //在此处添加stop修饰符,阻止事件冒泡
                {{msg}}
            
        
    

在span标签上添加stop修饰符，控制台打印出1,2就会停止冒泡

.prevent

添加了.prevent事件修饰符

//在原有的代码基础上增加一个超链接
 去百度
//在methods中增加一个函数
 four(){
                    console.log('去百度');
                }

.capture

添加了.capture事件修饰符

内到外，也就是冒泡模式，控制台依次打印出1,2,3

外到内，事件捕获模式，控制台会依次打出3,2,1

 

            
                {{msg}}
            
        

当只给span标签添加capture修饰符时

会优先打印2,其余的会按照默认的进行冒泡

            
                {{msg}}
            
        

.once

添加了.once事件修饰符

没有添加once事件修饰符前，每点击按钮一次，就会触发事件一次，添加了once事件修饰符后

 

            
                {{msg}}
            
        

我们给button添加了once，所以1只会打印一次，其余的会默认冒泡事件触发，答应出2,3

Vue按键修饰符

.enter 回车键

.delete 键

.esc 键

.space 空格键

.up 箭头上键

.dowm 箭头下键

.left 箭头左键

.right 箭头右键

.tab 键 （无法触发keyup事件，只能触发keydown事件） 

四个特殊键

ctrl,alt,shift,meta(也就是win标志，田)

对于keydown事件来说，只需要直接按下对应的键就可以触发

对于keyup时间来说，需要按下对应的键，并且加上按下组合键，然后松开组合键，才可以触发keyup事件.组合键就类似于：ctrl+c、ctrl+x等

        
{{msg}}
        回车键：
       delete键：
        esc键：
        space键：
        up键：
        down键：
        left键：
        right键：
        tab键：
    
    

按下对应的案件后会立即调用函数

获取某个键的按键修饰符

通过event.key获取这个键的真实名字

将这个真是名字以kebab-case风格进行命名 例：pageDown是真实名字，命名后，page-down

        
{{msg}}
       回车键：
    
    

按下回车时，打印出相应的按键