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.