Vue绑定事件v-on(@)与修饰符

Vue使用v-on指令绑定事件，简写为@，其用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

1.修饰符

• stop - 调用 event.stopPropagation(),停止冒泡。
• prevent - 调用 event.preventDefault()，组织浏览器默认事件。
• capture - 添加事件侦听器时使用 capture 模式。
• self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
• {keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
• native - 监听组件根元素的原生事件。
• once - 只触发一次回调。
• left - (2.2.0) 只当点击鼠标左键时触发。
• right - (2.2.0) 只当点击鼠标右键时触发。
• middle - (2.2.0) 只当点击鼠标中键时触发。
• passive - (2.3.0) 以 { passive: true } 模式添加侦听器

2.示例

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

<!-- 方法处理器 --> <button v-on:click="doThis"></button> <!-- 动态事件 (2.6.0+) --> <button v-on:[event]="doThis"></button> <!-- 内联语句 --> <button v-on:click="doThat('hello', $event)"></button> <!-- 缩写 --> <button @click="doThis"></button> <!-- 动态事件缩写 (2.6.0+) --> <button @[event]="doThis"></button> <!-- 停止冒泡 --> <button @click.stop="doThis"></button> <!-- 阻止默认行为 --> <button @click.prevent="doThis"></button> <!-- 阻止默认行为，没有表达式 --> <form @submit.prevent></form> <!-- 串联修饰符 --> <button @click.stop.prevent="doThis"></button> <!-- 键修饰符，键别名 --> <input @keyup.enter="onEnter"> <!-- 键修饰符，键代码 --> <input @keyup.13="onEnter"> <!-- 点击回调只会触发一次 --> <button v-on:click.once="doThis"></button> <!-- 对象语法 (2.4.0+) --> <button v-on="{ mousedown: doThis, mouseup: doThat }"></button> //在子组件上监听自定义事件 (当子组件触发“my-event”时将调用事件处理器)： <my-component @my-event="handleThis"></my-component> <!-- 内联语句 --> <my-component @my-event="handleThis(123, $event)"></my-component> <!-- 组件中的原生事件 --> <my-component @click.native="onClick"></my-component>