个人名片：
😊作者简介：一名大二在校生
🤡 个人主页：坠入暮云间x
🐼座右铭：懒惰受到的惩罚不仅仅是自己的失败，还有别人的成功。
🎅**学习目标: 坚持每一次的学习打卡

前言

在vue的学习过程中，我们常会用到事件处理，比如在表单提交，按钮中，列表多级菜单折叠等，都是需要监听点击事件才可以实现。之前学习js中也常用到各种事件，在vue中我们将事件处理可以通过事件来控制数据，帮助我们更好的实现

侦听事件

1.事件的基本使用

1. 使用 v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
2. 事件的回调需要配置在methods对象中，最终会在vm上；
3. methods中配置的函数，不要用箭头函数！否则this就不是vm了；
4. methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
5. @click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；

2.v-on

语法：<button v-on:需要响应的事件名="处理事件的函数名"></button>
缩写：@
注意：处理时间的函数名必须写在methods中，要让当前组件实例可访问
代码演示：

  <div id="app"><h2>点击数：{{counter}}</h2><h2></h2><button @click="increment">+</button><button  @click="decrement">-</button></div><script>/*v-on指令作用：绑定事件监听器缩写 @语法： Function|Inline Statement|Object参数： event*/const app = new Vue({el:'#app',data:{counter:0},methods:{increment(){this.counter++},decrement(){this.counter--}}})</script>

事件修饰符

语法：<button v-on:事件名.事件修饰符="处理函数"></button>

1. prevent：阻止默认事件（常用）；event.preventDefault()
2. stop：阻止事件冒泡（常用）；event.stopPropagation()
3. once：事件只触发一次（常用）；
4. capture：使用事件的捕获模式；
5. self：只有event.target是当前操作的元素时才触发事件；
6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

修饰符也可以同时使用多个：

<button v-on:事件名.事件修饰符1.事件修饰符2.事件修饰符3="处理函数"></button>

代码示例：

 <div id="app"><!-- .stop 修饰符 阻止事件冒泡 --><div @click="divClick"><button @click.stop="btnClick">按钮</button></div><!-- .prevent修饰符使用 提交时间不在重载页面 --><form action="baidu"><input type="submit" value="提交" @click.prevent="submitClick"><button @click.prevent="submitClick">按钮1</button></form><!-- 监听某个键盘的键帽点击 --><input type="text" @keyup.enter="keyup"><!-- once 只触发一次使用 --><button @click.once="btn2Click">按钮2</button></div><script>const app =new Vue({el:'#app',data:{message:'你好啊'},methods:{btnClick(){alert('btnClick');},divClick(){alert('divClick')},submitClick(){alert('submitClick')},keyup(){alert('keyup')},btn2Click(){alert('btn2Click')}}})</script>

关键修饰符

1. 回车 => enter
2. 删除 => delete (捕获“删除”和“退格”键)
3. 退出 => esc
4. 空格 => space
5. 换行 => tab (特殊，必须配合keydown去使用)
6. 上 => up
7. 下 => down
8. 左 => left
9. 右 => right