Criando e chamando métodos em resposta a eventos

Olá, alunos! Bem-vindos à aula 3 de Manipulação de Eventos em Vue.js. Hoje, vamos aprender a criar e chamar métodos em resposta a eventos.

Relembrando

Nas aulas anteriores, aprendemos o que são eventos e como eles são importantes para a manipulação de eventos. Também aprendemos a usar a diretiva v-on para ouvir eventos.

O que são métodos?

Métodos são funções que são definidas dentro de um componente Vue.js. Os métodos podem ser chamados de qualquer lugar dentro do componente, incluindo em resposta a eventos.

Como criar métodos

Para criar um método, usamos a seguinte sintaxe:

methods: {
  meuMetodo: function() {
    // Código do método
  }
}

Onde:

• meuMetodo é o nome do método.
• function() é a definição do método.

Exemplo

Vamos ver um exemplo de como criar um método:

methods: {
  ativarBotao: function() {
    // Ativar o botão
  }
}

Chamando métodos

Para chamar um método, usamos a seguinte sintaxe:

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

Onde:

• evento é o nome do evento que você deseja ouvir.
• meuMetodo é o nome do método que você deseja chamar.

Exemplo

Vamos ver um exemplo de como chamar um método em resposta a um evento:

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

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

Passando parâmetros para métodos

Você pode passar parâmetros para métodos usando a seguinte sintaxe:

<elemento v-on:evento="meuMetodo(parametro1, parametro2)">

Onde:

• evento é o nome do evento que você deseja ouvir.
• meuMetodo é o nome do método que você deseja chamar.
• parametro1 e parametro2 são os parâmetros que você deseja passar para o método.

Exemplo

Vamos ver um exemplo de como passar parâmetros para um método em resposta a um evento:

<input v-on:input="alterarValor(valor)">

No exemplo acima, o método alterarValor() será chamado quando o usuário alterar o valor do elemento de entrada. O método alterarValor() receberá o novo valor do elemento de entrada como parâmetro.

Conclusão

A capacidade de criar e chamar métodos em resposta a eventos é uma habilidade essencial para qualquer desenvolvedor Vue.js. Com este conhecimento, você pode criar aplicativos Vue.js que respondam de forma dinâmica às ações do usuário.

No próximo módulo, vamos aprender sobre modificações de evento. Modificações de evento permitem que você modifique o comportamento de um evento.

Desafio

Aqui está um desafio para você:

• Crie um aplicativo Vue.js que exiba uma lista de tarefas. Cada tarefa deve conter um botão de “concluida”. Ao clicar no botão, a tarefa deve ser marcada como concluída e o método tarefaConcluida() deve ser chamado.

Boa sorte!

Dica

Você pode usar o método event.target para acessar o elemento que gerou o evento.