Методы Vue.js

Метод Vue - это функция, связанная с экземпляром Vue. Методы определены внутриmethodsсвойство. Посмотрим, как они работают.


Что такое методы Vue.js

Метод Vue - это функция, связанная с экземпляром Vue.

Методы определены внутриmethodsсвойство:

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

или в случае однофайловых компонентов:

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

Методы особенно полезны, когда вам нужно выполнить действие и вы прикрепляетеv-onдиректива об элементе для обработкиСобытия. Как этот, который зоветhandleClickпри щелчке по элементу:

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

Передача параметров в методы Vue.js

Методы могут принимать параметры.

В этом случае вы просто передаете параметр в шаблоне, и вы

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

или в случае однофайловых компонентов:

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

Как получить доступ к данным из метода

Вы можете получить доступ к любым свойствам данных компонента Vue, используяthis.propertyName:

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

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

Нам не нужно использоватьthis.data.name, толькоthis.name. Vue предоставляет нам прозрачную привязку. С помощьюthis.data.nameвызовет ошибку.

Как вы видели ранее в описании событий, методы тесно связаны с событиями, потому что они используются как обработчики событий. Этот метод вызывается каждый раз, когда происходит событие.

Скачать мою бесплатнуюСправочник по Vue


Больше руководств по vue: