What is the vue. js event handler

Monitor events

You can use the v-on instruction to listen for DOM events to trigger some javascript code.

demo:

<div v-on:click="++counter"> Click, add 1</div>
<span>{{counter}}</span>

 data:{

 　　 counter:0

}

Method event handler

The logic of many event handlers is complex, so it is not feasible to write javaScript code directly into v-on instructions. So v-on can receive a defined method to call

<div v-on:click="counter()"> Click, add 1</div>
<span>{{counter}}</span>

data:{

 　　 counter:0

},

method:{

 　　 counter:function(){

 　　 this.counter++;

 　　 }

}

Sometimes you also need to access the native DOM event in the inline statement handler, and you can pass it into the method with the special variable $event:

$event Native Event Object

Event modifier
Calling event. preventDefault () or event. stopPropagagation () in an event handler is a very common requirement. Although we can easily achieve this in methods, it is better

The way is that methods is purely data logic, rather than dealing with the details of DOM events.

To solve this problem, Vue. js provides event modifiers for v-on, which are invoked by the instruction suffix represented by (.).

.stop

.prevent

.capture

.self

.once

<!--  Prevent click event bubbling  -->
<a v-on:click.stop="doThis"></a>
<!--  Submit events no longer overload pages  -->
<form v-on:submit.prevent="onSubmit"></form>
<!--  Modifiers can be concatenated  -->
<a v-on:click.stop.prevent="doThat"></a>
<!--  Modifiers only  -->
<form v-on:submit.prevent></form>
<!--  Use event capture mode when adding event listeners  -->
<div v-on:click.capture="doThis">...</div>
<!--  Callbacks are fired only when events are fired on the element itself, not on child elements  -->
<div v-on:click.self="doThat">...</div>

Add

<!-- Click events will only trigger 1 Times -->
<a v-on:click.once="dothis"></a>

Unlike other modifiers that only work on native DOM events, the. once modifier can also be used on custom component events

Key modifier
When listening for keyboard events, we often need to listen for common key values. Vue allows you to add key modifiers to v-on when listening for events:

<!-- Only when keyCode Yes 13 Called when vm.submit()-->
<input v-on:keyup.13="submit">

Common buttons also have aliases:

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

All key aliases:

.enter

.tab

.delete

.esc

.space

.up

.down

.left

.right

You can customize the case modifier alias through the global config. keyCodes object

// You can use the v-on:keyup.f1
Vue.config.keyCodes.f1=112

Key modifier added

You can turn on mouse or keyboard event listening with the following modifiers to react when a key is pressed.

.ctrl

.alt

.shift

.meta

Note: On the keyboard of different systems, the keys corresponding to meta are different

Why Listen for Events in HTML
You may notice that this way of listening for events violates the traditional idea of separation of concerns. Don't worry, because all Vue. js event-handling methods and expressions are strictly bound to the ViewModel of the current view, and it does not cause any maintenance difficulties. In fact, using v-on has several advantages:

One scan of HTML template can easily locate the corresponding method in JavaScript code

Because you don't need to manually bind events in JavaScript, your viewModel code can be very pure logic, completely decoupled from DOM, and easier to test.

3 When an ViewModel is destroyed, all event handlers will be deleted automatically, so you don't have to worry about how to clean them up by yourself.