Event processing is mainly executed through the v-on instruction.
Event listening and method processing
1. Simple can be embedded directly on the page.
2. It can be executed by defining the method in methods and then executing it in v-on
3. You can pass parameters to the function through binding, and you can also pass native DOM events to the function through the variable $event.
<div >
<button v-on:click="counter += 1">Increase1</button>
<p>This button was 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'+ );
alert();
},
sya:function(message){
alert(message);
},
warn:function(msg,event){
if(event) ();
alert(msg);
}
}
})
</script>
Event Modifier
An event modifier is provided for v-on. The modifier is called by the instruction suffix represented by dot (.).
.stop
.prevent
.capture
.self
<div > <!-- Prevent click events from bubbles --> <a v-on:="doThis"></a> <!-- Submit event no longer reloads the page --> <form v-on:="onSubmit"></form> <!-- Modifiers can be concatenated --> <a v-on:="doThat"></a> <!-- Only modifiers --> <form v-on:></form> <!-- Use time capture mode when adding event listeners --> <div v-on:="doThis">...</div> <!-- Only when the event is in the element itself（Not child elements）Trigger callback when triggered --> <div v-on:="doThat">...</div> </div>
Key modifier
When listening to keyboard events, we often need to monitor common key values. Vue allows adding key modifiers for v-on when listening for keyboard events:
<!-- Only in keyCode yes 13 Called on time () --> <input v-on:keyup.13="submit">
Remember that all keyCodes are difficult, so Vue provides alias for the most commonly used keys:
<!-- Same as above --> <input v-on:="submit"> <!-- Abbreviation grammar --> <input @="submit">
All key alias:
enter
tab
delete (Capture the Delete and Backspace keys)
esc
space
up
down
left
right
You can customize the key modifier alias through global objects:
// You can use v-on:keyup.f1.f1 = 112
Form control binding
Through some previous learning, we know that v-model has a bidirectional response function in the input box. But v-model is essentially nothing more than syntactic sugar, which is responsible for listening to user input events to update data and specifically dealing with 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" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<hr>
<input type="checkbox" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked namesArray: {{ checkedNames }}</span>
<hr>
//Radio button<input type="radio" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" 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>SelectedArray: {{ mulselected }}</span>
Dynamic properties
<input
type="checkbox"
v-model="toggle"
v-bind:true-value="a"
v-bind:false-value="b">
<p>toggleThe value of{{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: It will only trigger after the change
<input ="msg" >
number: convert the output string to the Number type
<input ="age" type="number">
trim: Automatically filter the beginning and end spaces of user input
<input ="msg" >
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.