Vue.js é uma biblioteca muito poderosa, fácil de aprender e acessível que, com o conhecimento de HTML, CSS e Javascript, podemos começar a construir aplicativos da web nela. Vue.js é construído combinando os melhores recursos de Frameworks Angular e react já existentes. É uma estrutura Javascript progressiva e reativa usada para construir UIs (interfaces de usuário) e SPAs (aplicativos de página única), motivo pelo qual os desenvolvedores adoram codificar e sentem liberdade e conforto ao desenvolver aplicativos em Vue.js. dê uma olhada em Event Listening and Handling em Vue.js., saberemos que ele fornece uma diretiva v-on para ouvir e manipular eventos. Podemos usar a diretiva v-on para ouvir o DOM e executar as tarefas necessárias. Ele também fornece muitos manipuladores de eventos. No entanto, neste artigo, aprenderemos e manteremos nosso foco apenas nos eventos de clique. Então vamos começar!
Assim como o evento onClick do Javascript, o Vue.js fornece v-on: click para ouvir eventos.
A sintaxe para o evento v-on: click seria assim:
< botão v-on: clique='functionName'>Clique</ botão >
Vue.js fornece um atalho @ em vez de usar v-on também.
< botão @clique='functionName'> Clique</ botão >
Vue.js não para em apenas ouvir o evento de clique e chamar a função. Também nos permitirá escrever diretamente qualquer operação aritmética ou qualquer coisa relacionada a Javascript entre aspas. Bem assim:
< botão @clique='num += 1'> Adicionar</ botão >
O Vue.js nos permite chamar o método ou função em uma instrução Javascript embutida, conforme mostrado abaixo:
< botão @clique='mensagem (' Olá ')'> Mostrar</ botão >Usando os manipuladores de eventos do Vue.js, podemos acessar o evento DOM também, usando a instrução embutida, passando a variável $ event especialmente fornecida pelo Vue.js para o argumento do método, assim como no exemplo abaixo:
< botão @clique='message (' Hi ', $ event)'> Enviar</ botão >
Vue.js também nos permite chamar várias funções ou métodos. Podemos chamar mais de uma função e separá-los por vírgulas, como neste exemplo:
< botão @clique='primeiro (' Olá '), segundo (' Olá ', $ evento)'> Enviar</ botão >O Vue.js também fornece modificadores de eventos.
Modificadores de evento
Freqüentemente, precisamos chamar modificadores junto com os eventos. Portanto, Vue.js fornece alguns dos seguintes modificadores:
.Pare
Isso interromperá a transmissão do evento de clique.
< para @ click.stop='fazem isto'></ para >.evitar
Isso impedirá que a página seja recarregada ou redirecionada.
< Formato @ submit.prevent='onSubmit'></ Formato >.uma vez
Isso acionará o evento de clique apenas uma vez.
< para @ click.once='fazem isto'></ para >.capturar
É usado principalmente para adicionar o ouvinte de evento.
< div @ click.capture='fazem isto'> ...</ div >Podemos encadear os modificadores também. No entanto, lembre-se de que a ordem dos modificadores é importante e afetará os resultados.
< para @ click.stop.prevent='faça isso'></ para >Conclusão
Neste artigo, cobrimos todos os conceitos de manipulação de eventos do Click, do nível noob ao ninja. Aprendemos sobre as diferentes sintaxes de gravação de eventos de clique e as diferentes maneiras de usar v-on:click diretiva fornecida por Vue.js para a facilidade dos desenvolvedores e modificadores de eventos diferentes. Para conteúdo mais útil como este, relacionado ao Vue.js, continue visitando linuxhint.com.