vue2知识点：事件处理

文章目录 一、事件的基本使用二、$event 对象三、事件的修饰符1）prevent2）阻止事件冒泡3）once4）capture5）self6）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

默认标签会跳转，想实现点击不跳转就设置@click.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标签设置了.self那么只有点击div才会触发事件且输出event.target为：点我提示信息，而只点击button只会触发button的事件且输出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.《vue案例练习：Vue表单创建一行数据及删除数据的实现与理解》

4.《vue组件通信案例练习（包含：父子组件通信及平行组件通信）》

5.《vue2基础组件通信案例练习：待办事项Todo-list案例练习》

6.《把案例Todo-list改写成本地缓存》

7.《vue2知识点：计算属性与监听属性》

8.《vue2知识点：列表渲染（包含：v-for、key、取值范围、列表过滤、列表排序、vue监视对象或数组的数据改变原理、总结vue数据监测）》

9.《vue2知识点：事件处理》

10.《vue2知识点：数据代理》

11.《vue2知识点：生命周期（包含：生命周期介绍、生命周期钩子、整体流程图详解）》