Comment utiliser le modificateur .native dans Vue.js

Cette fois, je vais vous montrer comment utiliser le modificateur .native dans Vue.js, et quelles sont les précautions à prendre pour utiliser le modificateur .native dans Vue.js. Ce qui suit est un cas pratique, jetons un coup d'œil.

Les modificateurs sont des suffixes spéciaux indiqués par un point demi-largeur ., utilisés pour indiquer qu'une commande doit être liée d'une manière spéciale. Cet article vous présentera le modificateur .native dans Vue.js. Les amis intéressés devraient y jeter un œil.

Modificateur .native

L'explication officielle du modificateur .native est :

Parfois, vous souhaiterez peut-être ajouter Écouter un événement natif sur le élément. Vous pouvez utiliser le modificateur v-on .native . Par exemple :

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

Une compréhension simple est :

Écoutez un événement pour une balise HTML normale, puis l'ajout du modificateur .native ne fonctionnera pas. Par exemple :

Code HTML

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

Code JavaScript

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

résultat

d'un composant Écoutez un événement sur l'élément racine, puis ajoutez le modificateur .native pour prendre effet. Par exemple :

Code HTML

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

Code JavaScript

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

Résultats

Je te crois lisez cet article Vous maîtrisez la méthode des cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment changer la langue nationale dans Vue

Comment développer le projet vue à l'international

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!