Utilizando v-on para ouvir eventos

Olá, alunos! Bem-vindos à aula 2 de Manipulação de Eventos em Vue.js. Hoje, vamos aprender a usar a diretiva v-on para ouvir eventos.

Relembrando

Na aula anterior, aprendemos o que são eventos e como eles são importantes para a manipulação de eventos. Também aprendemos a sintaxe básica da diretiva v-on.

O que é a diretiva v-on?

A diretiva v-on permite associar um evento a um método. A diretiva v-on é uma das diretivas mais importantes do Vue.js.

Como ouvir eventos com v-on

Para ouvir eventos com a diretiva v-on, usamos a seguinte sintaxe:

<elemento v-on:evento="metodo">

Onde:

• evento é o nome do evento que você deseja ouvir.
• metodo é o método que será chamado quando o evento ocorrer.

Exemplo

Vamos ver um exemplo de como usar a diretiva v-on para ouvir o evento click e ativar um botão:

<button v-on:click="ativarBotao">Ativar</button>

No exemplo acima, o método ativarBotao() será chamado quando o usuário clicar no botão.

Expressões JavaScript na diretiva v-on

Você pode usar expressões JavaScript na diretiva v-on para determinar se o evento deve ser ouvido ou não.

Por exemplo, vamos ver um exemplo de como usar a diretiva v-on para ouvir o evento click somente se o botão estiver desativado:

<button v-on:click="ativarBotao" v-bind:disabled="desativado">Ativar</button>

No exemplo acima, o método ativarBotao() só será chamado se o atributo desativado for falso.

Conclusão

A diretiva v-on é uma ferramenta poderosa que pode ser usada para ouvir eventos e responder a ações do usuário e eventos do sistema.

Na próxima aula, vamos aprender a criar e chamar métodos em resposta a eventos.

Compartilhar

Compartilhar

Siga-me