修饰符(Modifiers)是以半角句号.指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。
.prevent: 提交事件不再重载页面
.stop: 阻止单击事件冒泡
.self: 当事件发生在该元素本身而不是子元素的时候会触发
.capture: 事件侦听,事件发生的时候会调用
.once: 跟v-once作用类似,只渲染一次,第二次不会执行
例如: 在事件处理器中经常会需要调用event.preventDefault()或event.stopPropagation()。
Vue.js为v-on提供两个事件修饰符:.prevent与.stop。
当然在 methods 中也可以轻松实现事件的处理,但是methods 出现的初衷是数据逻辑,而不是去处理 DOM 事件。
为了简单明了,直接上代码
<button v-on:click.stop="doThis">单击按钮阻止事件冒泡</button>
<form v-on:submit.prevent="onSumbit">提交事件不再重新加载页面</form>
<a v-on:click.stop.prevent="doThis">修饰符可以连着打点调用</a>
<div v-on:click.capture="doThat">添加事件监听器</div>
<div v-on:click.self="doThis">只当事件在该元素本身</div>
另外,.ctrl.alt.shift.meta 这四个是新增的修饰符开启鼠标或键盘事件监听,使在按键按下时发生响应。