事件修饰符
1、prevent： 阻止默认事件（或在方法中使用e.preventDefault()）
<a href='https://blog.csdn.net/weixin_52993364?type=blog' @click.prevent='showInfo'>点我</a>说明：这样点击后就不会发生地址的跳转
2、stop: 阻止事件冒泡(或在方法中使用e.stopPropagation())
3、once：事件只触发一次
4、capture:使用事件的捕获模式
5、self：只有event.target是当前操作的元素才触发事件，类似于阻止默认事件
6、passive: 事件的默认行为立即执行，无需等待事件回调执行完毕（常用语移动端和平板）
<body>
<ul @wheel.passive='demo' class='list'>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
<script type='text/javascript'>
methods: {
demo() {
for(i = 0; i < 1000; i++) {
console.log('666')
}
console.log('累死了')
}
}
</script>
事件处理
<template>
<button @click="clickme($event, 666)">点我传个数据</button>
</template>
<script>
export default {
data() {
return {}
},
methods: {
clickme(e, number) {
console.log(e.target.innerText, number);
}
}
}
</script>
键盘事件
一、常用的按键别名
1、按下回车enter
<template>
<input type="text" placeholder="按下回车显示输入" @keyup.enter="showInfo">
</template>
<script>
export default {
data() {
return {}
},
methods: {
showInfo(e) {
console.log(e.target.value);
}
}
}
</script>
2、删除 =》delete(捕获‘删除’和‘退格’键)
3、退出 =〉esc
4、空格 =》 space
5、换行 =〉tab （@keydown.tab）
6、上 =》 up
7、下 =〉 down
8、左 =》 left
9、右 =〉 right
二、系统修饰键（ctrl、alt、shift、meta）
（1）配合keyup使用：按下修饰键同时，再按下其他键，随后释放其他键，事件才捕获
（2）配合keydown使用：正常触发事件
三、自定义键名
Vue.config.keyCodes.huiche = 13总结
事件修饰符可以连着写：
阻止默认也阻止冒泡
<a href='http://www.cc.com' @click.stop.prevent='clickme'>点我</a>修饰键，只有按下ctrl+y才可以触发：
<input type="text" placeholder="按下回车显示输入" @keydown.ctrl.y="showInfo">
![Linux awk [-v] {print} 命令](https://img-blog.csdnimg.cn/f270441eb4eb461ea362b05498fc1033.png)
