个人名片：
😊作者简介：一名大二在校生
🤡 个人主页：坠入暮云间x
🐼座右铭：懒惰受到的惩罚不仅仅是自己的失败，还有别人的成功。🎅**学习目标: 坚持每一次的学习打卡
文章目录
前言
在vue的学习过程中，我们常会用到事件处理，比如在表单提交，按钮中，列表多级菜单折叠等，都是需要监听点击事件才可以实现。之前学习js中也常用到各种事件，在vue中我们将事件处理可以通过事件来控制数据，帮助我们更好的实现
侦听事件
1.事件的基本使用
- 使用
v-on:xxx或@xxx绑定事件，其中xxx是事件名； - 事件的回调需要配置在methods对象中，最终会在
vm上； methods中配置的函数，不要用箭头函数！否则this就不是vm了；methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；@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>
- prevent：阻止默认事件（常用）；event.preventDefault()
- stop：阻止事件冒泡（常用）；event.stopPropagation()
- once：事件只触发一次（常用）；
- capture：使用事件的捕获模式；
- self：只有event.target是当前操作的元素时才触发事件；
- 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>
关键修饰符
- 回车 => enter
- 删除 => delete (捕获“删除”和“退格”键)
- 退出 => esc
- 空格 => space
- 换行 => tab (特殊，必须配合keydown去使用)
- 上 => up
- 下 => down
- 左 => left
- 右 => right
