В Vue 2.0, Vue определяет методы компонентов внутри объекта methods как часть экземпляра Vue. Вы описываете каждый компонентный метод как обычную функция JavaScript. Метод Vue привязан к вашему компоненту и может быть запущен из любого места внутри компонента, которому он принадлежит. Он также имеет доступ к this, который указывает на экземпляр компонента:
<script>
export default {
methods: {
myMethod() { console.log('my first method'); }
}
}
</script>Начиная с Vue 3.0, с помощью <script setup>, как и в случае с локальными данными, вы можете
определить метод как обычную функцию, и он будет работать так же, как и в подходе vue 2.
Следовательно, мы можем переписать предыдущий код так:
<script setup>
const myMethod = () => { console.log('my first method'); }
</script>Затем вы можете привязать методы к HTML-событиям элемента в разделе template. При привязке событий к элементам HTML
в Vue вы должны использовать символ @. Например, v-on:click эквивалентен
на @click, как показано в следующем блоке кода:
<template>
<button id="click-me" v-on:click="myMethod">Click me</button>
<button id="click-me" @click="myMethod">Click me shorter</button>
</template>Клик по обеим кнопкам запускает один и тот же метод myMethod() и выдает один и тот же результат.
Давайте создадим компонент с некоторыми методами.
Упражнение - создание методов
В этом упражнении мы собираемся создать компонент, использующий методы Vue. Думайте о методах как о функциях в JavaScript, так как они ведут себя очень похоже.
Создайте и импортируйте пустой компонент, как это показано в упражнении.
Создайте скелет компонента, используя секции - <template> <script> и <style>.
Код, внутри секции script, будет таким:
<script setup>
const triggerAlert = (index) => {
alert(`${index} has been clicked`)
}
</script>В разделе template настройте цикл v-for для HTML списка и добавьте элемент кнопки внутри элемента списка. Установите цикл на повторение 5 раз и отобразите индекс
в качестве метки каждой кнопки:
<template>
<div>
<h1>Triggering Vue Methods</h1>
<ul>
<li v-for="index in 5":key="index">
<button>Trigger {{index}}</button>
</li>
</ul>
</div>
</template>Добавьте директиву @click, ссылающуюся на метод triggerAlert, и передайте значение индекса в качестве аргумента:
<template>
<div>
<h1>Triggering Vue Methods</h1>
<ul>
<li v-for="index in 5" :key="index">
<button @click="triggerAlert(index)">Trigger {{ index }}</a>
</li>
</ul>
</div>
</template>Добавите стилей, в секцию style:
<style>
button {
margin: 10px;
}
</style>На вашей странице должен появиться список кнопок, при нажатии на которые появляется alert с сообщением, которое
содержит номер кнопки, которую вы нажали.
Хотя вы и можете добавлять прослушку событий к любому HTML-элементу, мы рекомендуем применять его к
нативным интерактивным элементам HTML, такие как ссылки, input или button.
В следующей статье мы рассмотрим, как возвращать данные с помощью методов Vue внутри компонента Vue.