Detaillierte Einführung in die Verwendung der Vue-Ereignismodifikatorerfassung-js-Tutorial-php.cn

Detaillierte Einführung in die Verwendung der Vue-Ereignismodifikatorerfassung

亚连

Freigeben： 2018-06-14 15:46:41

Original

2398 Leute haben es durchsucht

Die Funktion des Capture-Ereignismodifikators besteht darin, dem Element einen Listener hinzuzufügen. Wenn das Element sprudelt, wird das Element mit diesem Modifikator zuerst ausgelöst. Dieser Artikel führt Sie in die Verwendung des Vue-Ereignismodifikators ein. Freunde, die ihn benötigen, können sich darauf beziehen.

Die Funktion des Erfassungsereignismodifikators. Verwenden Sie den Ereigniserfassungsmodus, wenn Sie Ereignis-Listener hinzufügen um dem Element einen Listener hinzuzufügen. Wenn das Element sprudelt, wird zuerst das Element mit diesem Modifikator ausgelöst. Wenn mehrere Modifikatoren vorhanden sind, werden diese von außen nach innen ausgelöst.

Das heißt, wer den Ereignismodifikator hat, wird zuerst ausgelöst.

Der Code lautet wie folgt:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>.capture事件修饰符</title>
  <style type="text/css">
    * {
      margin: 0 auto;
      text-align: center;
      line-height: 40px;
    }
    p {
      width: 100px;
    }
    #obj1 {
      background: deeppink;
    }
    #obj2 {
      background: pink;
    }
    #obj3 {
      background: hotpink;
    }
    #obj4 {
      background: #ff4225;
    }
  </style>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<p id="content">
  <p id="obj1" v-on:click.capture="doc">
    obj1
    <p id="obj2" v-on:click.capture="doc">
      obj2
      <p id="obj3" v-on:click="doc">
        obj3
        <p id="obj4" v-on:click="doc">
          obj4
          <!--。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。点击obj4的时候，弹出的顺序为：obj1、obj2、obj4、obj3；
          由于1，2有修饰符，故而先触发事件，然后就是4本身触发，最后冒泡事件。
          -->
        </p>
      </p>
    </p>
  </p>
</p>
<script type="text/javascript">
  var content = new Vue({
    el: "#content",
    data: {
      id: &#39;&#39;
    },
    methods: {
      doc: function () {
        this.id = event.currentTarget.id;
        alert(this.id)
      }
    }
  })
</script>
</body>
</html>

Nach dem Login kopieren

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Über Ajax-Anfragen in JQuery (ausführliches Tutorial)

Probleme mit EventLoop in JavaScript

Informationen zu Vue-Formularvalidierungsproblemen in Element

Wie verwende ich das Bildlupen-Plug-in in vue2.x?

Wie konfiguriere ich den Loader in Vue?

So erstellen Sie eine Entwicklungsumgebung mit vue+vuex+koa2

So implementieren Sie Datenaktualisierungen mit jquery+ajaxform+springboot

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Verwendung der Vue-Ereignismodifikatorerfassung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!