Методы 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:


Tech Wiki Online!