Seguindo nosso roteiro de estudos sobre Vue.js, neste artigo vamos aprender como criar métodos e responder a eventos ocorridos em nosso template.
Para este artigo criaremos um página simples que exibe um contador na tela e um botão que irá atualizar este contador. Usaremos interpolação para obter o conteúdo do atributo counter.
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-size: 22px;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
font-size: 32px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
input[type=button]{
padding: 5px 10px;
}
#myApp {
font-size: 2rem;
padding: 10px;
text-align: center;
}
</style>
<body>
<div id="myApp">
<p>{{counter}}</p>
<input type="button" value="Contador">
</div>
<script src="https://unpkg.com/vue@next"></script>
<script src="js.js"></script>
</body>
Na sequência, dentro do arquivo js.js, que vc já referenciou no template iremos criar uma aplicação e vincular seu funcionamento ao elemento div myApp.
const app = Vue.createApp({
data(){
return{
counter : 0
}
}
});
app.mount('#myApp');
Se tudo deu certo, sua página deve exibir o seguinte conteúdo:
Se você não compreende ou tem dúvidas do quê fizemos até aqui, eu fiz um conteúdo um pouco mais detalhado sobre Data binding.
De volta ao arquivo js.js, iremos criar uma nova função para incrementar o conteúdo do atributo counter a cada clique do botão Contador.
const app = Vue.createApp({
data(){
return{
counter : 0
}
},
methods:{
FazerIncremento(){
this.counter = this.counter + 1;
}
}
});
Para isto utilizamos a palavra reservada methods, dentro da instância no nosso app, e criamos a função FazerIncremento que fará o incremento do atributo counter. É importante destacar que para ter acesso ao atributo counter, é necessário usar a palavra “this.” .
Agora é hora de voltar ao template e associar a execução da função FazerIncremento com o clique do botão, usando a diretiva v-on.
<div id="myApp">
<p>{{counter}}</p>
<input type="button" value="Contador" v-on:click="FazerIncremento">
</div>
Assim como v-bind, a diretiva v-on também possui um shorthand e pode ser escrita desta outra forma:
<div id="myApp">
<p>{{counter}}</p>
<input type="button" value="Contador" @:click="FazerIncremento">
</div>
Alterar a função para receber um parâmetro
Vamos criar um novo atributo chamado parcela na nossa aplicação e na sequência vamos alterar a função FazerIncremento, fazendo com que ele espere a chegada de um novo parâmetro e some este valor ao conteúdo do atributo counter.
methods:{
FazerIncremento(parcela){
this.counter = this.counter + parcela;
}
}
