Метод 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:
- Обзор Vue.js
- Интерфейс командной строки Vue.js: узнайте, как его использовать
- Инструменты разработчика Vue.js
- Настройка VS Code для разработки Vue
- Создайте свое первое приложение с Vue.js
- Однофайловые компоненты Vue.js
- Шаблоны и интерполяции Vue.js
- Директивы Vue.js
- Методы Vue.js
- Вычисляемые свойства Vue.js
- Стилизация компонентов Vue.js с помощью CSS
- Наблюдатели Vue.js
- Методы Vue против наблюдателей против вычисляемых свойств
- Фильтры Vue.js
- Компоненты Vue.js
- Слоты Vue.js
- Свойства компонента Vue.js
- События Vue.js
- Связь компонентов Vue.js
- Vuex, государственный менеджер Vue.js
- Vue, используйте компонент внутри другого компонента
- Vue, как использовать опору в качестве имени класса
- Как использовать SCSS с однофайловыми компонентами Vue.js
- Использование Tailwind с Vue.js
- Маршрутизатор Vue
- Динамически отображать компонент Vue
- Шпаргалка по Vue.js
- Храните данные Vue в localStorage с помощью Vuex
- Как динамически применять класс с помощью Vue
- Vue, как использовать v-модель
- Vue, почему данные должны быть функцией
- Roadmap to become a Vue.js developer in 2020