No último post tratamos justamente de criar o lado do .css da nossa Calculadora usando o Vue.js.
Hoje, focaremos na lógica das ações dos botões dessa Calculadora no JavaScript. E vocês verão o quão fácil é manipular o JavaScript com Vue.js.
Lembrando que, para dar continuidade nessa série de artigos, se faz necessário ter conhecimentos prévios em: HTML, CSS & JavaScript.
Caso não tenham conhecimento, recomendo os dois cursos abaixo que são inteiramente grátis:
Vamos nessa?!
Desenvolvendo o 'Display'
Abram o Visual Studio Code. Após isso, abram a pasta: src e depois o arquivo Calculadora.vue
Vamos focar na parte das tags de script.
É justamente aí que toda a lógica da nossa Calculadora acontecerá!
Digitem o código abaixo:
<script>
export default {
data() {
return {
valorCorrente: '123',
};
},
};
</script>
Aqui estamos criando uma variável que será responsável pelo 'Display' da nossa Calculadora.
Feito isso, já deixem executando a aplicação ao lado, para que possamos acompanhar o desenvolvimento e se está tudo correndo bem.
Na seção template, inclua a seguinte linha de código:
<template>
<div class="calculadora">
<div class="display">{{valorCorrente || '0'}}</div>
<div class="botao">C</div>
<div class="botao">+/-</div>
<div class="botao">%</div>
<div class="botao operadores">÷</div>
<div class="botao">7</div>
<div class="botao">8</div>
<div class="botao">9</div>
<div class="botao operadores">x</div>
<div class="botao">4</div>
<div class="botao">5</div>
<div class="botao">6</div>
<div class="botao operadores">-</div>
<div class="botao">1</div>
<div class="botao">2</div>
<div class="botao">3</div>
<div class="botao operadores">+</div>
<div class="botao zero">0</div>
<div class="botao">.</div>
<div class="botao"> = </div>
</div>
</template>
Após isso, execute a aplicação e deverá aparecer da seguinte forma como a imagem abaixo:
O display da nossa Calculadora já está funcionando. Agora, vamos desenvolver a lógica dos demais botões!
Desenvolvendo o Botão 'C'
O botão limpar, que está representado pela letra C na Calculadora, será desenvolvido da seguinte maneira.
Vá até a tag de template e inclua o código abaixo:
<template>
<div class="calculadora">
<div class="display">{{valorCorrente || '0'}}</div>
<div @click="limpar" class="botao"></div>
(...)
</div>
</template>
Notem que estamos incluindo o @click. Isso representa que começaremos a trabalhar com Manipulação de Eventos no Vue.js. Se desejarem aprender um pouco mais a respeito, bastam acessar a Documentação do Vue.js que trata justamente dessa parte - AQUI
Para todos os botões que envolverão click, usaremos esse recurso. Que pode ser:
- @click=""
- v-on:click=""
Das duas formas estão corretas. O mais utilizado é: v-on:click. Então, vamos utilizar a forma mais corriqueira.
Vamos fazer o seguinte agora, vamos colocar todas as ações do v-on:click em todos os botões agora:
<template>
<div class="calculadora">
<div class="display">{{valorCorrente || '0'}}</div>
<div v-on:click="limpar" class="botao">C</div>
<div v-on:click="" class="botao">+/-</div>
<div v-on:click="" class="botao">%</div>
<div v-on:click="" class="botao operadores">÷</div>
<div v-on:click="" class="botao">7</div>
<div v-on:click="" class="botao">8</div>
<div v-on:click="" class="botao">9</div>
<div v-on:click="" class="botao operadores">x</div>
<div v-on:click="" class="botao">4</div>
<div v-on:click="" class="botao">5</div>
<div v-on:click="" class="botao">6</div>
<div v-on:click="" class="botao operadores">-</div>
<div v-on:click="" class="botao">1</div>
<div v-on:click="" class="botao">2</div>
<div v-on:click="" class="botao">3</div>
<div v-on:click="" class="botao operadores">+</div>
<div v-on:click="" class="botao zero">0</div>
<div v-on:click="" class="botao">.</div>
<div v-on:click="" class="botao operadores"> = </div>
</div>
</template>
Agora vamos desenvolver a lógica do 'limpar'. Vá até a tag script e inclua o seguinte método abaixo:
<script>
export default {
data() {
return {
valorCorrente: '',
numeroAnterior: null,
operador: null,
operadorClicado: false,
};
},
methods: {
limpar() {
this.valorCorrente = '';
}
}
</script>
Execute a aplicação e veja se vai funcionar!
Desenvolvendo o Botão '+/-'
Agora vamos desenvolver o botão +/- da Calculadora, para isso, altere os seguintes códigos.
Na tag template crie a função sinal:
<template>
<div class="calculadora">
<div v-on:click="sinal" class="botao">+/-</div>
</div>
</template>
Na tag script desenvolva o método sinal
<script>
sinal() {
this.valorCorrente = this.valorCorrente.charAt(0) === '-'
? this.valorCorrente.slice(1)
: `-${this.valorCorrente}`;
}
</script>
Estamos usando nessa operação o chartAt e o slice. Para entender melhor esses métodos, recomendo as leituras abaixo:
Se executar a calculadora, você observará que o sinal de +/- estão funcionando devidamente.
Vamos continuar!
Desenvolvendo o Botão '%'
A lógica sempre será essa daqui para frente: cria um método na ação do v-on:click="" na tag template e logo em seguida, desenvolvemos a lógica desse método na tag script.
<template>
<div class="calculadora">
<div v-on:click="porcentagem" class="botao">%</div>
</div>
</template>
<script>
porcentagem() {
this.valorCorrente = `${parseFloat(this.valorCorrente) / 100}`;
},
</script>
Execute a aplicação veja se está funcionando devidamente.
Desenvolvendo a Junção dos Números
Se vocês observarem até nesse ponto do artigo, os números não estão juntando. Para isso, vamos alterar o código da seguinte maneira na tag template
<template>
<div class="calculadora">
<div class="display">{{valorCorrente || '0'}}</div>
<div v-on:click="limpar" class="botao">C</div>
<div v-on:click="sinal" class="botao">+/-</div>
<div v-on:click="porcentagem" class="botao">%</div>
<div v-on:click="" class="botao operadores">÷</div>
<div v-on:click="juntarNumeros('7')" class="botao">7</div>
<div v-on:click="juntarNumeros('8')" class="botao">8</div>
<div v-on:click="juntarNumeros('9')" class="botao">9</div>
<div v-on:click="" class="botao operadores">x</div>
<div v-on:click="juntarNumeros('4')" class="botao">4</div>
<div v-on:click="juntarNumeros('5')" class="botao">5</div>
<div v-on:click="juntarNumeros('6')" class="botao">6</div>
<div v-on:click="" class="botao operadores">-</div>
<div v-on:click="juntarNumeros('1')" class="botao">1</div>
<div v-on:click="juntarNumeros('2')" class="botao">2</div>
<div v-on:click="juntarNumeros('3')" class="botao">3</div>
<div v-on:click="" class="botao operadores">+</div>
<div v-on:click="juntarNumeros('0')" class="botao zero">0</div>
<div v-on:click="" class="botao">.</div>
<div v-on:click="" class="botao operadores"> = </div>
</div>
</template>
E na tag script façam o seguinte:
<script>
juntarNumeros(numero) {
if (this.operadorClicado) {
this.valorCorrente = '';
this.operadorClicado = false;
}
this.valorCorrente = `${this.valorCorrente}${numero}`;
},
</script>
Ao executarem agora a aplicação, verão que a Calculadura já está ganhando bem mais funcionalidades do que antes. Vamos continuar, pois agora falta pouca coisa!
Desenvolvendo o Botão '.' (ponto)
Toda Calculadora necessita de 'ponto', não é mesmo? No nosso caso não será diferente!
Incluem os seguintes blocos de código abaixo:
<template>
<div class="calculadora">
<div v-on:click="ponto" class="botao">.</div>
</div>
</template>
<script>
ponto() {
if (this.valorCorrente.indexOf('.') === -1) {
this.juntarNumeros('.');
}
},
</script>
Executem a aplicação, clique no botão 'ponto' e vejam o resultado:
Desenvolvedo a lógica para Setar os Números no Display
O desenvolvimento da Calculadora está quase terminando, notem que agora só falta desenvolver os operadores matemáticos, que são os mais fáceis para desenvolver. Mas, antes de desenvolvermos as operações, precisamos criar uma lógica para setar, por assim dizer, os números.
Por exemplo: se desejamos realizar a soma de dois números: 10 + 5, precisaremos criar uma lógica que, quando o usuário for clicar nos botões de operação, precisará setar esses números no display, certo? Para isso, vamos incluir os seguintes blocos de código:
<script>
setarValor() {
this.numeroAnterior = this.valorCorrente;
this.operadorClicado = true;
},
</script>
Pronto! Isso já é mais do que suficiente! Agora sim, podemos desenvolver as 4 operações matemáticas, incluso o resultado, para enfim concluirmos a nossa Calculadora!
Desenvolvendo o Botão '=' (resultado)
Antes de desenvolver as 4 operações, vamos desenvolver o botão do resultado '='. Para isso,
inclua os seguintes blocos de código:
<template>
<div class="calculadora">
<div v-on:click="resultado" class="botao operadores"> = </div>
</div>
</template>
<script>
resultado() {
this.valorCorrente = `${this.operador(
parseFloat(this.numeroAnterior),
parseFloat(this.valorCorrente),
)}`;
this.numeroAnterior = null;
},
</script>
Agora sim, podemos além de desenvolver as 4 operações matemáticas e já testando se estão funcionando devidamente. Vamos continuar que tá quase no final.
Desenvolvendo o Botão '÷' (dividir)
Novamente, inclua o método dividir na tag template e desenvolva a lógica da divisão na tag script, conforme abaixo:
<template>
<div class="calculadora">
<div v-on:click="dividir" class="botao operadores">÷</div>
</div>
</template>
<script>
dividir() {
this.operador = (num1, num2) => num1 / num2;
this.setarValor();
},
</script>
Vejam o resultado no gif abaixo:
Desenvolvendo o Botão 'x' (multiplicar)
Inclua os seguintes códigos abaixo:
<template>
<div class="calculadora">
<div v-on:click="multiplicar" class="botao operadores">x</div>
</div>
</template>
<script>
multiplicar() {
this.operador = (num1, num2) => num1 * num2;
this.setarValor();
},
</script>
Resultado...
Desenvolvendo o Botão '-' (diminuir)
Inclua os códigos abaixo:
<template>
<div class="calculadora">
<div v-on:click="diminuir" class="botao operadores">-</div>
</div>
</template>
<script>
diminuir() {
this.operador = (num1, num2) => num1 - num2;
this.setarValor();
},
</script>
Vamos testar...
E estamos quase terminando...Vamos agora desenvolver o nosso último botão da Calculadora!
Desenvolvendo o Botão '+' (somar)
Inclua os códigos abaixo:
<template>
<div class="calculadora">
<div v-on:click="somar" class="botao operadores">+</div>
</div>
</template>
<script>
somar() {
this.operador = (num1, num2) => num1 + num2;
this.setarValor();
},
</script>
E agora, vamos testar todos os botões da nossa Calculadora!
E enfim terminamos a nossa Calculadora!
Palavras Finais
Como vocês puderam ver, Vue.js é simples, dinâmico e prático. Indico o uso do framework para desenvolvimento rápido de algum SPA (Single Page Application) devido a sua curva de aprendizagem e praticidade.
Abaixo, segue o código desenvolvido e já disponível no GitHub:
💻 Link do Código Desenvolvido - Calculadora
E caso desejam acompanhar o desenvolvimento desse artigo em formato de vídeo, realizei um live streaming no Twitch e no Youtube explicando o passo a passo do desenvolvimento da Calculdadora:
📺 Link do vídeo: Desenvolvendo uma Calculadora em Vue.js - Parte II
Mas notem que, o arquivo 'Calculadora.vue' está utilizando o que a documentação do Vue.js chama de Single File Components. O que isso quer dizer? Que todas as tags: template, script e style ficam definidos em um único arquivo.
Eu sinceramente não curto muito essa definição.
Para isso, no próximo artigo, explicarei e mostrarei a vocês que é possível realizar a separação dessas tags, deixando somente o template no arquivo 'Calculadora.vue' e realizando a chamada de arquivos de script e css dentro dele, para deixar o projeto mais clean e entendível!
Assim sendo, aguardem o próximo post a respeito!
E para ficarem por dentro de várias outras novidades, não deixem de me seguir lá no twitter!
Nos vemos! Até a próxima! 😍
Top comments (0)