事件绑定

1. 我们需要给一个标签绑定事件 就需要借助一个指令 叫 v-on
2. 绑定事件的方式
   1. 第一种方式 事件中可以直接写代码

         <button v-on:click="count++">累加</button>

   2. 第二种方式 在执行方法 方法名后面可以不用加小括号
      1. 没有加小括号也可以获取到事件对象
      2. 在函数中 this 指向 vm
      3. methods 中的 函数一般情况下不要写为箭头函数 因为这样将无法获取到 vm 实例对象
      4. 写法:

            <button v-on:click="changeCount">累加</button>

   3. 第三种方式 使用小括号的方式没有事件对象 e
      1. 这种方式下需要使用 $event 传递事件对象 e
      2. 如果有多个数据需要传递的时候 这种方式就是最佳的方式
      3. 写法：

            <button v-on:click="changeCount($event, 40)">累加</button>

   4. 第四种方式 简写形式 @ 就是 v-on 的缩写形式 @ 后面不需要加 ":" 指令后面加事件名称就可以绑定事件

         <button @click="changeCount($event, 40)">累加</button>

   5. 第五种 多事件处理 多事件调用时必须加括号

         <button @click="changeCount($event, 40), two($event)">多事件处理</button>

事件修饰符

1. .stop
   1. 解释：阻止事件的传播
   2. 例子：

         <div @click="clickDiv($event, 'box')" class="box">
         <!-- 事件修饰符  事件后面打点调用修饰符就可以了 -->
         <div @click.stop="clickDiv($event, 'item')" class="item"></div>
         </div>

2. .prevent
   1. 解释：阻止默认事件
   2. 例子：

         <form action="" method="get">
         <!-- 不想提交表单 阻止默认事件 -->
         <input @click.prevent="submit" type="submit" />
         </form>

3. .capture
   1. 解释：使用事件的捕获模式
   2. 例子：

         <div @click.capture="clickDiv($event, 'box')" class="box">
            <!-- 事件修饰符  事件后面打点调用修饰符就可以了 -->
            <div @click.capture="clickDiv($event, 'item')" class="item"></div>
         </div>
         <!-- 阻止事件传播  事件修饰符可以连续调用-->
         <!-- .capture  事件捕获阻止-->
         <div @click.capture.stop="clickDiv($event, 'box')" class="box">
            <!-- 事件修饰符  事件后面打点调用修饰符就可以了 -->
            <div @click.capture="clickDiv($event, 'item')" class="item"></div>
         </div>

4. .self
   1. 解释：触发事件的元素是自身的时候才会触发事件 (e.target 和自身标签元素一致的时候才会触发)
   2. 例子：

         <div @click.self="clickDiv($event, 'box')" class="box">
            <!-- 事件修饰符  事件后面打点调用修饰符就可以了 -->
            <div @click="clickDiv($event, 'item1')" class="item1">
               <div @click="clickDiv($event, 'item')" class="item"></div>
            </div>
         </div>

5. .once
   1. 解释：指定事件只能触发一次
   2. 例子：

         <button @click.once="once">我只能点一次</button>

6. .passive
   1. 解释：滚动事件的默认行为 (即滚动行为) 将会立即触发
   2. 实例:

         <div
         class="scroll"
         @scroll.passive="scroll"
         style="
         overflow-y: scroll;
         width: 200px;
         height: 300px;
         border: 1px solid black;
         "
         >
            <div
               class="content"
               style="width: 100px; height: 3000px; background-color: red"
            ></div>
         </div>

键盘事件

1. Vue 为最常用的键提供了别名： 指定按下键盘中的某个键触发事件
   1. .enter 按 enter 回车 键执行响应的事件

         <input type="button" @keyup.enter="keyup" value="enter" />

   2. .tab 按 tab 键执行响应的事件

         <!-- .tab 用于切换聚焦点 使用tab 切换到指定 标签元素才会触发事件 -->
         <input type="button" @keyup.tab="keyup" value="tab" />

   3. .delete (捕获“删除”和“退格”键)

         <input type="button" @keyup.delete="keyup" value="delete" />

   4. .esc 按 esc 键执行响应的事件

         <input type="button" @keyup.esc="keyup" value="esc" />

   5. .space 按空格 键执行响应的事件

         <input type="button" @keyup.space="keyup" value="space" />

   6. .up .down .left .right 上下左右四个方向键

         <input type="button" @keyup.up="keyup" value="up" />

2. 其他键的使用
   1. 你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。
      1. home 键

            <input type="button" @keyup.home="keyup" value="home" />

      2. page-down

            <input type="button" @keyup.page-down="keyup" value="page-down" />

      3. 键盘 abcd 键使用

            <input type="button" @keyup.a="keyup" value="a" />

   2. 对于某些标点符号键，可以直接把它们包含进去，
      • ","

            <input type="button" @keyup.,="keyup" value="," />

   3. 语法的限制导致某些特定字符无法被匹配，比如 "、'、/、=、> 和 .。对于这些字符，你应该在监听器内使用 event.key 代替。

         <input type="button" @keyup.,="keyup" value="." />

         var option = {
            data() {
               return {}
            },
            methods: {
               //   keyup(e) {
               //     console.log(e.key)
               //     console.log('键盘按下了')
               //   },
               keyup(e) {
                  // console.log(e.key)
                  if (e.key == '.') {
                  console.log(e)
                  console.log('键盘按下了')
                  }
               }
            }
         }
         var vm = Vue.createApp(option).mount('#app')

系统修饰符 与 鼠标修饰符

1. 只有在按下这些键的时候才能触发事件

   1. ctrl

      1. 表示你按下 ctrl 并按下 a 的时候才生效
      2. 只要你按下 ctrl 键 无论中间按下什么键 最后只要是 a 都可触发事件
      3. 写法：

            <input type="button" value="ctrl" @keyup.ctrl.a="keyup" />

   2. .alt

         <input type="button" value="alt" @click.alt="keyup" />

   3. .shift

         <input type="button" value="shift" @click.shift="keyup" />

   4. .meta

         <input type="button" value="meta" @keyup.meta.enter="keyup" />

   5. .exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

         <!-- .exact 只能按下 系统修饰符这一个键才能触发事件 不能多按其他的系统的修饰符 -->
         <input type="button" value="ctrl" @click.ctrl.exact="keyup" />
         <input type="button" value="ctrl" @keyup.ctrl.c.exact="keyup" />

2. 鼠标修饰符

   1. .left 按下鼠标左键触发事件
   2. .right 按下鼠标右键触发事件
   3. .middle 按下鼠标中间的键触发事件
   4. 例子：

         <input type="button" value="middle" @click.middle="keyup" />