Предыдущий

Следующая

Работа с событиями

Завершено

В приложении события — это действия, которые могут возникать, но не всегда известно, когда. Например, если у вас на странице есть кнопка, вы знаете, что пользователь может ее нажать. Но вы не знаете, когда.

Для создания любого веб-приложения нужно уметь обрабатывать события. Здесь рассматривается управление событиями с помощью Vue.js.

Директива v-on и @

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

Обработчики событий

Обработчики событий можно создавать путем добавления функций в поле methods в приложении или компоненте Vue. Поле methods похоже на data(), но вместо возврата объектов состояния оно содержит список доступных функций для приложения. Вы можете ссылаться на эти функции в HTML так же, как вы ссылаетесь на другие функции JavaScript.

Примечание.

Основная причина добавления функций в поле methods заключается в том, что функции могут обращаться к любым зарегистрированным данным.

При добавлении метода в приложение или компонент Vue this указывает на активный экземпляр. Все данные, доступные для активного экземпляра, например name в следующем примере, доступны из this.

Создание обработчика событий

Чтобы создать метод, отображающий значение свойства данных name при его вызове, можно выполнить следующий пример:

const app = Vue.createApp({
    data() {
        return {
            name: 'Cheryl'
        }
    },

    methods: {
        displayName() {
            console.log(this.name);
        }
    }
});

Так как displayName() добавляется к свойству methods, оно доступно для шаблона и может быть привязано к событию.

Привязка обработчика событий к событию

Функцию displayName() можно привязать к событию click с помощью ярлыка @click. Когда пользователь нажимает кнопку, вызывается функция displayName().

<button type="button" @click="displayName">Display name</button>

Продолжить