vue event handler
1.1 @click="handleClick"
In the event handling method without parentheses, vue will automatically pass the event object. You can get the event object in the event handling function, but you cannot pass custom parameters
<div id="box">
{{count}}
<br>
<button @click="handleClick">event processing -Automatic delivery of event objects-Unable to pass parameter</button>
</div>
<script>
var vm = new Vue({
el:"#box",
data:{
count:0
},
methods:{
handleClick(eve){
this.count++;
}
}
})
</script>
1.2 @click="handleClick($event,2)"
e v e n t : solid set write method ， hand move pass Deliver ， v u e meeting root according to pass Deliver of event: fixed writing method, passed manually, vue will be based on the passed Event: it is written in a fixed way and passed manually. vue will know the event object to be passed according to the passed event parameter. The custom parameter is passed from the second parameter.
<div id="box">
{{count}}
<br>
<button @click="handleClick($event,2)">event processing -Manually pass event objects-Transfer parameters</button>
</div>
<script>
var vm = new Vue({
el:"#box",
data:{
count:0
},
methods:{
handleClick(eve,data){
console.log(eve.target)
this.count += data;
}
}
})
</script>
1.3 write the code directly in the in-line event instruction
Write code in the line, which is generally not used
<div id="box">
{{count}}
<br>
<button @click="count+=3">Write code directly in the inline event instruction</button>
</div>
<script>
var vm = new Vue({
el:"#box",
data:{
count:0
}
})
</script>
1.4 event modifiers:
-
. stop: prevent event bubbling
Prevent bubbling: the same event is bound to the child parent in vue, and event bubbling will occur as in native
Native js uses e.stopPropagation() to prevent event bubbling
<div id="box">
<div @click="divClick">
<button @click="butClick">Event Bubbling </button>
</div>
</div>
<script>
var vm = new Vue({
el:"#box",
data:{},
methods:{
divClick(){
console.log("divClick");
},
butClick(eve){
//Native implementation prevents bubbling
eve.stopPropagation();
console.log("butClick");
}
}
})
Using event modifiers in vue to prevent bubbling behavior
Event modifier Stop stop bubbling
<div id="box">
<div @click="divClick">
<!-- Event modifier.stop Prevent event bubbling -->
<button @click.stop="butClick">Event Bubbling </button>
</div>
</div>
<script>
var vm = new Vue({
el:"#box",
data:{},
methods:{
divClick(){
console.log("divClick");
},
butClick(){
console.log("butClick");
}
}
})
</script>
Case: display and hide of modal box
<div id="box">
<!-- @click="isShow=true"Show when clicked main -->
<button @click="isShow=true">show</button>
<!-- @click="isShow=false"When clicked main In the area, main hide -->
<div class="main" v-show="isShow" @click="isShow=false">
<!-- stay container Required on@click.stop To prevent bubbling, otherwise bubbling will be triggered when you click to get focus in the text box with the mouse main Click action in -->
<div class="container" @click.stop>
<p>user name:<input type="text"></p>
<p>dense Code:<input type="password"></p>
<hr>
<p><button>Sign in</button</p>
</div>
</div>
</div>
<script>
var vm = new Vue({
el : "#box",
data : {
isShow : false
}
})
</script>
- . prevent: block default behavior
<a href="http://www.baidu. Com "@click.prevent > jump</a>
- . self: the event is triggered only by clicking on the current element. You don't need to use @ click Stop stops the event from bubbling
The above display mode box case can be modified as follows
<div id="box">
<!-- @click="isShow=true"Show when clicked main -->
<button @click="isShow=true">show</button>
<!--
@click="isShow=false"When clicked main In the area, main hide
@click.self="isShow=false":Add after event command self The modifier indicates that the event will be triggered only when you click on the current element. Clicking on other elements will not trigger the event
-->
<div class="main" v-show="isShow" @click.self="isShow=false">
<div class="container">
<p>user name:<input type="text"></p>
<p>dense Code:<input type="password"></p>
<hr>
<p><button>Sign in</button</p>
</div>
</div>
</div>
<script>
var vm = new Vue({
el : "#box",
data : {
isShow : false
}
})
</script>
- . Once: the event is triggered only once
<div id="box">
<button @click.once="handleClick">click</button>
</div>
<script>
var vm = new Vue({
el : "#box",
methods : {
handleClick(){
console.log("hello")//Only once
}
}
})
</script>
-
.passive
Every time an event occurs, the browser will query whether there is a preventDefault to block the default behavior of the event. If the passive modifier is added, the program will tell the browser that there is no need to query. preventDefault is not used to block the default behavior.
<a href="http://www.baidu. Com "@click.passive =" handleclick "> Baidu</a>
<script>
var vm = new Vue({
el:"#app",
data:{},
methods:{
handleClick(eve){
// Used in the event passive, the query of preventDefault will be skipped to improve the program performance. At this time, the preventDefault operation is invalid
eve.preventDefault();
console.log("Stopped");
}
}
});
</script>
It is generally used for high-frequency trigger events such as page scrolling monitoring, such as @ scroll, @ touchmove and so on, because in the process of scrolling monitoring, moving each pixel will trigger an event. Each time the kernel thread is used to query preventDefault, it will cause sliding jam. Through passive modification, the kernel thread will skip the query, which can greatly improve the smoothness of sliding
-
Keyboard key modifiers: for keyboard events
- . enter indicates that the keyboard has pressed the enter key
<div id="box"> <input type="text" @keydown.enter="keyBoardEven"> </div> <script> var vm = new Vue({ el:"#box", data:{}, methods:{ keyBoardEven(){ console.log("Press enter") } } }) </script>- @keydown.enter.ctrl: indicates the trigger of key combination
<div id="box"> <input type="text" @keydown.enter.ctrl="keyBoardEven"> </div> <script> var vm = new Vue({ el:"#box", data:{}, methods:{ keyBoardEven(){ console.log("Triggered") } } }) </script>- @keydown.65: press the A key
<input type="text" @keydown.65="keyBoardEven">