Trabalhar com eventos

• 3 minutos

Em um aplicativo, eventos são ações que podem ocorrer, mas você não sabe necessariamente quando. Por exemplo, se você tem um botão em uma página, sabe que o usuário provavelmente o selecionará. Mas não sabe em que momento.

Você precisa saber como lidar com eventos para criar qualquer aplicativo Web. Aqui, você vai explorar como gerenciar eventos usando o Vue.js.

Diretiva v-on e @

O Vue.js fornece uma diretiva chamada v-on que você pode associar a qualquer evento, como v-on:click. Como o tratamento de eventos é uma tarefa principal, o Vue.js também fornece o atalho @ para qualquer evento. Portanto, para associar um evento de clique, você pode usar o atalho @click.

Manipuladores de eventos

Você pode criar manipuladores de eventos adicionando funções ao campo methods em um aplicativo ou componente do Vue. O campo methods é como data(), mas em vez de retornar objetos de estado, ele mantém uma lista de funções disponíveis para o aplicativo. Você pode fazer referência a essas funções em seu HTML da mesma maneira que faz referência a outras funções JavaScript.

Quando você adiciona um método a um aplicativo ou componente do Vue, this aponta para a instância ativa. Todos os dados disponíveis para a instância ativa, como name no exemplo a seguir, podem ser acessados do this.

Criar um manipulador de eventos

Para criar um método que exibe o valor da propriedade de dados name quando é chamado, você pode seguir este exemplo:

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

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

Como displayName() é adicionado à propriedade methods, ele é acessível ao modelo e pode ser associado a um evento.

Associar o manipulador de eventos a um evento

Você pode associar a função displayName() ao evento click usando a abreviação @click. Quando o usuário seleciona o botão, a função displayName() é invocada.

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