vue中的事件有哪些,vue全局事件
本文主要介绍Vue中事件处理的细节。本文通过将点击事件绑定到按钮来介绍细节。需要的朋友可以参考一下。
目录
一、事件处理二、事件修改器三、键盘事件使用技巧
一、事件处理
将click事件绑定到按钮上，点击会弹出提示信息。
！-普通写作-
按钮v-on:click= showInfo click me/button
！-缩写-
button @ click= showInfo click me/button
新Vue({
el:#root ，
方法：{
showInfo(){
警报(“你好”)
}
}
})
我们来增加参数：
Button @ click=显示信息($ event， world )单击我/button
showInfo(事件，名称){
//console . log(event . target . innerhtml)；//点击我
//console . log(this)；//这里是vm(vue实例对象)
vue管理的所有函数最好写成普通函数，不要写成箭头函数。
//否则，这将成为一个窗口
警报(“你好”名称)
}
如果只写了showInfo(world )，那么方法中的event参数就不能用了，所以我们添加了一个$event来发生。
事件的基本使用:
1.使用v-on :xxx或@xxx绑定事件，其中xxx是事件名称。2.事件的回调需要在方法对象中配置，最终将在vm中配置。3.方法中的函数，不要用箭头函数！否则，这不是一个虚拟机。4.4.methods中配置的函数都是由Vue管理的，这指向vm或者组件实例对象。5.@click=demo 和@click=demo($event)"效果一样，但后者可以通过。
二、事件修饰符
Vue中的事件修饰符
1.prevent:阻止默认事件2.stop:阻止事件冒泡。3.once:事件只触发一次。4.capture:使用事件的捕获模式。5.self:仅当event.target是当前操作的元素时触发事件。6.passive:不等待事件回调结束，立即执行事件的默认行为！声明文档类型
html lang=en
头
meta charset=UTF-8
TitleVue初次见面/title
脚本类型=text/javascript src=。/js/vue.js/script
风格
*{
边距：20px
}
.演示1{
宽度：100px
高度：100px
背景：水绿色；
}
. div1{
填充：5px
背景：天蓝色；
}
. div2{
填充：5px
背景：橙色；
}。列表{
宽度：200px
高度：200px
背景：hotpink
溢出：自动；
}
李{
高度：100px
}
/风格
/头
身体
div id=root
！-阻止默认事件。点击默认消息，然后跳转到百度首页。现在，只会提示消息而不会跳转-
a href= 3359 www . Baidu . com rel= external nofollow rel= external nofollow @ click . prevent= showinfo 单击我的提示/a
！-阻止事件冒泡。最初，当你点击按钮时，会有信息提示。当事件在div上冒泡时，您将再次播放信息。现在你只能弹一次-
div class= demo 1 @ click= showInfo
Button @click.stop=showInfo 单击我的消息/button
/div
！-该事件仅触发一次。原来每次点击都会有提示。现在，你只会被提示一次。如果你再次点击，你将不会被提示-
Button @click.once=showInfo 单击我的消息/button
！-使用事件的捕获模式。当您单击div2时，控制台将输出div2，然后输出div1。因为它从div2冒泡到div1 -
！-事件首先被捕获，然后冒泡-
！-添加中。捕获到div1，那么div1的事件在捕获阶段开始，所以控制台会先输出div1，再输出div2 -
div class= div 1 @ click . capture= showMsg( div 1 )
div1
div class= div 2 @ click= showMsg( div 2 )
div2
/div
/div
！-仅当event.target是当前操作的元素时，才会触发事件-
！-会提示信息两次。如果在方法中输出event.target，按钮-将输出两次-
！-现在。将self添加到div1。当按钮被点击时，click事件冒泡到div1并触发div1-的点击
！-但是click的event.target是button，而不是div1，所以这个冒泡的click不会被执行-
div class= demo 1 @ click . self= showInfo
Button @click=showInfo 单击我的消息/button
/div
！-立即执行事件的默认行为，而不等待事件回调完成-
！- scroll是页面滚动条滚动触发的事件，wheel是鼠标滚轮滚动触发的事件-
！-一旦滚动条到达底部，滑动鼠标滚轮继续滚动，滚轮会一直触发，但滚动不会-
！- @wheel当轮子滚动时，执行演示。演示结束后，页面上的滚动条向下滚动-
！-@添加后的轮子。被动，当滚轮滚动时，滚轮会先执行，不需要等待演示-
ul @ wheel . passive= demo class= list
li1/李
li2/李
李/李
li4/李
/ul
/div
脚本类型=文本/javascript
Vue.config.productionTip=false
新Vue({
el:#root ，
方法：{
showInfo(e){
警报(“你好”)
//console . log(e . target)；
},
showMsg(res){
console . log(RES)；
},
演示(){
for(设I=0；i100000i ){
console . log( # )；
}
console . log(‘累~ ~！);
}
}
})
/脚本
/body
/html
三、键盘事件
将keyup事件绑定到input，按enter键输入文本，并打印输入内容。你可以这样写：
Type= text placeholder=按enter键输入 @keyup=showInfo
新Vue({
el:#root ，
方法：{
showInfo(e){
//确定是否进入。
if(e.keyCode！==13)返回
console . log(e . target . value)；
}
}
})
但我们也可以使用回车键的别名：
Type= text placeholder=按enter键输入 @keyup.enter=showInfo
新Vue({
el:#root ，
方法：{
showInfo(e){
console . log(e . target . value)；
}
}
})
1、Vue中常用的按键别名Enter=Enter Delete=Delete(捕获“删除”和“退格”键)Exit=esc space=space newline=tab(特殊，必须与keydown一起使用)Up=up=down Left=left Right=right
2、Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为 kebab-case（短横线命名)
我们可以通过输出e.key和e.keyCode来查看原始键值
showInfo(e){
console.log(e.key，e . key code)；
}
所以回车键也可以这么写@keyup。Enter=showInfo 。需要注意的是，切换大小写的CapsLock需要这样写@keyup.caps-lock=showInfo
3、系统修饰键(用法特殊）：ctrl、alt、shift、meta
(1).与keyup一起使用：当按下修饰键时，会按下其他键，然后在触发事件之前释放其他键(2)。与keydown一起使用：事件正常触发。
例如，我们需要在按ctrl键时执行showInfo方法
Type= text placeholder=按enter键输入 @keyup.ctrl=showInfo
要运行程序，简单地按ctrl不起作用。只有当ctrl和其他键(比如ctrl z)一起按下，然后释放Z，才能执行showInfo方法。
(win)
绑定回车键
Type= text placeholder=按enter键输入 @keyup.13=showInfo
4、也可以使用keyCode去指定具体的按键（不推荐)
Type= text placeholder=按enter键输入 @keyup.huiche=showInfo
Vue.config.keyCodes.huiche=13
使用技巧
5.Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名（不推荐）
div class= demo 1 @ click= showInfo
a href= 3359 www . Baidu . com rel= externalnofowl rel= externalnofowl @ click . stop . prevent= showinfo 单击我的提示/a
/div
1、事件修饰符可以写多个
2.前面说过，系统修饰键与keyup一起使用：在按下修饰键的同时，按下其他键，然后在事件被触发之前释放其他键。如果需要两个键同时触发事件，可以这样写：比如需要同时按ctrl y执行showInfo。
Type= text placeholder=按enter键输入 @keyup.ctrl.y=showInfo
关于Vue中事件处理细节的这篇文章到此为止。有关Vue事件处理的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。