Mini curso Vue.Js - Tudo sobre o framework javascript mais fantástico você encontra aqui!

Hoje vamos falar sobre interpolação de variáveis no Vue, sendo assim, continuando nossa série de artigos dos estudos deste framework javascript.

Se você ainda não viu os demais artigos, recomendo a leitura dos demais antes de iniciar este, que estão organizados neste outro artigo.

Como os artigos anteriores, iremos abordar um exemplo simples de uso de variáveis com o Vue e mostrar algumas possibilidades dentro deste framework.

Então, mãos na massa e vamos “codar”!

Interpolação de variáveis com o Vue

Vamos pegar o arquivo do exemplo anterior, para facilitar, deixo o link do Gist com o exemplo inicial que utilizamos no artigo Criando sua primeira Aplicação Vue.

Conforme o exemplo anterior, tínhamos em nossa view-model o atributo data com a propriedade mensagem, a qual passava para a tela o valor “Hello”.

Entendendo esta estrutura, acredito que já tenha ficado claro que, tudo o que passarmos no atributo data, poderemos utilizar dentro de nossa view, ou seja, na pagina ou componente em questão.

Então, vamos criar mais informações em nossa view-model para ser passada para nossa view, exibindo assim os dados.

Veja o exemplo:

Ai pra não ficar esta mensagem booleana na tela (caso você insira a variável doador sem nenhum tratamento), troquei na ultima pergunta para um if inline e trocando as condições para uma string.

O resultado da tela é igual ao da imagem:

O resultado da tela é igual ao da imagem do nosso exemplo de Interpolação de Strings

Conclusão

Simples não? Ai você pergunta, existem outras possibilidades e a resposta é SIM! Existe um universo de coisas que são possíveis de ser feitos com estas variáveis.

Para isso, recomendo que consulte a documentação do Vue e pra ser mais específico à sessão de Interpolações.

No próximo artigo, iremos abordar uma parte que irá fazer mais sentido pra você o uso destas interpolações que é a manipulação de dados com o Vue.

Ps.: todos estes exemplo estão disponíveis em meu repositório chamado Vuejs do GitHub, e caso tenha alguma dúvida, deixa aqui nos comentários.

Então até a próxima!


LEAVE A REPLY

Please enter your comment!
Please enter your name here