Vue事件处理（事件修饰符，键盘事件）

Vue中的事件修饰符：
    1.prevent:阻止默认事件（常用）
    2.stop: 阻止事件冒泡（常用）
    3.once: 事件只触发一次（常用）
    4.capture: 使用事件的捕获模式
    5.self:只有event.target是当前操作的元素时才触发的事件 target：触发事件
    6.passsive: 事件的默认行为是立即执行，无需等待事件回调执行完毕
    7.修饰符也可以连用

<div id="root">
      <h2>欢迎来到{{name}}学习</h2>
      <!-- .prevent阻止默认事件 -->
      <a href="http://www.upguigu.com" @click.prevent="showInfo">点击我会提示</a>
      <!-- stop: 阻止事件冒泡（常用）只能阻止在这个触发事件上的冒泡 -->
      <div @click="showInfo">
        <div class="demo1" @click="showInfo">
          <button @click.stop="showInfo">点我阻止冒泡</button>
        </div>
      </div>
      <!-- once:事件只触发一次（常用） -->
      <button @click.once="showInfo">点我只触发一次</button>
      <!-- capture: 使用事件的捕获模式 -->
      <div class="demo2" @click.capture="showMsg($event,1)">
        div1
        <div class="demo3" @click="showMsg($event,2)">div2</div>
      </div>
      <!-- 5.self:只有event.target是当前操作的元素时才触发的事件 target：触发事件
     -->
      <div class="demo2" @click.self="showMsg($event,1)">
        div1
        <div class="demo3" @click="showMsg($event,2)">div2</div>
      </div>
    </div>
  </body>

  <script>
    const vm = new Vue({
      el: "#root",
      data: function () {
        return {
          name: "尚硅谷",
        };
      },
      methods: {
        showInfo(e) {
          alert(e.target.innerText);
          //   e.stopPropagation(); //阻止冒泡,可以阻止这个触发事件上的所有冒泡
          e.preventDefault(); //阻止调用回调函数后的默认事件
        },
        showMsg(e, message) {
          console.log(e.target);
          console.log(message);
        },
      },
    });
  </script>

1.Vue中常用的按键别名：
       回车 => enter
       删除 => delete (捕获“删除”和“退格”键)
       退出 => esc
       空格 => space
        换行 => tab (特殊，必须配合keydown去使用)
       上 => up
       下 => down
       左 => left
       右 => right
2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
3.系统修饰键（用法特殊）：ctrl、alt、shift、meta（win键）
      (1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
      (2).配合keydown使用：正常触发事件。
4.也可以使用keyCode去指定具体的按键（不推荐）
5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
6.ctrl.y:按键可以连用，表示ctrl键+y键

 <div id="root">
      <h2>欢迎来到{{name}}学习</h2>
      <input type="text" placeholder="按下回车键提示输入" @keyup.caps-lock="showInfo" />
    </div>
  </body>
  <script>
    const vm = new Vue({
      el: "#root",
      data: {
        name: "尚硅谷",
      },
      methods: {
        showInfo(e) {
          //通过键盘值确定鼠标点击的哪个按钮，开启鼠标事件
          //   e.key获取键名，e.keyCode获取ASCLL码，
          //   if (e.key !== "CapsLock") return;
          //   else console.log(e.target.value);
          console.log(e.target.value);
        },
      },
    });
  </script>