Vue.js v-on用法及代码示例

将事件侦听器附加到元素。

速记： @

期望： Function | Inline Statement | Object (without argument)

参数： event(如果使用 Object 语法，则可选)

修饰符：

.stop - 调用 event.stopPropagation() 。
.prevent - 调用 event.preventDefault() 。
.capture - 在捕获模式下添加事件监听器。
.self - 仅在从该元素调度事件时触发处理程序。
.{keyAlias} - 仅在某些键上触发处理程序。
.once - 最多触发一次处理程序。
.left - 仅触发鼠标左键事件的处理程序。
.right - 仅触发鼠标右键事件的处理程序。
.middle - 仅触发中键鼠标事件的处理程序。
.passive - 使用 { passive: true } 附加一个 DOM 事件。

细节

事件类型由参数表示。表达式可以是方法名称、内联语句，如果存在修饰符，则可以省略。

在普通元素上使用时，它会监听原生 DOM 事件只要。在自定义元素组件上使用时，它会监听自定义事件在该子组件上发出。

当监听原生 DOM 事件时，该方法接收原生事件作为唯一参数。如果使用内联语句，该语句可以访问特殊的 $event 属性：v-on:click="handle('ok', $event)"。

v-on 还支持绑定到不带参数的事件/侦听器对的对象。请注意，使用对象语法时，它不支持任何修饰符。

例子：

<!-- method handler -->
<button v-on:click="doThis"></button>

<!-- dynamic event -->
<button v-on:[event]="doThis"></button>

<!-- inline statement -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- shorthand -->
<button @click="doThis"></button>

<!-- shorthand dynamic event -->
<button @[event]="doThis"></button>

<!-- stop propagation -->
<button @click.stop="doThis"></button>

<!-- prevent default -->
<button @click.prevent="doThis"></button>

<!-- prevent default without expression -->
<form @submit.prevent></form>

<!-- chain modifiers -->
<button @click.stop.prevent="doThis"></button>

<!-- key modifier using keyAlias -->
<input @keyup.enter="onEnter" />

<!-- the click event will be triggered at most once -->
<button v-on:click.once="doThis"></button>

<!-- object syntax -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

监听子组件上的自定义事件(在子组件上发出 "my-event" 时调用处理程序)：

<MyComponent @my-event="handleThis" />

<!-- inline statement -->
<MyComponent @my-event="handleThis(123, $event)" />

相关用法

注：本文由纯净天空筛选整理自vuejs.org大神的英文原创作品 v-on。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。