我们之前已经学过使用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中事件处理中的知识点都说到了，事件出来在日常开发中也是经常用的，大家尽量自己写一写（除了修饰符的部分。。。），记忆更深刻。