vue2知识点：事件处理
文章目录
- 一、事件的基本使用
- 二、$event 对象
- 三、事件的修饰符
-
- 1）prevent
- 2）阻止事件冒泡
- 3）once
- 4）capture
- 5）self
- 6）passive
- 四、键盘事件(键值修饰符)
- 本人其他相关文章链接
一、事件的基本使用
注意点1：定义事件函数时，普通函数this指代vue对象，而箭头函数中this指代Window对象。
注意点2：定义事件没参数小括号()可省略，但是用在插值表达式使用一个函数返回值就必须带小括号()，比如 全名：{{fullName()}}。
注意点3：不被vue所管理的函数那么请使用箭头函数。
代码：
<button v-on:click="showInfo1">点我提示信息1(不传参)</button>
<button @click="showInfo2($event, 66)">点我提示信息2(不传参)</button>
var vm = new Vue({
el: "#app",
data: {},
methods:{
showInfo1(event) {
console.log(event);
},
showInfo2(event, number) {
console.log(event); //指代事件对象
console.log(number);
console.log(this); //箭头函数中指代Window对象，普通方法指代vue对象
}
}
})
二、$event 对象
在事件处理函数中访问 DOM 原生事件 event 对象，可以使用特殊变量$event 对象传入。
三、事件的修饰符
事件修饰符举例说明：
1）prevent
2）阻止事件冒泡
捕获阶段：指由外往内 冒泡阶段：指由内到外
举例：2个div1，div2，都有点击事件，如果不设置事件修饰符stop，那么点击div2触发事件完成之后，还会触发div1事件，而设置stop修饰符后，不会触发冒泡阶段。
3）once
事件只触发一次（常用），即无论点击多少次按钮，按钮只触发一次。
4）capture
设置使用事件的捕获模式，不设置使用冒泡模式（由内向外触发事件函数）；
使用事件的捕获模式 ：不设置.capture，先执行showMsg(2)，再执行showMsg(1)，设置之后先执行showMsg(1)，再执行showMsg(2)
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
div2
</div>
</div>
showInfo(e){
console.log(e.target)
}
5）self
只有event.target是当前操作的元素时才触发事件
举例：
div和button都设置事件函数，如果div标签不设置.self，那么点击button按钮会调用2次函数，且输出event.target为：
<div class="demo1" @click.self="showInfo">
<button @click="showInfo">点我提示信息</button>
</div>
6）passive
事件的默认行为立即执行，无需等待事件回调执行完毕
举例：
定一个事件会计算10W次，如果不设置.passive，那么会等事件全部结束后，滚轮才会向下移动一个位置，而设置了.passive，那么滚轮会先移动而不会去等待事件执行是否结束。
事件的默认行为立即执行，无需等待事件回调执行完毕
<ul @wheel.passive="demo" class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
demo(){
for (let i = 0; i < 100000; i++) {
console.log('#')
}
console.log('累坏了')
}
四、键盘事件(键值修饰符)
两个隐藏小知识点：
1.事件修饰符可串行，比如：@click.stop.once
2.对于键盘按键想实现按Ctrl+y才调用，则使用@keyup.ctrl.y=”showInfo”
本人其他相关文章链接
1.《基础篇第1章：vue2简介》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结
2.《基础篇第2章：vue2基础》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结
3.《进阶篇第3章：vue进阶-组件》包含组件、自定义事件、插槽、路由等等扩展知识点
4.《基础篇第4章》：使用vue脚手架创建项目
5.vue2知识点：数据代理
6.vue2知识点：事件处理
7.vue2知识点：列表渲染（包含：v-for、key、取值范围、列表过滤、列表排序、vue监视对象或数组的数据改变原理、总结vue数据监测）
8.vue2知识点：计算属性与监听属性
9.vue2知识点：生命周期（包含：生命周期介绍、生命周期钩子、整体流程图详解）
10.vue2知识点：非单文件组件和单文件组件
11.vue2知识点：组件is属性
12.vue2知识点：组件模板定义
13.vue2知识点：组件的props属性、非props属性、props属性校验
14.vue2知识点：组件自定义事件
15.vue2知识点：组件插槽分发
16.vue2知识点：动态组件
17.vue2知识点：混入
18.vue2知识点：浏览器本地缓存
19.vue2知识点：全局事件总线（GlobalEventBus）
20.vue2知识点：消息订阅与发布
21.vue2知识点：nextTick语法
22.vue2知识点：Vue封装的过度与动画
23.vue2知识点：路由
24.vue2知识点：vm调用待$命令介绍
25.vue组件通信案例练习（包含：父子组件通信及平行组件通信）
26.vue表单案例练习：vue表单创建一行数据及删除数据的实现与理解
27.vue2基础组件通信案例练习：待办事项Todo-list案例练习
28.vue2基础组件通信案例练习：把案例Todo-list改写成本地缓存
29.vue2基础组件通信案例练习：把案例Todo-list改成使用自定义事件
30.vue2基础组件通信案例练习：把案例Todo-list改成使用全局事件总线
31.vue2基础组件通信案例练习：把案例Todo-list改成使用消息订阅与发布
32.vue2基础组件通信案例练习：把案例Todo-list新增编辑按钮
33.vue2基础组件通信案例练习：把案例Todo-list改成使用动画与过度
34.学习vue2遇到过的问题及个人总结