#前端老阿姨成长笔记
事件修饰符
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation()。
Vue.js通过由点(.)表示的指令后缀来调用修饰符。
- 阻止单击事件冒泡
<a v-on:click.stop="doThis" />
- 提交事件不再重载页面
<a v-on:submit.prevent="onSubmit" />
- 修饰符可以串联
<a v-on:click.stop.prevent="doThat" />
- 只有修饰符
<form v-on:submit.prevent/>
- 添加事件侦听器时使用事件捕获模式
<div v-on:click.capture="doThis" />
- 只当事件在该元素本身(而不是子元素)触发时触发回调
<div v-on:click.self="doThat" />
- click 事件只能点击一次,2.1.4版本新增
<a v-on:click.once="doThis" />
按键修饰符
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:
<input v-on:keyup.13="submit">
常见的按键别名:enter、tab、delete (捕获 “删除” 和 “退格” 键)、esc、space、up、down、left、right、ctrl、alt、shift、meta