Maison >interface Web >js tutoriel >Explication détaillée de l'utilisation du modificateur .native dans Vue.js

Explication détaillée de l'utilisation du modificateur .native dans Vue.js

php中世界最好的语言
php中世界最好的语言original
2018-04-27 09:20:342691parcourir

Cette fois, je vais vous apporter une explication détaillée de l'utilisation du modificateur .native dans Vue.js. Quelles sont les précautions lors de l'utilisation du modificateur .native dans Vue.js. . Jetons un coup d'oeil.

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 natif événement sur l'é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 la balise HTML ordinaire , puis ajoutez le . modificateur natif car cela ne fonctionnera pas. Par exemple :

Code HTML

<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")
    }
  }
})

Résultat

Écoutez un événement sur l'élément racine d'un composant, puis ajoutez le modificateur .native et cela fonctionnera. 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 adapter les images à la hauteur du modèle dans les mini-programmes WeChat

Créer un sélecteur personnalisé avec jQuery Explication détaillée des étapes

Comment obtenir les paramètres Get dans l'Url

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn