vue中点击事件或者是其他的事件可以通过在事件中添加$event进行对标签元素的dom获取或者修改标签指的属性等等。
event.srcElement就是当前这个标签元素,可以根据此属性来获取当前点击事件的标签元素。
也可以通过$event获取标签自定义的属性值
1.Vue事件处理
<div id='div1'>
<button v-on:click="showInfo1">提示信息1</button>
<button @click="showInfo2($event,666)">提示信息2</button>
//@是v-on:的简写形式
<div>
<script>
const vm=new Vue({
el:'#div1',
data:{},
methods:{
shoeInfo1(event){ //不传参默认第一个返回值是event
console.log(event)
}
shoeInfo2(event,num){ //传参占用event的位置,所以button中必须显式把$event写出来
console.log(event,num)
}
}
})
</script>
事件的基本使用:
1.使用v-on:xxx或@xxx绑定事件,其中xxx是事件名;
2.事件的回调需要配置在methods对象中、最终会在vm 上;
3.methods中配置的函数,不要用箭头函数!否则this就不是vm了;
4.methods中配置的函数,都是被Vue所管理的函数,this的指向是vm或组件实例对象;
5.@click="demo”和@click="demo($event)"效果一致,但后者可以传参;
2.Vue 事件修饰符
1.prevent: 阻止默认事件(常用);
2.stop:阻止事件冒泡(常用);
3.once:事件只触发一次(常用);
4.capture:使用事件的捕获模式;
5.self:只有event.target是当前操作的元素时才触发事件;
6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕;
使用方法:@click.prevent="showInfo"
3.键盘事件
1.Vue中常用的按键别名:
回车=> enter
删除=>delete(捕获“删除”和“退格”键)
退出=>esc
空格=>space
换行=> tab(需要配合keydown使用 ,ctrl、alt、shift、meta 也都需要)
上 =>up
下 => down
左=> left
右=> right
使用方法:.enter
<input type="text" placeholder="按下回车提示输入内容" @keyup.enter="showInfo">
<script>
const vm=new Vue({
el:'#div1',
data:{},
methods:{
shoeInfo(event){ //不传参默认第一个返回值是event
console.log(event.target.value)
//console.log(e.key) //Enter
//console.log(e.keyCode) //13
}
}
})
2.Vue未提供别名的按键,可以使用按健原始的key值去绑定,但注意要转为kebab-case(短横线命名)
3.系统修饰键(用法特殊):ctr1、alt、shift、meta
(1).配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发。
(2).配合keydown使用:正常触发事件。
4.也可以使用keyCode去指定具体的按键(不推荐)
5.Vue.config.keyCodes.自定义键名=键码,可以去定制按键别名
4.事件总结
1)同时阻止默认事件和阻止冒泡:
@click.prevent.stop="showInfo" 或者@click.stop.prevent="showInfo" 能达到同样的效果
2)同时按下ctrl+a才能触发
@keyup.ctrl.a="showInfo"