一,事件的基本使用:
1,使用v-on:xxx 或者 @xxx 绑定事件,其中xxx是事件名。如:v-on:click/@click
2,事件的回调需要配置在methods对象中,最终会在vm上
3,methods中配置的函数,不要用箭头函数,否者this就不是vm了
4,methods中配置的函数,都是被vue所管理的函数,this的指向是vm 或 组件实例对象
5,@click = 'demo' 和 @click = 'demo($event)' 效果一致,但后者可以传参
事件的写法
1, 普通写法 v-on:click 现在点击按钮
<button v-on:click = "showInfo">点我</button>
2, 简写
<button @click = "showInfo1">点我(不传参)</button>
3,不传参
<button @click = "showInfo1">点我(不传参)</button>
4,传参
<button @click = "showInfo2($event,66)">点我(传参)</button>
事件的回调需要配置在methods对象中的写法
methods:{
不传参的写法:
showInfo1(event){ //event事件对象
console.log(event), //pointerEvent
console.log(event.target), //事件目标(元素botton)
console.log(event.target.innerText), //显示元素里面的文字
console.log(this), //这个里面的this就是vm
console.log(this === vm), //证明this就是vm的途径
alert('您好!')
},
在methods对象里不要用箭头函数
// showInfo:(event)=>{ //在vue里面最好都用普通函数,箭头函数在此处不是最好的方法
// console.log(this) //这里面的this就不是vm的,而是全局window的
// }
传参的写法:
showInfo2(event,number){
console.log(event,number),
alert('真棒')
}
}
二,事件修饰符
1,prevent:阻止默认事件(阻止跳转到指定的网页)(常用)
2,stop:阻止事件冒泡(常用)
3,once:事件只触发一次(常用)
4,capture:使用事件的捕获模式
5,self:只有event.target是当前操作的元素时才触发事件
6,passive:事件的默认行为立即执行,无需等待事件回调执行完毕;(移动端用的比较多,多用于平板跟手机;@wheel.passive;@scroll可以不用)
分别演示一下事件修饰符的使用方法:
补充: 阻止冒泡跟阻止跳转可以一起使用,@click.stop.prevent可以同时进行,位子可以随机放
<div class="demo1" @click = "showInfo">
<a href="http://www.baidu.com" @click.stop.prevent = "showInfo">点击我</a>
</div>
三、键盘事件
1,vue中常用的按键别名
回车=>enter
删除=>delete (捕获:删除键 和 退格键)
退出=>esc
空格=>space
换行=>tab(特殊,必须配合keydown.tab去使用)
上=>up
下=>down
左=>left
右=>right
2,vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为kebab-case(短横线命名)
3,系统修饰键(用法特殊):ctrl,alt,shift,meta(win键)
(1)配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才会触发;如按ctrl+y 松掉y才会触发事件
(2)配合keydown使用:正常触发事件
4,也可以使用keycode去指定具体的按键(不推荐)
5,vue.config.keycodes.自定义键名 = 键码,可以去定制按键别名(不推荐)
分别演示一下键盘事件的使用方法:
补充:系统修饰键ctrl.y这样的神仙组合避免啦ctrl.跟任何字母都能触发的情况
<div id="root">
<input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y = 'showInfo'>
</div>
感谢观看,欢迎随时反馈问题。