Phenquestions
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), razão pela qual os desenvolvedores amam codificar e sentem liberdade e conforto ao desenvolver aplicativos no Vue.js.Se dermos uma olhada em Escuta e Manuseio de Eventos no 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, iremos apenas aprender e manter nosso foco nos eventos de clique. Então vamos começar!
Assim como o evento onClick do Javascript, Vue.js fornece v-on: clique para ouvir eventos.
A sintaxe para o evento v-on: click seria assim:
Vue.js fornece uma abreviação “@” em vez de usar “v-on” também.
Vue.js não para em apenas ouvir o evento click e chamar a função. Também nos permitirá escrever diretamente qualquer operação aritmética ou qualquer coisa relacionada ao Javascript entre as aspas “”. Bem assim:
Vue.js nos permite chamar o método ou função em uma instrução Javascript embutida, conforme mostrado abaixo:
Usando Vue.manipuladores de eventos de js, podemos acessar o evento DOM também, usando a instrução inline, passando o Vue.A variável “$ event” de js é especialmente fornecida no argumento do método, assim como o exemplo abaixo:
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:
Vue.js fornece modificadores de evento também.
Modificadores de evento
Muitas vezes precisamos chamar modificadores junto com os eventos. Então, Vue.js fornece alguns dos seguintes modificadores:
.Pare
Isso interromperá a transmissão do evento de clique.
.evita
Isso impedirá que a página recarregue ou redirecione.
.uma vez
Irá acionar o evento de clique apenas uma vez.
.capturar
É usado principalmente para adicionar o ouvinte de evento.
Podemos encadear os modificadores também. No entanto, lembre-se de que a ordem dos modificadores é importante e afetará os resultados.
Conclusão
Neste artigo, cobrimos todos os conceitos de manipulação de eventos 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: clique diretiva fornecida pela Vue.js para a facilidade dos desenvolvedores e diferentes modificadores de eventos. Para conteúdo mais útil como este, relacionado ao Vue.js, continue visitando linuxhint.com.
