这是我参与【第四届青训营】笔记创作的第二天。
事件处理
1.事件处理的基本使用
<!-- <button v-on:click="showInfo">点我提示信息</button> -->
<button @click="showInfo1">点我提示信息</button>
<!-- 如何传参 -->
<button @click="showInfo2($event,66)">点我提示信息2</button>
v-on 简写为：@
注意：
方法写到methods里面，如果写到data中的话，会加大运载负荷
methods: {
showInfo1(event) {
alert('同学你好');
},
showInfo2(event, number) {
alert('同学你好');
}
}
2.事件修饰符
Vue中的世家修饰符
1.prevent:阻止默认事件（常用）;
2.stop:阻止事件冒泡（常用）；
3.once:事件只触发一次（常用）；
4.capture：使用事件的捕获模式；
5.self：只有event，target是当前操作的元素时才触发事件：
6.passive：事件的默认行为立即执行，无序等待使劲按回调执行完毕
应用：
prevent
<a href="http://www.aiguigu.com" @click.prevent="showInfo">点我提示信息</a>
直接在事件后面加修饰符，比之前的js更加简洁
stop
<div class="demo1" @click="showInfo">
<button @click.stop="showInfo">点我提示信息</button>
</div>
once
<button @click.once="showInfo">点我提示信息</button>
capture
<div class="box1" @click.capture="showMsg(1)">
<!---在捕获的时候就冒泡-->
div1
<div class="box2" @click="showMsg(2)">
div2
</div>
</div>
不加capture，就是先捕获完后，再逐一冒泡
self
<div class="demo1" @click.self="showInfo">
<button @click.self="showInfo">点我提示信息</button>
</div>
passive
<!-- 加了passive先滚动，不加就先执行回调函数，滚动 -->
<ul @scroll.passive="demo" class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
3键盘事件
1.Vue中常用的按键别名：
回车 => enter
删除 => delete(捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab(tab键用keydown，因为每当按下tab键时就会切换焦点，如果还用keyup的话就不会达成想要的结果)
上 = > up
下 => down
左 => left
右 => right
2.Vue为提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-base （短横线命名）
3.系统修饰键（用法特殊）：
ctrl、alt 、 shift 、 meta
（1）.配合keyup使用：按下修饰键的同时，在按下其他键，随后释放其他键，事件才被触发
（2）.配合keydown使用：正常触发事件
4.也可以使用keycode去指定具体的按键（不推荐）
5.Vue.config.keyCodes.自定义键名 = 键码，可以定制按键别名
<input type="text" placeholder="按下回车提示输入" @keyup="showInfo">
6.可以两个事件连在一起写
<input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y="showInfo">
<!--当按下ctrl+y键时显示-->
