**
vue event handling
**
Generally, v-on is used to listen for events. When listening for DOM events, some js code will be triggered.
-
Use v-on:xxx or @ xxx to bind events. xxx refers to the event name. The callback of the event should be written in the methods object and will eventually be placed on the vm.
2. The function in is managed by Vue, and this in the function points to vm or component instance.
3. The function in methods must not be written as an arrow function. Once it is written as an arrow function, this in the function will no longer be vm.
@click="showInfo"click="showInfo($event)" has the same effect, but the latter can pass parameters.
Event modifier -
prevent, block the default event, the same as event preventDefault().
-
stop to prevent event bubbling, the same as event stopPropagation().
-
Once, the event will only be triggered once.
-
Capture, capture phase trigger event.
-
self，event. The event will be triggered only when target is the current operation element, that is, event target ==
event. When currenttarget returns true. -
passive, the default behavior of the event will be executed immediately without waiting for the event callback to complete.
Wheel event (without modifier passive)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo1</title>
<script src="../js/vue.js"></script>
<style>
.list{
width: 200px;
height: 200px;
background: peru;
overflow: scroll;
}
.item{
height: 100px;
}
</style>
</head>
<body>
<div id="root">
<ul class="list" @wheel="showInfo">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:"#root",
methods:{
showInfo(){
for (let index = 0; index < 100000; index++) {
console.log("#");
}
}
}
});
</script>
</body>
</html>
Rolling down the scroll wheel triggers an event and executes the callback showInfo. After showInfo is executed, the scroll bar will slide down.
Wheel event (with modifier passive)
<div id="root">
<ul class="list" @wheel.passive="showInfo">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
</div>
@wheel. When passive, the scroll wheel triggers an event, and the scroll bar will slide immediately without waiting for the callback showInfo to complete.
Keyboard modifier
- enter. Such as @ keyup Enter, when the keyboard event keyup occurs and the key is the Enter key shagn (enter), the callback is executed.
- .delete. Such as @ keyup Delete, when the keyboard event keyup occurs and the key is the delete key (delete or Backspace), the callback is executed
- .Esc. Such as @ keyup Esc, when the keyboard event keyup occurs and the key is the exit key (Esc), the callback is executed.
- .space. Such as @ keyup Space, when the keyboard event keyup occurs and the key is the space bar, the callback is executed.
- .up. Such as @ keyup Up, when the keyboard event keyup occurs and the key is the up key (↑), the callback is executed.
- .down. Such as @ keyup Down, when the keyboard event keyup occurs and the key is the down key (↓), the callback is executed.
- .left. Such as @ keyup Left, when the keyboard event keyup occurs and the key is left (←), the callback is executed.
- .right. Such as @ keyup Right, when the keyboard event keyup occurs and the key is the right key (→), the callback is executed.
- .tab. Such as @ keydown Tab, when the keyboard event keydown occurs and the key is tab, the callback is executed.
System modifier - ctrl. For example, @ keydown CTRL, when the keyboard event keydown occurs and the key is Ctrl, the callback is executed.
- shift. For example, @ keydown Shift, when the keyboard event keydown occurs and the key is shift, the callback is executed.
- alt. For example, @ keydown Alt, when the keyboard event keydown occurs and the key is alt, the callback is executed.
- meta. For example, @ keydown Meta, when the keyboard event keydown occurs and the key is the meta key (⊞), the callback is executed.
Multiple modifiers - .stop.prevent, first stop bubbling, and then block the default behavior.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo1</title>
<script src="../js/vue.js"></script>
<style>
.container{
background-color: skyblue;
width: 200px;
height: 100px;
}
.content{
padding-top: 50px;
}
</style>
</head>
<body>
<div id="root">
<div class="container" @click="showInfo">
<div class="content">
<a href="http://www.baidu. Com "@click.stop.prevent =" showinfo "> click on my prompt</a>
</div>
</div>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:"#root",
methods:{
showInfo(){
alert("Hello");
}
}
});
</script>
</body>
</html>
- .ctrl.y. Such as @ keyup ctrl.y. When the keyboard event keyup occurs and there are Ctrl and Y keys at the same time, the callback is executed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo1</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<input type="text" @keyup.ctrl.y="showInfo">
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:"#root",
methods:{
showInfo(e){
console.log(e.target.value);
}
}
});
</script>
</body>
</html>