Heim > Web-Frontend > js-Tutorial > Hauptteil

Vue.js-Ereignisbindung – integrierte Ereignisbindung, benutzerdefinierte Ereignisbindung

php中世界最好的语言
Freigeben: 2018-03-13 14:07:45
Original
2908 Leute haben es durchsucht

Dieses Mal präsentiere ich Ihnen die Ereignisbindung von Vue.js – integrierte Ereignisbindung, benutzerdefinierte Ereignisbindung, Ereignisbindung mit Vue.js – integrierte Ereignisbindung, Anpassung Was sind die Vorsichtsmaßnahmen für die Ereignisbindung? Hier ist ein praktischer Fall, werfen wir einen Blick darauf.

<button v-on:click="toggle">切换</button>
Nach dem Login kopieren

kann abgekürzt werden als

<button @click="toggle">切换</button>
Nach dem Login kopieren

Eingebaute Ereignisbindung

Sprudelnde Ereignisse verhindern

<button @click.stop="toggle">切换</button>
Nach dem Login kopieren

Häufig verwendete EreignisseModifikator:keydown

Eingegebener Inhalt oder Inhaltsänderungen im @keydown-Eingabefeld lösen die Ausführung aus

<input type="text" @keydown="onkeydown">......<script>
  export default {    methods: {
      onkeydown () {        console.log(&#39;on key down&#39;)
      }
    }
  }</script>
Nach dem Login kopieren

Wird ausgelöst, wenn die Eingabetaste über die Tastatur gedrückt wird, indem der Modifikator @keydown angegeben wird. enter Sie können beim Ausführen von
auch den Schlüsselcode verwenden: zum Beispiel @keydown.13; um den gleichen Effekt zu erzielen

<input @keydown.enter="onkeydown">//这两个效果一样<input @keydown.13="onkeydown">......<script>
  export default {    methods: {
      onkeydown () {        console.log(&#39;on key down&#39;)
      }
    }
  }</script>
Nach dem Login kopieren

Benutzerdefinierte Ereignisbindung

Benutzerdefinierte Ereignisbindung wird im Allgemeinen verwendet benutzerdefiniertKomponente definieren
Der Code auf der benutzerdefinierten Komponente a.vue lautet wie folgt

<template>
  <div class="hello">
    {{ hello }}    <button @click="emitMyEvent">emit</button>
  </div></template><script>
  export default {
    data () {      return {        hello: &#39;I am componnet a&#39;
      }
    },    methods: {
      emitMyEvent () {//        触发自定义事件 my-event 并传递一个参数 this.hello
        this.$emit(&#39;my-event&#39;, this.hello)
      }
    }
  }</script>
Nach dem Login kopieren

In der aufgerufenen Komponente

<template>
  <div id="myapp">
    <!--在父组件中监听了 comA 的 my-event 事件 当触发的时候 我们执行了 onComaMyEvent -->
    <comA @my-event="onComaMyEvent"></comA>
  </div></template><script>
  import comA from &#39;./components/a.vue&#39;
  export default {    components: {comA},    methods: {//      parmfromA为传递过来的参数
      onComaMyEvent (parmfromA) {        console.log(parmfromA)
      }
    }
  }</script>
Nach dem Login kopieren

Ich glaube, das haben Sie Lesen Sie den Fall in diesem Artikel. Sie beherrschen die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Synchronisierte Aktualisierungsmethode für Listendaten in Vue.js

Listenrendering v in Vue.js -für Array-Objekt-Unterkomponente

Textwiedergabe von Vue.js

Was sind die Vorsichtsmaßnahmen für die Verwendung von Vue.js?

Das obige ist der detaillierte Inhalt vonVue.js-Ereignisbindung – integrierte Ereignisbindung, benutzerdefinierte Ereignisbindung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!