©2020-2024 ioDraw All rights reserved,
Privacy Policy
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"