Vue教程事件监听

Posted 2021-09-04 _否极泰来_

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue教程事件监听相关的知识，希望对你有一定的参考价值。

Vue教程(十一)事件监听

事件监听

【.stop】 - 调用 event.stopPropagation()
【.prevent】 - 调用 event.preventDefault()
【.{keyCode | keyAlias}】 - 只当事件是从特定键触发时才触发回调
【.native】 - 监听组件根无素的原生事件
【.once】 - 只触发一次回调

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>11_event_listener</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <h3>事件监听</h3>
    <span>在某些情况下，我们拿到event的目的可能是进行一些事件的处理</span>
    <p>Vue提供了修饰符来帮助我们方便的处理一些事件处理</p>
    <ul>
      <li>.stop - 调用event.stopPropagation()</li>
      <li>.prevent - 调用event.preventDefault()</li>
      <li>.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调</li>
      <li>.native - 监听组件根无素的原生事件</li>
      <li>.once - 只触发一次回调</li>
    </ul>
    <hr />

    <div id="app">
      <p>.stop 案例：</p>
      <div
        @click="divClick"
        style="border:1px solid red;width: 200px;height: 100px;"
      >
        <button @click.stop="btnClick">按钮</button>
      </div>

      <hr />
      <p>.prevent 案例：</p>
      <form action="http://www.baidu.com">
        <input type="submit" value="提交" @click.prevent="submitClick" />
      </form>

      <hr />
      <p>.{keyCode | keyAlias}</p>
      <input type="text" @keyup.enter="keyupClick" />

      <hr />
      <p>.once</p>
      <button @click.once="onceClick">once事件</button>
    </div>
    <script>
      const app = new Vue({
        el: "#app",
        methods: {
          divClick() {
            console.log("div被点击...");
          },
          btnClick() {
            console.log("按钮被点击...");
          },
          submitClick() {
            console.log("提交按钮被点击...");
          },
          keyupClick() {
            console.log("键盘被弹起...");
          },
          onceClick() {
            console.log("once事件....");
          },
        },
      });
    </script>
  </body>
</html>

– 以上为《Vue教程(十一)事件监听》，如有不当之处请指出，我后续逐步完善更正，大家共同提高。谢谢大家对我的关注。

——厚积薄发(yuanxw)

以上是关于Vue教程事件监听的主要内容，如果未能解决你的问题，请参考以下文章