Vue中的事件处理详情

目录

• 事件处理
• 事件修饰符
• 键盘事件
• 使用技巧

事件处理

给按钮绑定一个 click 事件，点击弹出提示信息

	
    点我
    
    点我

	new Vue({
        el:'#root',
        methods:{
            showInfo(){
                alert('Hello')
            }
        }
    })

 我们来增加参数：

点我

showInfo(event,name){
	//console.log(event.target.innerHTML);//点我
	//console.log(this);//此处的this是vm（vue实例对象）
	//所有被vue管理的函数最好都写成普通函数，不要写成箭头函数
	//否则this就变成了window
	 alert('Hello '+name)
}

 如果只写 showInfo('world') 那么方法中的 event 参数就不能用了，所以我们加了一个 $event来占位

事件的基本使用 ：

• 1.使用v-on :xxx或@xxx绑定事件，其中xxx是事件名
• 2.事件的回调需要配置在 methods 对象中，最终会在 vm 上
• 3.methods 中配置的函数，不要用箭头函数！否则 this 就不是 vm 了
• 4.methods 中配置的函数，都是被Vue 所管理的函数，this 的指向是 vm 或组件实例对象
• 5.@click="demo”和@click="demo($event)”效果一致，但后者可以传参

事件修饰符

Vue中的事件修饰符

• 1.prevent: 阻止默认事件
• 2.stop:阻止事件冒泡
• 3.once:事件只触发一次
• 4.capture:使用事件的捕获模式
• 5.self:只有 event.target 是当前操作的元素时才触发事件
• 6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕

    
    
    
    



    
    点我提示信息
    
    

        点我提示信息
    
    
    点我提示信息
    
    
    
    

        div1
        

            div2
        
    
    
    
    
    
    

        点我提示信息
    
    
    
    
    
    
    

        
1
        
2
        
3
        
4
    

键盘事件

给 input 绑定一个 keyup 事件，输入文字按下回车，打印输入内容，可以这样写：

new Vue({
        el:'#root',
        methods:{
            showInfo(e){
                //判断是否回车
                if(e.keyCode !== 13) return
                console.log(e.target.value);
            }
        }
    })

但我们也可以使用回车键的别名：

new Vue({
        el:'#root',
        methods:{
            showInfo(e){
                console.log(e.target.value);
            }
        }
    })

1、Vue中常用的按键别名 回车 =>enter 删除=>delete(捕获"删除”和“退格”键) 退出=>esc 空格=>space 换行=> tab（特殊，必须配合 keydown 去使用） 上=> up 下=>down 左=>left 右=>right

2、Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为 kebab-case（短横线命名)

我们可以通过输出 e.key 和 e.keyCode 来查看按键原始值

showInfo(e){
	console.log(e.key,e.keyCode);
}

所以回车键也可以这样写 @keyup.Enter="showInfo" 需要注意的是切换大小写的 CapsLock 需要这样写 @keyup.caps-lock="showInfo"

3、系统修饰键(用法特殊）：ctrl、alt、 shift、meta(win)

(1).配合 keyup 使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发(2).配合keydown使用：正常触发事件

例如我们需要按下 ctrl 时执行 showInfo 方法

运行程序，单纯按 ctrl 是不管用的，只有 ctrl 和其他按键一起按下，例如 ctrl+z 然后再放开 z ，showInfo 方法才能执行

4、也可以使用keyCode去指定具体的按键（不推荐)

绑定回车按键

5.Vue.config.keyCodes.自定义键名=键码,可以去定制按键别名（不推荐）

Vue.config.keyCodes.huiche = 13

使用技巧

1、事件修饰符可以写多个

	点我提示信息

运行结果是只会提示 1 次信息，不会跳转

2、之前说了系统修饰符配合 keyup 使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。如果就是需要两个按键同时触发事件可以这样写： 例如，需要同时按下 ctrl+y 才执行 showInfo

到此这篇关于Vue中的事件处理详情的文章就介绍到这了,更多相关Vue事件处理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！