Table of contents
1.Vue event processing Use v-on:xxx = ' ' or @xxx = ' ' to bind events
1. The event processing function is written in the Vue configuration object methods
4. Summary of basic usage of events
2.Vue event modifier: Modify the event (prevent default behavior, etc.)
1. Prevent the default event prevent
3. The event is only triggered once
4. Make the event execute capture during the capture phase
5. The event self is triggered only when event.target is the element of the current operation.
3.Keyboard events keydown and keyup in Vue
1.Vue event processing uses v-on:xxx = ' ' or @xxx = ' ' to bind events
1. The event processing function is written in the Vue configuration object methods
The event handling function must be written in the Vue configuration item methods .
All functions managed by Vue are best written as ordinary functions or object methods in ES6 (methods in methods are functions managed by Vue), not as arrow functions. If it is written as an arrow function, the this point in the function body is not the Vue instance object . The advantage of writing it as an ordinary function or object method in ES6 is that this points to the Vue instantiated object vm.
2. How to write parameters when calling an event processing function and when parameters are not required.
<div id="app">
<h2>欢迎来到{
{name}}学习</h2>
<button v-on:click="userinfo1">点我有提示信息(不需要传参时)</button>
<button v-on:click="userinfo2(66)">点我有提示信息(需要传参时)</button>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
name: '田中央1111'
},
methods: {
userinfo1() {
console.log(event); //注意事件发生时会自动产生一个事件处理函数 event
},
userinfo2(num) {
console.log(num, event); //注意事件发生时会自动产生一个事件处理函数 event
}
}
})
console.log(vm);
</script>3. The methods in methods are also on the Vue instantiated object, but there is no data proxy like the data in data.
4. Summary of basic usage of events
1. Use v-on:xxx = ' ' or @xxx = ' ' to bind the event, where xxx is the event name
2. The event callback ( event processing function) 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 points to not vm
4. The functions configured in methods are all functions managed by Vue. This points to the vm or component instance object.
2.Vue event modifier: Modify the event (prevent default behavior, etc.)
Event modifiers in Vue
1. prevent: prevent default events (commonly used)
2. stop: prevent events from bubbling (commonly used)
3. once: The event is triggered only once (commonly used)
4.capture: causes the event to be executed in the capture phase
5.self: The event is triggered only when event.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 execution.
1. Prevent the default event prevent
<div id="app">
<h2>欢迎来到{
{name}}学习</h2>
<!-- 阻止默认事件 prevent-->
<a href="https://www.baidu.com" @click.prevent='userinfo'>点我提示信息</a>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
name: '田中央'
},
methods: {
userinfo() {
console.log('你好啊,同学');
}
}
})
</script>Analysis: After clicking the a tag, the page does not jump, it is still on the current page, and "Hello, classmate" is still printed.
2. Stop bubbling stop
<div id="app">
<div class="far" @click="userinfo">
<!-- 阻止冒泡 stop -->
<div class="son" @click.stop="userinfo"></div>
</div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
name: '田中央'
},
methods: {
userinfo() {
console.log('你好啊,同学');
console.log(event.target);
}
}
})
</script>
Analysis: Clicking on the .son element will only trigger a click event, that is, on the .son element. After the click event processing function is executed, it will not bubble up to the .far element, so "Hello, classmate" will only be printed once.
3. The event is only triggered once
<div id="app">
<button @click.once="userinfo">点击真的只触发一次欸</button>
</div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
name: '田中央'
},
methods: {
userinfo() {
alert('你好啊,同学');
console.log(event.target);
}
}
})
</script>Analysis: Click the button, and a pop-up window pops up on the page: Hello, classmate, and then click the button again, and the pop-up window will not pop up, that is, the click event is only triggered once.
4. Make the event execute capture during the capture phase
<style>
.far {
width: 100px;
height: 100px;
background-color: #ccc;
}
.son {
width: 50px;
height: 50px;
background-color: skyblue;
}
</style> <div id="app">
<div class="far" @click.capture="userinfo1(1)">
<div class="son" @click="userinfo2(2)"></div>
</div>
</div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
name: '田中央'
},
methods: {
userinfo1(num1) {
console.log(num1);
},
userinfo2(num2) {
console.log(num2);
}
}
})
</script>Analysis: When the capture attribute is not set for the click event of the .far element, click the .son element, and the print result is 2, 1. When the capture attribute is set for the .far element, click the .son element, and the print result is output: 1, 2, The reason: capture allows the event to be executed during the capture phase without waiting for the bubbling phase.
5. The event self is triggered only when event.target is the element of the current operation.
<div id="app">
<div class="far" @click.self="userinfo1(1)">
<div class="son" @click="userinfo2(2)"></div>
</div>
</div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
name: '田中央'
},
methods: {
userinfo1() {
console.log(event.target, 11111);
},
userinfo2() {
console.log(event.target, 22222);
}
}
})
</script>Analysis: When the .far element does not set the self attribute, click the .son element, and the result is: (Cause of bubbling)
After setting the self attribute of the .far element, click the .son element. The result is:
There will also be bubbling, but when it bubbles to the .far element, because the .son element is clicked and the event.target is the .son element and not the .far element, the click event of the .far element will not be executed. Therefore, the role of the self attribute : the event is triggered only when event.target is the element of the current operation.
6. The default behavior of the event is executed immediately, without waiting for the event callback function to complete execution. Passive
There are two scroll events to distinguish here: scroll and wheel
scroll: The scroll bar can be scrolled by using the up and down keys of the keyboard , or it can be scrolled by using the mouse wheel , both of which will trigger the scroll event.
wheel: The scroll bar can be scrolled by the up and down keys of the keyboard, or by the mouse wheel, but only the wheel wheel will trigger the wheel wheel data.
The difference between them:
Difference 1:
Wheel event : Even if the scroll bar has reached the bottom, if you move the mouse wheel again, the wheel event will still be triggered . But pressing the up and down keys on the keyboard does not trigger the wheel event.
scroll event: When the scroll bar reaches the end, no matter whether you move the mouse wheel or the up and down keys on the keyboard, the scroll event will not be triggered.
Difference 2 (key point):
Wheel: After rolling the mouse wheel, first trigger the wheel scroll event function. After the function is executed, then execute the default behavior (scroll bar movement) ==> This link is a waste of time. If the wheel scroll event function takes a long time to execute, The page will freeze.
The solution is: the default behavior of passive events is executed immediately, without waiting for the event callback function to complete execution.
scroll: After scrolling the mouse, first execute the default behavior, and then execute the scroll event function.
To sum up: Passive can solve the problem of scroll bar stuck in wheel scrolling event because the event processing function execution event is too long.
<style>
.list {
width: 200px;
height: 200px;
background-color: skyblue;
/* 超出部分，出现滚动条 */
overflow: auto;
}
li {
height: 100px;
}
</style> <div id="app">
<ul class="list" @wheel.passive="demo">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
name: '田中央'
},
methods: {
demo() {
for (let i = 0; i < 10000; i++) {
console.log(111111);
}
console.log('累趴了');
}
}
})
</script>Note: If you are doing a mobile project (tablet and mobile phone), this passive will be used more.
3.Keyboard events keydown and keyup in Vue
keydown: triggers when pressing a key on the keyboard without lifting it
keyup: Triggered after pressing a key on the keyboard and lifting it up
<div id="app">
<h2>欢迎来到{
{name}}学习</h2>
<input type="text" placeholder="按下回车提示输入" @keyup="userinfo">
</div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
name: '田中央'
},
methods: {
userinfo() {
console.log(event.target.value); //拿到输入框中输入的值
}
}
})
</script>Analysis: This code, no matter what key is pressed on the keyboard, will print out the value in the input box. We don’t want this. We need to print the value of the input box when a specific keyboard button is pressed. value
1. When a specific keyboard button is pressed, the entire keyboard event code is completely executed. Writing method: Use keyboard button aliases
Original writing method: using keyboard event object: event.keyCode
Vue writing method: using keyboard button aliases
Summary: Common key aliases in Vue :
Enter=>enter
Delete=>delete
Exit=>esc
Space=>space
Line break =>tab is special and must be combined with keydown
Up=>up
down=>down
left=>left
right=>right
2. Special: line wrap tab. It has a function: to remove the focus from the current element. It can only be used with keydown.
When matching the keyup event, pressing the tab key will remove the focus from the current element without releasing the focus. The focus is not on the element, so pressing the tab key will not execute it.
Therefore, the newline tab can only be effective if it cooperates with the keydown event.
<div id="app">
<h2>欢迎来到{
{name}}学习</h2>
<input type="text" placeholder="按下回车提示输入" @keydown.tab="userinfo">
</div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
name: '田中央'
},
methods: {
userinfo() {
console.log(event.target.value);
}
}
})
</script>3. Special: System modifier keys: ctrl, alt, shift, meta (win key). When used with keyup, when pressing the modifier key, press other keys, and then release other keys, the event will be triggered. Used with keydown: trigger events normally.
<div id="app">
<h2>欢迎来到{
{name}}学习</h2>
<input type="text" placeholder="按下回车提示输入" @keyup.ctrl="userinfo">
</div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
name: '田中央'
},
methods: {
userinfo() {
console.log(event.target.value);
}
}
})
</script>Analysis: During the keyup event: it cannot be triggered by just pressing the ctrl key. You must press the ctrl key and then press and release another key to trigger it. Keydown event: It can be triggered by just pressing ctrl.
3.Two tips in Vue events
1. Modifiers can be written continuously. eg: prevents bubbling and prevents default events. Writing method: eg:@click.prevent.stop
2. System modifier key: If you want to press the system modifier key, and then specify that the event will take effect when a certain key is pressed, the writing method is: eg:@keyup.ctrl.y
