事件处理
1. 事件的基本使用
模板只能用到对应Vue实例中的数据和方法，像这里的showInfo，模板中是调不到的
所有被Vue管理的函数【methods对象中的函数】不能写成箭头函数，只能写成普通函数，否则，函数中的this就不再是Vue实例，而是Window对象
只有配置在data中的内容才会做数据代理和数据劫持，方法如果放在data中，也会做数据代理和数据劫持，但没意义
事件的基本使用：
1.使用v-on:xxx 或 @xxx【@是v-on:的简写】 绑定事件，其中xxx是事件名；
2.事件的回调需要配置在methods对象中，最终会在vm上；
3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
5.@click="demo"【不传参可以直接这么写，也可以写成demo()】 和 @click="demo($event)" 效果一致，但后者可以传参；【$event关键字的作用是Vue用于支持传参的同时依然能够让函数接收到event事件对象】
关于event事件对象：事件绑定时如果未进行传参，默认会传入一个事件对象，如果传了参就需要通过$event接收
event.target：拿到发生事件的元素
注：Vue中的事件，即使写的是@click="demo"，也会传递一个event对象
2. 事件修饰符
什么是事件冒泡
Vue中的事件修饰符：
1.prevent：阻止默认事件（常用）；效果同回调函数中使用event.preventDefault()方法，其中，event为事件对象
触发标签的点击事件后，如果当前标签还有默认事件，默认事件不再生效，比如a标签
2.stop：阻止事件冒泡（常用）；效果同回调函数中使用event.stopPropagation()方法，其中，event为事件对象
当前标签为子标签时，触发当前标签的点击事件后，如果父标签还有点击事件，不再触发
3.once：事件只触发一次（常用）；
只有点击第一次的时候当前标签的回调函数才会生效
4.capture：使用事件的捕获模式；
js中的事件流是分为捕获阶段和冒泡阶段的，默认情况下，冒泡阶段才会去处理事件，捕获阶段由外到内，冒泡阶段由内到外，capture可以实现所在标签的事件捕获阶段就被处理
5.self：只有event.target是当前操作的元素时才触发事件；
event.target始终是用户直接点击的那个标签，即使是冒泡到了父标签的事件上，父标签事件的回调函数里传入的event.target也会是子标签
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；【移动端项目常用】
如果即想阻止默认事件，又想阻止事件冒泡，即想同时使用多个事件修饰符，可通过`.prevent.stop`的方式实现
对于第6个事件修饰符，单独进行说明
@scroll和@wheel的区别：
@scroll：滚动条滚动事件，只要滚动条的位置发生变化【不管是什么动作导致的滚动条滚动】，事件就会触发
@wheel：鼠标滚轮滚动事件，与滚动条滚动无关，只要鼠标滚轮滚动了，事件就会触发，如果滚轮不动，仅仅是滚动条位置变化了，事件也不会触发
@wheel事件执行流程：
滚动滚轮 ------》 触发滚轮滚动事件 -----》 执行回调函数 ------》 滚动条滚动
@wheel.passive事件执行流程：
滚动滚轮 ------》 触发滚轮滚动事件 -----》 滚动条滚动 ------》 执行回调函数
注：不是所有的事件都是这个执行流程，比如滚动条滚动事件，滚动滚动条后，滚动条会滑动，然后再触发滚轮滚动事件，所以对于@scroll滚动条滚动事件来说，有没有passive事件修饰符效果都是一样的
各个事件修饰符的实例如下：
<head>
<meta charset="UTF-8" />
<title>事件修饰符</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
*{
margin-top: 20px;
}
.demo1{
height: 50px;
background-color: skyblue;
}
.box1{
padding: 5px;
background-color: skyblue;
}
.box2{
padding: 5px;
background-color: orange;
}
.list{
width: 200px;
height: 200px;
background-color: peru;
overflow: auto;
}
li{
height: 100px;
}
</style>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h2>欢迎来到{{name}}学习</h2>
<!-- 阻止默认事件（常用） -->
<a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>
<!-- 阻止事件冒泡（常用） -->
<div class="demo1" @click="showInfo">
<button @click.stop="showInfo">点我提示信息</button>
<!-- 修饰符可以连续写 -->
<!-- <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a> -->
</div>
<!-- 事件只触发一次（常用） -->
<button @click.once="showInfo">点我提示信息</button>
<!-- 使用事件的捕获模式 -->
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
div2
</div>
</div>
<!-- 只有event.target是当前操作的元素时才触发事件； -->
<div class="demo1" @click.self="showInfo">
<button @click="showInfo">点我提示信息</button>
</div>
<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
<ul @wheel.passive="demo" class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
name:'尚硅谷'
},
methods:{
showInfo(e){
alert('同学你好！')
// console.log(e.target)
},
showMsg(msg){
console.log(msg)
},
demo(){
for (let i = 0; i < 100000; i++) {
console.log('#')
}
console.log('累坏了')
}
}
})
</script>
3. 键盘事件
常用的键盘事件
@keydown：按键按下去时触发事件
@keyup：按键抬起来时触发事件
判断按的是什么键可以通过event.keyCode【事件对象身上的按键编码属性】进行判断
@keyup.enter：.enter称为别名，该指令的含义是只有当按键为enter键时，才会去执行回调函数
Vue给常用的一些按键都起了别名
1.Vue中常用的按键别名：
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)【默认行为是将焦点从当前光标处移走，搭配@keyup回调不能生效的原因是等不到按键抬起来焦点就已经移走了，因此事件就无法触发】
上 => up
下 => down
左 => left
右 => right
2.Vue未提供别名的按键，可以使用按键原始的key值【按键本身的名字】去绑定，但注意要转为kebab-case（短横线命名）【由多个单词组成的按键名，调用时将首字母变小写，并用‘-’连接两个单词，比如CapsLock ----》 caps-lock】
3.系统修饰键（用法特殊）：ctrl、alt、shift、meta【Win键】，这是在能够绑定按键事件按键中比较特殊的几个
(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2).配合keydown使用：正常触发事件。
4.也可以使用keyCode去指定具体的按键（不推荐，不同键盘的按键编码可能不同，相同的编码可能对应了不同的键）
5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
任何一个按键都有名字和编码
获取按键的名字和编码：e.key，e.keyCode
并不是所有按键都可以绑定事件
总结：
对于@keyup.xxx来说，xxx可以是Vue提供的别名，也可以是按键本身的名字，或者可以是编码，还可以是自定义的键名
Tip：
- 事件修饰符可以连用，但连用的顺序会影响结果
- 键盘别名可以连用，可以起到只有按下组合键【比如Ctrl+y，如：@keyup.enter.esc 组合键】才可处理事件的效果
只要data中的数据发生变化，Vue就会重新解析模板，解析模板过程中，如果存在插值语法中进行了函数调用，该函数会重新执行
标签：事件处理,Vue,触发,2x,滚动条,事件,按键,event From： https://www.cnblogs.com/wzzzj/p/18039945