我们之前已经学过使用vue处理点击事件了，使用@click就可以侦听鼠标的点击事件
<div @click="onClick">点击我</div>
我这节课再补充一下关于事件处理常用的一些功能
1.在@click中直接写js表达式
<div @click="count++">点击我计数增加1</div>
可以直接进行简单的计算
<div @click="show=true">点击我显示一个元素</div>
直接更改一个值
这样写的好处就是，对于逻辑特别简单的代码，就不用在methods里写一个函数，代码显得比较精简，但是对于逻辑稍微复发的，就不要这么写了，要考虑代码的可维护性。
2.指定事件的回到函数的方式
我们在methods里定义一个回调函数
methods: {
onClick() {
console.log('触发了点击事件')
},
},
在template模板中绑定这个方法，如果不传参数的话，可以直接绑定方法名字，可以加上括号调用方法
<button @click="onClick">点击</button>
<button @click="onClick()">点击</button>
如果要传参数的时候，就必须加上括号调用了
<button @click="onClick('点击时传了一个参数')">点击</button>
3.获取事件对象
我们知道在事件触发时，会有一个event对象，在开发中经常会用到，我们在vue中同样可以获取到这个event对象
1）如果在绑定事件时，直接绑定的方法名称，
<button @click="onClick">点击</button>
那么方法的第一参数就是事件对象
methods: {
onClick(e) {
console.log(e)
console.log('触发了点击事件')
},
},
2）帮定时，使用$event表示事件对象
<button @click="onClick($event)">点击</button>
那么方法的第一参数就是事件对象
methods: {
onClick(e) {
console.log(e)
console.log('触发了点击事件')
},
},
又要传递参数，又要获取event对象时
<button @click="onClick('我是一个参数',$event)">点击</button>
methods: {
onClick(msg,e) {
console.log(msg)
console.log(e)
console.log('触发了点击事件')
},
},
按照顺序，获取相应的参数就行了
4.事件修饰符
对于一些常用的功能，vue提供了一些事件修饰符去实现，可以简化我们的代码，
比如说使用event.preventDefault()阻止默认事件时非常常用的功能，我们按照之前的写法应该这么写
<button @click="onClick">点击</button>
methods: {
onClick(e) {
e.preventDefault()
console.log('阻止了默认事件')
},
},
使用事件修饰符，只需要加上.prevent
<button @click.prevent="onClick">点击</button>
methods: {
onClick() {
console.log('阻止了默认事件')
},
},
事件修饰符就是在事件名称后面加了‘.’+修饰符
还有一个常见的修饰.stop相当于event.stopPropagation()，停止事件传播
<button @click.stop="onClick">点击</button>
也可以连续写多个事件修饰符
<button @click.stop.prevent="onClick">点击</button>
其他几个修饰符也简单介绍一下
1）.capture 添加事件监听器时使用事件捕获模式，即内部元素触发的事件先在此处理，然后才交由内部元素进行处理
2）.self 只当在 event.target 是当前元素自身时触发处理函数，即事件不是从内部元素触发的
3）.once 点击事件将只会触发一次
4）.passive 关于passive我以前写过相应的文章 【web前端】passive是个啥？
5.按键修饰符
在键盘事件中，vue也提供了几个修饰符，非常方便
比如
<input @keyup.enter="submit" />
如果时回车键的keyup事件，才调用submit方法，这个非常常用，比如用在表单提交、搜索框开始搜索。
同时，vue还提供了几个其他的按键修饰符
1）.tab
2）.delete (捕获“删除”和“退格”键)
3）.esc
4）.space
5）.up
6）.down
7）.left
8）.right
6.系统修饰符
比如要实现组合按键——ctrl+enter时，才执行方法
可以用.ctrl修饰符
<input @keyup.ctrl.enter="submit" />
其他的系统修饰符还有
1）.alt
2）.shift
3）.meta
7..exact 修饰符
.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
这里我就直接复制官网的例子了，说得很清楚
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>
8.鼠标修饰符
1）.left
2）.right
3）.middle
这些修饰符会限制处理函数仅响应特定的鼠标按钮。
9.关于修饰符
大家只要对修饰符怎么用，大概有哪些有个印象就行了，这么多一下记住也比较费劲，等要用的是直接去官网上查就行了。
这节课基本把vue中事件处理中的知识点都说到了，事件出来在日常开发中也是经常用的，大家尽量自己写一写（除了修饰符的部分。。。），记忆更深刻。
