preface
The notes are miscellaneous this time
1, Basic usage of events in Vue
(1) Review event usage in native JavaScript
Three elements
Get event source (which object is triggered)
Binding event, event type (how to trigger, click or keyboard input, etc.)
Add event handler (what to run)
Using events in this way is complicated. Let's look at Vue's event usage later.
https://blog.csdn.net/qq_47286790/article/details/122761706?spm=1001.2014.3001.5501<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Use of basic events</title>
</head>
<body>
<!-- Prepare a container -->
<div id="root">
<button id="btn">Click my prompt</button>
</div>
</body>
<script>
//1, Get event source
let btn = document.getElementById('btn');
//2, Binding event
console.log(btn);
btn.onclick = function(){
alert('My name is warm water');//3, Add event handling code
}
</script>
</html>(2) Event usage in Vue
Mainly v-on:click="shoeInfo" and configuration item methods
Modifiers can be written continuously
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic use of events</title>
<!-- introduce vue -->
<script type="text/javascript" src="../vuejs/vue.js"></script>
</head>
<body>
<!-- Prepare a container -->
<div id="root">
<h2>My name is{{name}}</h2>
<button v-on:click="showInfo">Click my prompt</button>
</div>
</body>
<script>
new Vue({
el:'#root',
data:{
name:'warm water'
},
methods:{
showInfo(){
alert("How do you do!");
}
}
})
</script>
</html>Basic use of events
1) Use v-on:xxx or @ xxx to bind events, where xxx is the event name;
2) The callback of the event needs to be configured in the methods object and will eventually be on the vm;
3) Do not use arrow functions for functions configured in methods! Otherwise, this is not a vm;
4) The functions configured in methods are all functions managed by Vue. this refers to vm or component instance objects;
5) @ click="demo" and @ click="demo" ($event) "have the same effect, but the latter can be passed as parameters;
2, Event modifiers in Vue
Event modifiers in Vue
1) prevent: block default events (common)
2) Stop: stop event bubbling (common)
3) Once: the event is triggered only once (common)
4) Capture: capture mode using events
5) self: only event The event is triggered only when target is the element of the current operation
6) passive: the default behavior of the event is executed immediately without waiting for the event callback to complete
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event modifier</title>
<!-- introduce vue -->
<script type="text/javascript" src="../vuejs/vue.js"></script>
<style>
*{
margin-top: 20px;
}
.demo1{
height: 50px;
background-color: pink;
}
.box1{
padding: 5px;
background-color: pink;
}
.box2{
padding: 5px;
background-color: blue;
}
</style>
</head>
<body>
<!-- Prepare a container -->
<div id="root">
<h2>My name is{{name}}</h2>
<!-- Prevent default events from happening -->
<a href="https://blog. csdn. Net "@ click. Prevent =" showinfo "> click my prompt</a>
<!-- Prevent event bubbling -->
<div class="demo1" @click="showInfo">
<button @click.stop="showInfo">Click my prompt</button>
</div>
<!-- The event is triggered only once -->
<button @click.once="showInfo">Click my prompt</button>
<!-- Capture mode using events -->
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
div2
</div>
</div>
</div>
</body>
<script>
new Vue({
el:'#root',
data:{
name:'warm water'
},
methods:{
showInfo(e){
alert("How do you do!");
},
showMsg(num){
alert(num);
}
}
})
</script>
</html>3, Vue keyboard events
(1) Key alias commonly used in Vue
Enter = > Enter
Delete = > delete (capture delete and backspace keys)
Exit = > ESC
Space = > space
Line feed = > tab (special, must be used with keydown)
Up = > up
Down = > down
Left = > left
Right = > right
(2) Vue does not provide an alias key. You can use the original key value of the key to bind it, but pay attention to change it to kebab case (named by a short horizontal line)
(3) System modifier keys (special usage): ctrl, alt, shift, meta
① use with keyup: press the modifier key, then press other keys, and then release other keys to trigger the event.
② use with keydown: normally trigger events.
(4) You can also use keyCode to specify specific keys (not recommended)
(5)Vue.config.keyCodes. Custom key name = key code, you can customize key alias (not recommended)