Méthodes Vue.js

Une méthode Vue est une fonction associée à l'instance Vue. Les méthodes sont définies dans lemethodsbiens. Voyons comment ils fonctionnent.


Que sont les méthodes Vue.js

Une méthode Vue est une fonction associée à l'instance Vue.

Les méthodes sont définies dans lemethodsbiens:

new Vue({
  methods: {
    handleClick: function() {
      alert('test')
    }
  }
})

ou dans le cas de composants à fichier unique:

<script>
export default {
  methods: {
    handleClick: function() {
      alert('test')
    }
  }
}
</script>

Les méthodes sont particulièrement utiles lorsque vous devez effectuer une action et que vous attachez unv-ondirective sur un élément à manipulerévénements. Comme celui-ci, qui appellehandleClicklorsque l'utilisateur clique sur l'élément:

<template>
  <a @click="handleClick">Click me!</a>
</template>

Passer des paramètres aux méthodes Vue.js

Les méthodes peuvent accepter des paramètres.

Dans ce cas, vous passez simplement le paramètre dans le modèle et vous

<template>
  <a @click="handleClick('something')">Click me!</a>
</template>
new Vue({
  methods: {
    handleClick: function(text) {
      alert(text)
    }
  }
})

ou dans le cas de composants à fichier unique:

<script>
export default {
  methods: {
    handleClick: function(text) {
      alert(text)
    }
  }
}
</script>

Comment accéder aux données d'une méthode

Vous pouvez accéder à l'une des propriétés de données du composant Vue en utilisantthis.propertyName:

<template>
  <a @click="handleClick()">Click me!</a>
</template>

<script> export default { data() { return { name: ‘Flavio’ } }, methods: { handleClick: function() { console.log(this.name) } } } </script>

Nous n'avons pas à utiliserthis.data.name, seulementthis.name. Vue nous fournit une liaison transparente. Utilisantthis.data.namesoulèvera une erreur.

Comme vous l'avez vu précédemment dans la description des événements, les méthodes sont étroitement liées aux événements, car elles sont utilisées comme gestionnaires d'événements. Chaque fois qu'un événement se produit, cette méthode est appelée.

Téléchargez mon gratuitManuel de Vue


Plus de tutoriels vue: