Vue.js study notes four (event processing)

1. Event handling

1. Listen for events

You can use the v-ondirective listen to DOM events and run some JavaScript code when triggered.

1) v-on:xxx="expression"

2) v-on:xxx="method name"/v-on:xxx="method name (parameter)", if it is only the method name, vue will automatically pass in the event, if the method name (), you want to get event, $event must be passed in as a parameter

2. Event modifiers

event.preventDefault()And event.stopPropagation()these two ways of writing are very common in js event processing.
Of course, you can write the same way as in the previous example, but Vue provides an easier way:


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

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

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

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

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


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

<!-- The click event will only fire once --> 
< a  v-on:click.once = "doThis" > </ a >

Here, by the way, the capture mode, the js standard listener function is like this:

element.addEventListener(<event-name>, <callback>, <use-capture>);

When using modifiers, the order is important; the corresponding code will be generated in the same order. Therefore, using v-on:click.prevent.selfwill prevent all clicks , but v-on:click.self.preventonly prevent clicks on the element itself.

3. Key modifiers

When listening to keyboard events, we often need to check for common key values. Vue allows adding key modifiers v-onfor listening to keyboard events:

<!-- `vm.submit()` is only called if `keyCode` is 13 --> 
< input  v-on:keyup.13 = "submit" >

Remembering all of them keyCodeis difficult, so Vue provides aliases for the most commonly used keys:

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

<!-- Abbreviated syntax--> 
< input @ keyup.enter = "submit" >

All key aliases:

.enter
.tab
.delete(captures "delete" and "backspace" keys)
.esc
.space
.up
.down
.left
.right

Key modifier aliases can be customized via the global config.keyCodesobject :

// `v-on:keyup.f1` can be used
 Vue.config.keyCodes.f1 = 112

4. System Modifiers

The following modifiers can be used to implement listeners that fire mouse or keyboard events only when the corresponding key is pressed.

.ctrl
.alt
.shift
.meta

<!-- Alt + C -->
<input @keyup.alt.67="clear">

extra modifier

.exactModifiers allow you to control which events are triggered by precise combinations of system modifiers.

<!-- Fires even when Alt or Shift are pressed together --> It is one of the keys being pressed 
< button @ click.ctrl = "onClick" > A </ button >

<!-- fired only when Ctrl is pressed--> 
< button @ click.ctrl.exact = "onCtrlClick" > A </ button >

<!-- Fired when none of the system modifiers are pressed --> 
< button @ click.exact = "onClick" > A </ button >

mouse button modifier

.left
.right
.middle

These modifiers restrict handlers to only respond to specific mouse buttons.

2. Form input binding

You can use v-modeldirectives to create two-way data bindings on forms <input>and <textarea>elements . It is responsible for listening to user input events to update data

v-modelThe initial valuesvalue of the , checked, and selectedattributes of all form elements are ignored and the data of the Vue instance is always used as the data source. You should declare initial values in the component's options .data