The function of the v-on instruction is actually to bind events.
Events are the soul of JavaScript, and events drive the execution of JavaScript programs.
Vue provides us with v-on instructions for binding events.
<button v-on:click="add">加分</button>
<button @click="reduce">减分</button>
These are two basic syntax formats.
The add and reduce must be declared in advance in the methods in the vue instance .
Vue syntax is very flexible. In fact, we can write events as dynamic .
<button v-on:[event]="add">加分</button>
<button @[event]="reduce">减分</button>
We need to declare the value of event in data.
In addition to the normal event trigger mechanism, Vue also provides us with a lot of event modifiers , which can be used in various business scenarios.
- .stop-stop bubbling
- .prevent-prevent default events
- .capture-prevent capture
- .self-only listen to the event that triggered the element
- .once-trigger only once
- .left-left key event
- .right-right click event
- .middle-middle wheel event
The following is a small case study for you to learn the usage of v-on.
A simple counting program
<div id="app">
本场得分：{
{
count}} <br/>
<button v-on:click="add">加分</button>
<button @click="reduce">减分</button>
<br/>
<input type="text" v-on:keyup.enter="enterAdd" v-model="test" />
</div>
<script>
var app = new Vue({
el:'#app',
data:{
count:0,
test:'',
event:'click'
},
methods: {
add(){
this.count++;
},
reduce(){
if(this.count == 0){
alert("得分不能小于0");
}else{
this.count--;
}
},
enterAdd(){
if(this.count + parseInt(this.test) < 0){
alert('得分不能小于0');
}else{
this.count = this.count + parseInt(this.test);
}
this.test = '';
}
}
});
</script>
The score change can be triggered by the click event of the button, or the score can be changed by the input event below.
The accumulation of technology is piled up with little by little code. Type a lot of code and know how to use the knowledge you have learned in specific business scenarios.
There is a WeChat mini program course design, complete design needs, contact personal QQ: 505417246
Follow the WeChat official account below, you can receive WeChat applet, Vue, TypeScript, front-end, uni-app, full stack, Nodejs, Python and other practical learning materials
