Как использовать методы Vue: простое руководство

Метод Vue — это функция, связанная с каждым экземпляром Vue и созданная с помощью свойства methods. Мы можем использовать их для выполнения определенных действий, когда пользователь взаимодействует с элементом, например, нажатие кнопки или ввод данных в поле ввода текста. Читайте дальше, чтобы узнать больше о том, как определять и использовать методы Vue.

Создание метода Vue

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

<script>
export default {
  methods: () => ({
    handleClick: () => {
      alert('You clicked the button.');
    },
    handleChange: () => {
      console.log('Text input changed');
    },
  }),
};
</script>

Это JavaScript, поэтому мы можем использовать более короткий синтаксис определения метода, представленный в ES 2015:

<script>
export default {
  methods: {
    handleClick() {
      alert('You clicked the button.');
    },
    handleInput() {
      console.log('Text input changed');
    },
  },
};
</script>

Методы вызова

Чтобы обработать событие с помощью метода, мы передаем его в директиву v-on, прикрепленную к элементу. Например:

<template>
  <div>
    <button v-on:click="handleClick">Click me</button>
    <input v-on:input="handleInput" />
  </div>
</template>
<script>
export default {
  methods: {
    handleClick() {
      alert('You clicked the button.');
    },
    handleInput() {
      console.log('Text input changed');
    },
  },
};
</script>

Мы также можем использовать символ @ для более короткого синтаксиса:

<template>
  <div>
    <button @click="handleClick">Click me</button>
    <input @input="handleInput" />
  </div>
</template>
<script>
export default {
  methods: {
    handleClick() {
      alert('You clicked the button.');
    },
    handleInput() {
      console.log('Text input changed');
    },
  },
};
</script>

Доступ к данным из методов Vue

Мы можем получить доступ к свойству данных с помощью this.{propertyName}, где propertyName — это имя одного из свойств, возвращаемых методом data(). Например:

<template>
  <div>Num: {{ num }}</div>
  <button @click="addOne">Add 1</button>
</template>
<script>
export default {
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    addOne() {
      this.num++;
    },
  },
};
</script>

Передача значений параметров в методы Vue

Методы Vue могут принимать аргументы, как обычные функции JavaScript. Мы можем передать аргументы, вызвав метод прямо в шаблоне со значениями параметров:

<template>
  <div>Number: {{ num }}</div>
  <button @click="add(5)">Add 5</button>
</template>
<script>
export default {
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    add(amount) {
      this.num += amount;
    },
  },
};
</script>

Заключение

Мы можем определить методы экземпляра Vue, передав объект свойству methods. Методы Vue похожи на функции JavaScript и позволяют нам добавлять интерактивность в наши приложения Vue.

Подпишитесь на информационный бюллетень Coding Beauty

Получайте новые советы и руководства по веб-разработке каждую неделю.

Подписаться