Vue.JS Click Events

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 criar aplicativos da Web nele. Vue.O JS é construído combinando os melhores recursos das estruturas angulares e de reação já existentes. É uma estrutura JavaScript progressiva e reativa que é usada para criar UIS (interfaces de usuário) e spas (aplicativos de página única), e é por isso que os desenvolvedores gostam de codificar e sentir liberdade e conforto ao desenvolver aplicativos em Vue.JS.Se dermos uma olhada no evento ouvindo e lidando com vue.JS., Saberemos que ele fornece uma diretiva "V-on" para ouvir e lidar com 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, apenas aprenderemos e manteremos nosso foco nos eventos de cliques. Então vamos começar!

Assim como o evento OnClick de JavaScript, Vue.JS fornece v-on: clique para eventos de escuta.

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 apenas para 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 ao JavaScript dentro das aspas “”. Bem assim:

Vue.O JS nos fornece para chamar o método ou função em uma instrução JavaScript embutida, como mostrado abaixo:

Usando vue.Os manipuladores de eventos da JS, também podemos acessar o evento DOM, usando a declaração embutida, passando o Vue.O JS é especialmente a variável "$ Evento" para o argumento do método, assim como o exemplo abaixo:

Vue.O JS também nos fornece para chamar várias funções ou métodos. Podemos chamar mais de uma função e separá -los por vírgulas, como este exemplo:

Vue.JS fornece modificadores de eventos também.

Modificadores de eventos

Muitas vezes precisamos chamar modificadores junto com os eventos. Então, Vue.JS fornece alguns dos seguintes modificadores:

.parar

Ele vai parar a transmissão do evento de clique.

.evitar

Isso impedirá a página para recarregar ou redirecionar.

.uma vez

Ele acionará o evento de clique apenas uma vez.

.capturar

É usado principalmente para adicionar o ouvinte do evento.

Podemos encadear os modificadores também. No entanto, lembre -se de que a ordem dos modificadores importa e afetará os resultados.

Conclusão

Neste artigo, abordamos os conceitos de manuseio de eventos de cliques de NOOB a ninja nível. Aprendemos sobre as diferentes sintaxes de escrever eventos de cliques e as diferentes maneiras de usar v-on: clique Diretiva fornecida pela VUE.JS para a facilidade de desenvolvedores e diferentes modificadores de eventos. Para um conteúdo mais útil como esse, relacionado ao Vue.JS, continue visitando Linuxhint.com.