Detailed explanation of binding Vue. js event handler and form control

Event processing is mainly performed through the instruction v-on.

Event monitoring and method processing

1. Simple can be directly embedded in the page.

2. You can do this by defining the method in methods and then executing it in v-on

3. You can pass the arguments to the function through the binding, or you can pass the native DOM event to the function through the variable $event.

<div id="app-1">
 <button v-on:click="counter += 1"> Increase 1</button>
 <p> This button has been clicked {{counter}}</p>
 <button v-on:click="great">great</button>
 <button @click="sya('hi')">say hi</button>
 <button @click="warn('form cannot be submit yet', $event)">submit</button>
</div>
<script type="text/javascript">
 var app1 = new Vue({
 el:'#app-1',
 data:{
 counter:0
 },
 methods:{
 great:function(event){
 alert(' The number of clicks is '+ this.counter);
 alert(event.target.tagName);
 },
 sya:function(message){
 alert(message);
 },
 warn:function(msg,event){
 if(event) event.preventDefault();
 alert(msg);
 }
 }
 })
</script>

Event modifier

Vue. js provides event modifiers for v-on. The modifier is invoked by an instruction suffix represented by a dot (.).

.stop
.prevent
.capture
.self

<div id="app2">
<!--  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 time 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>
</div>

Key modifier

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

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

Remember that all keyCode is difficult, so Vue provides aliases for the most commonly used keys:

<!--  Ibid.  -->
<input v-on:keyup.enter="submit">
<!--  Abbreviation grammar  -->
<input @keyup.enter="submit">

All key aliases:

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

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

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

Form control binding

From the previous study, we know that v-model has bidirectional response function in the input box. But v-model is essentially just syntax sugar, which is responsible for listening for user input events to update data, and especially handles some extreme examples.

// Text 
<input type="text" v-model="message" placeholder="edit it">
<p>this message is {{message}}</p>
<hr>
// Multiple lines of text 
<span>Multiline message is:</span>
<p style="white-space: pre">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
<hr>
// Check box 
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<hr>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names Array : {{ checkedNames }}</span>
<hr>
// Radio button 
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
<hr>
// Select list 
<select v-model="selected">
 <option>A</option>
 <option>B</option>
 <option>C</option>
</select>
<span>Selected: {{ selected }}</span>
<hr>
<select v-model="mulselected" multiple>
 <option>A</option>
 <option>B</option>
 <option>C</option>
</select>
<br>
<span>Selected Array : {{ mulselected }}</span>

Dynamic attribute

<input
 type="checkbox"
 v-model="toggle"
 v-bind:true-value="a"
 v-bind:false-value="b">
<p>toggle The value of is {{toggle}}</p>

<input type="radio" v-model="pick" v-bind:value="a">

<select v-model="selected">
 <!--  Inline object literal  -->
 <option v-bind:value="{ number: 123 }">123</option>
</select>

Modifier

lay: Triggered after change

<input v-model.lazy="msg" >

number: Converts the output string to Number type

<div id="app2">
<!--  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 time 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>
</div>

0

trim: Automatically filter the first and last spaces entered by users

<div id="app2">
<!--  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 time 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>
</div>

1