1. Basic use
1. Use v-on: event name or @event name to bind the event
Common events include:
onclick, Mouse click event; ondblclick, Mouse double click event; onmousedown, Mouse down event; onmouseup, Mouse up event;
onmouseover, onmouseenter, onmouseout, onmouseleave, onmousemove Monitor the movement of the mouse in and out, and movement events
onkeydown, onkeyup, onkeypress Monitor keyboard presses and pop-ups.
Just change on to @ here
2.eg: @click="show" will pass the parameters of an event by default. If it is written as @click="show(a)", the default event parameters will be canceled. If you want to add event parameters again, To pass parameters, you must use @click="show(a,$event)"
2. Commonly used event modifiers
.stop Prevent the incident from spreading further.
#阻止事件冒泡
<a @click.stop="toNext">前往下一页</a>
.stop 相当于在 toNext 方法上执行了 e.stopPropagation && e.cancelBubble = true;
.prevent Blocks the default event for tags.
#阻止默认事件行为。
<a @click.prevent="toNext">
.prevent 相当于在 toNext 方法上执行了 e.preventDefault()，IE： e.returnValue = false;
.capture Add event listeners using event capture mode, that is, the processing order is from body->target element.
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
.self Determine whether event.target is triggered by itself or bubbled over by child elements. .self will only accept events triggered by itself.
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
.once Indicates that the click event is only triggered once.
#vue版本2.1.0 点击事件将只会触发一次. <a v-on:click.once="doThis"></a>3. Common keys for key events
