VueJS事件处理器v-on：事件修饰符&按键修饰符

事件修饰符

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。

Vue.js通过由点(.)表示的指令后缀来调用修饰符。

    .stop
    .prevent
    .capture
    .self
    .once

<a v-on:click.stop="doThis">a>

<form v-on:submit.prevent="onSubmit">form>

<a v-on:click.stop.prevent="doThat">a>

<form v-on:submit.prevent>form>

<div v-on:click.capture="doThis">...div>

<div v-on:click.self="doThat">...div>


<a v-on:click.once="doThis">a>

按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

<input v-on:keyup.enter="submit">

<input @keyup.enter="submit">

全部的按键别名：

    .enter
    .tab
    .delete (捕获 "删除" 和 "退格" 键)
    .esc
    .space
    .up
    .down
    .left
    .right
    .ctrl
    .alt
    .shift
    .meta

实例

<p>
<input @keyup.alt.67="clear">

<div @click.ctrl="doSomething">Do somethingdiv>

 

转载于:https://www.cnblogs.com/boonya/p/7092791.html