Обработка событий кликов в Vue.js

На английском языке «vuejs click» относится к механизму обработки событий в Vue.js, когда пользователь нажимает на элемент. В Vue.js доступно несколько методов обработки событий кликов. Вот некоторые часто используемые методы:

  1. Использование директивы v-on: Vue.js предоставляет директиву v-on, обычно обозначаемую символом «@», для обработки событий. Чтобы обработать событие щелчка, вы можете использовать директиву v-on:click или @click, за которой следует имя метода, который вы хотите выполнить. Например:

    <button v-on:click="handleClick">Click me</button>
    methods: {
    handleClick() {
    // Method logic goes here
    }
    }
  2. Использование сокращенной записи. Альтернативно вы можете использовать сокращенную запись с символом «@». Это эквивалентно директиве v-on. Вот пример:

    <button @click="handleClick">Click me</button>
  3. Передача аргументов в обработчик событий. Вы также можете передать аргументы в функцию обработчика событий с помощью директивы v-on. Например:

    <button @click="handleClick('Hello')">Click me</button>
    methods: {
    handleClick(message) {
    console.log(message); // Output: Hello
    }
    }
  4. Модификаторы событий. Vue.js предоставляет модификаторы событий, которые можно использовать для изменения поведения обработки событий. Например, вы можете использовать модификатор .stop, чтобы остановить распространение событий клика на родительские элементы:

    <button @click.stop="handleClick">Click me</button>
  5. Делегирование событий: Vue.js поддерживает делегирование событий, при котором вы можете обрабатывать события щелчка по нескольким элементам, используя один обработчик событий. Это достигается с помощью модификатора .self. Вот пример:

    <ul @click.self="handleClick">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    </ul>