So verwenden Sie den Modifikator .native in Vue.js

Dieses Mal zeige ich Ihnen, wie Sie den .native-Modifikator in Vue.js verwenden und welche Vorsichtsmaßnahmen für die Verwendung des .native-Modifikators in Vue.js gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

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 möglicherweise ein natives Ereignis auf dem anhören 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ören Sie ein Ereignis auf ein normales HTML-Tag, und dann funktioniert das Hinzufügen des Modifikators .native nicht. Zum Beispiel:

HTML-Code

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

JavaScript-Code

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

Das Ergebnis

wird dem Stammelement übergeben einer Komponente Hören Sie sich ein Ereignis an und fügen Sie dann den Modifikator .native hinzu, damit es funktioniert. 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 wechseln Sie die Landessprache in Vue

Wie Sie das Vue-Projekt international entwickeln

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Modifikator .native in Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!