suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Einführung in die Verwendung der Vue-Ereignismodifikatorerfassung

Detaillierte Einführung in die Verwendung der Vue-Ereignismodifikatorerfassung

亚连
亚连Original
2018-06-14 15:46:412456Durchsuche

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>

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：vue+storejs kümmert sich um das Abrufen von DatenNächster Artikel：vue+storejs kümmert sich um das Abrufen von Daten

In Verbindung stehende Artikel

Mehr sehen