Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erläuterung der Verwendung des Modifikators .native in Vue.js

Detaillierte Erläuterung der Verwendung des Modifikators .native in Vue.js

php中世界最好的语言
php中世界最好的语言Original
2018-04-27 09:20:342656Durchsuche

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Verwendung des .native-Modifikators in Vue.js geben. Was sind die Vorsichtsmaßnahmen bei der Verwendung des .native-Modifikators in Vue.js? . Werfen wir einen Blick darauf.

Modifikatoren sind spezielle Suffixe, die durch einen halbbreiten Punkt angezeigt werden. Sie werden verwendet, um anzugeben, dass ein Befehl auf besondere Weise gebunden werden soll. Dieser Artikel stellt Ihnen den .native-Modifikator in Vue.js vor. Interessierte Freunde sollten einen Blick darauf werfen.

.native-Modifikator

Die offizielle Erklärung des .native-Modifikators lautet:

Manchmal möchten Sie vielleicht „Hören Sie sich einen Native an“ hinzufügen Ereignis für das Element. Sie können den v-on-Modifikator .native verwenden. Zum Beispiel:

<my-component v-on:click.native="doTheThing"></my-component>

Ein einfaches Verständnis ist:

hört auf ein Ereignis für das gewöhnliche HTML-Tag und fügt dann den Modifikator .native hinzu wird nicht. Es funktioniert. Zum Beispiel:

HTML-Code

<p id="app">
  <a href="#" rel="external nofollow" v-on:click.native="clickFun">click me</a>
</p>

JavaScriptCode

new Vue({
  el: '#app',
  methods: {
    clickFun: function(){
      console.log("message: success")
    }
  }
})

Ergebnis

zu Jemand hört ein Ereignis im Stammelement einer Komponente ab und fügt dann den Modifikator .native hinzu, damit er wirksam wird. Zum Beispiel:

HTML-Code

<p id="app">
  <my-component v-on:click.native="clickFun"></my-component>
</p>

JavaScript-Code

Vue.component('my-component', {
  template: `click me`
})
new Vue({
  el: '#app',
  methods: {
    clickFun: function(){
      console.log("message: success")
    }
  }
})

Ergebnis

Ich glaube, Sie haben es danach gemeistert Lesen Sie den Fall in diesem Artikel. Weitere spannende Methoden finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So passen Sie Bilder in WeChat-Miniprogrammen an die Modellgröße an

Erstellen Sie einen benutzerdefinierten Selektor mit jQuery Detaillierte Erläuterung der Schritte

So erhalten Sie die Get-Parameter in der URL

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung des Modifikators .native in Vue.js. 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