Home-theater-designers
Ouvir os eventos do usuário é parte integrante de qualquer aplicativo da Web responsivo, e os aplicativos Vue não são exceção. O Vue vem construído com uma maneira simples e eficiente de lidar com eventos com sua diretiva v-on.
O que é Event Binding no Vue?
Event binding é um recurso do Vue.js que permite anexar um event listener a um Modelo de objeto de documento (DOM) elemento. Quando ocorre um evento, o event listener aciona uma ação ou resposta em seu aplicativo Vue.
MAKEUSEDO VÍDEO DO DIA ROLE PARA CONTINUAR COM O CONTEÚDO
Você pode conseguir vinculação de evento no Vue com o v on diretiva. Essa diretiva permite que seu aplicativo escute eventos do usuário, como eventos de clique, entrada ou tecla.
Para anexar um ouvinte de evento a um elemento usando v on , adicione o nome do evento como um parâmetro à diretiva:
o que é o modo avião no telefone
<html>
<head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="counter++">Click me</button>
<p>{{ counter}}</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
text: 'Vue is awesome!',
counter: 0
}
}
})
app.mount('#app')
</script>
</body>
</html>
O bloco de código acima mostra um exemplo de um aplicativo Vue que escuta um clique evento. O bloco de código usa um botão para incrementar o contador valor na propriedade data da instância Vue por um.
O bloco de código acima vincula a expressão JavaScript contador++ para o botão clique evento com o v on diretiva. Vue usa o @ caractere como uma abreviação no lugar do v on diretiva devido a v on uso frequente de:
<button @click="counter++">Click me</button>
A vinculação de eventos no Vue não se limita a eventos de clique. O Vue lida com outros eventos, como eventos de pressionamento de teclas, eventos de mouseover e muito mais.
Para vincular qualquer um desses eventos ao v on directiva, substitua a clique event com o nome do evento desejado:
<button @keydown.enter="counter++">Click me</button>
O código acima configura um ouvinte de evento no botão que escuta o keydown evento. Quando qualquer tecla é pressionada enquanto o botão está em foco, o Vue avalia o contador++ expressão.
Vinculando eventos com métodos em Vue
Na maioria dos aplicativos Vue, você pode lidar com uma lógica mais complexa com base na ocorrência de eventos específicos. Eventos e métodos trabalham lado a lado para executar ações de aplicativo com base em um evento.
A propriedade de métodos em Objeto de opções do Vue contém funções importantes que seu aplicativo Vue precisa para maior reatividade. Com a propriedade de métodos no Vue, você pode lidar com lógica complexa baseada em eventos.
Aqui está um exemplo de um aplicativo Vue que mostra eventos manipulados pela propriedade method:
<html>
<head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<button @click="increment">Add 1</button>
<button @click="reduce">reduce 1</button>
<p>{{ counter }}</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
text: 'Vue is awesome!',
counter: 0
}
},
methods: {
increment(){
this.counter = this.counter + 1
},
reduce() {
this.counter = this.counter - 1
}
}
})
app.mount('#app')
</script>
</body>
</html>
O aplicativo Vue acima descreve como vincular eventos com métodos. O aplicativo tem dois botões nos quais os usuários podem clicar para aumentar ou reduzir o valor do contador na propriedade de dados.
O aplicativo consegue isso com o @clique diretiva. O @clique A diretiva aponta para as funções na propriedade de métodos para manipular o valor do contador.
Ao vincular um argumento ao evento click, você pode personalizar os métodos de incremento e redução para adicionar ou reduzir o valor do contador com base no argumento passado para o método.
Igual a:
<body>
<div id="app">
<button @click="increment(5)">Add 5</button>
<button @click="reduce(3)">reduce 3</button>
<p>{{ counter }}</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
text: 'Vue is awesome!',
counter: 0
}
},
methods: {
increment(num){
this.counter = this.counter + num
},
reduce(num) {
this.counter = this.counter - num
}
}
})
app.mount('#app')
</script>
</body>
Este bloco de código se estende no aplicativo Vue anterior para permitir a passagem de argumentos para os métodos vinculados ao ouvinte de evento de clique no botão.
Os métodos incrementar e reduzir na instância do Vue recebem um argumento num para aumentar ou reduzir a propriedade do contador.
Este exemplo mostra como você pode trabalhar com argumentos ao vincular métodos com eventos no Vue. Vincular métodos com eventos pode ajudar a tornar os aplicativos Vue mais interativos.
Explorando os modificadores Prevent e Stop no Vue
Os modificadores de evento no Vue permitem que você crie ouvintes de eventos melhores que atendam às necessidades específicas de seu aplicativo. Para utilizar esses modificadores de evento, você encadeia os modificadores para eventos no Vue.
Por exemplo:
<form @submit.prevent="handleSubmit">
<input type="text" v-model="text">
<button type="submit">Submit</button>
</form>
O bloco de código acima encadeia o evitar modificador para o evento submit. O evitar O modificador é comumente usado ao trabalhar com formulários no Vue.
O evitar a finalidade do modificador é impedir o comportamento padrão de envio de formulário, que é recarregar a página. Usando evitar , Vue pode continuar seus processos enquanto o manipularEnviar O método cuida do envio do formulário.
Outro exemplo de um modificador muito útil é o parar modificador de evento. O parar O modificador de evento impede que um evento se propague para cima na árvore DOM.
Normalmente, o evento de um elemento filho HTML passa pela árvore DOM, ativando quaisquer ouvintes de evento anexados aos elementos pai. Você pode evitar isso propagação de evento com o parar modificador e evitar que o evento dispare outros ouvintes de eventos.
Para entender como o parar modificador interrompe a propagação de eventos em uma árvore DOM, considere o bloco de código abaixo:
<body>
<div id="app">
<div @click="outerClick" class="outer">
<div @click.stop="innerClick" class="inner">
<button @click="buttonClick" class="button">Click me</button>
</div>
</div>
</div>
<script>
const app = Vue.createApp({
methods: {
outerClick() {
console.log('Outer click')
},
innerClick() {
console.log('Inner click')
},
buttonClick() {
console.log('Button click')
}
}
});
app.mount("#app");
</script>
</body>
O bloco de código acima tem três ouvintes de evento anexados a três elementos diferentes. O botão elemento está dentro do div com o interno classe, enquanto o div com o interno classe está dentro do div com o exterior aula.
Cada um dos três elementos escuta um clique evento e logs no console, o nome do elemento HTML clicado. Abaixo está um estilo CSS de classe adicional para tornar o bloco de código acima mais fácil de entender:
<head>
<style>
.outer {
padding: 20px;
background-color: black;
}
.inner {
padding: 20px;
background-color: gray;
}
button {
padding: 10px;
background-color: white;
border: 2px solid black;
font-size: 16px;
font-weight: bold;
cursor: pointer;
}
</style>
</head>
Ao executar o programa, o aplicativo Vue criado ficará assim:
Observe que quando você clica no botão, o programa chama o botãoClique método e registra uma mensagem no console. O programa também chama o clique interno método.
No entanto, o programa não chama o clique externo porque o bloco de código adicionou um parar modificador para o clique interno ouvinte de evento. Isso impede que o evento se propague ainda mais na árvore DOM.
Sem o parar modificador, o programa chamará o botãoClique método quando você clicar no botão, e o evento continuará se propagando na árvore, atingindo o clique interno método e, em seguida, o clique externo método.
história da minha propriedade de graça
Manipulando Eventos em Aplicativos da Web
Você aprendeu como usar event binding no Vue para anexar ouvintes de eventos a elementos e como chamar métodos quando os eventos ocorrem. Você também entendeu como usar modificadores de evento para customizar o comportamento do evento.
Os aplicativos da Web dependem de alguma forma de eventos do usuário para realizar funções. O JavaScript vem embutido com muitos métodos para capturar e manipular uma variedade desses eventos. Esses eventos ajudam na criação de aplicativos interativos.