1. 绑定监听
- 事件的基本使用:
- 使用
v-on:xxx
或 @xxx
绑定事件,其中 xxx 是事件名; - 事件的回调需要配置在
methods
对象中,最终会在 vm 上; methods
中配置的函数,不要用箭头函数!否则this
就不是 vm 了;methods
中配置的函数,都是被Vue所管理的函数,this
的指向是 vm 或 组件实例对象;@click="demo"
和 @click="demo($event)"
效果一致,前者默认传入了时间对象,后者可以传其他参数。
<body>
<div id="root">
<button @click="showInfo1">点我提示信息1(不传参)</button>
<button @click="showInfo2($event,66)">点我提示信息2(传参)</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el:'#root',
methods:{
showInfo1(event){
alert('同学你好!')
},
showInfo2(event,number){
alert(number)
}
}
})
</script>
2. 事件修饰符
prevent
:阻止默认事件(event.preventDefault()
)stop
:阻止事件冒泡(event.stopPropagation()
)once
:事件只触发一次(常用)capture
:使用事件的捕获模式self
:只有event.target
是当前操作的元素时才触发事件passive
:事件的默认行为立即执行,无需等待事件回调执行完毕- 用法:
v-on:xxx.事件修饰符
或@xxx.事件修饰符
- 可以用
.
连接,组合使用
3. 按键修饰符
- Vue中常用的按键别名:
- 回车 =>
enter
- 删除 =>
delete
(捕获“删除”和“退格”键) - 退出 =>
esc
- 空格 =>
space
- 换行 =>
tab
(特殊,必须配合keydown
去使用) - 上 =>
up
- 下 =>
down
- 左 =>
left
- 右 =>
right
- Vue未提供别名的按键,可以使用按键原始的
key
值去绑定,但注意要转为kebab-case
(短横线命名) - 系统修饰键(用法特殊):
ctrl
、alt
、shift
、meta
- 配合
keyup
使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发。 - 配合
keydown
使用:正常触发事件。
- 也可以使用
keyCode
去指定具体的按键(不推荐) Vue.config.keyCodes.自定义键名 = 键码
,可以去定制按键别名