Comece hoje com o Vue.js

Hoje nós vamos falar de um framework Javascript progressivo, leve e fácil de usar: VueJS.

O que vamos aprender?

  • O que é Vue?
  • Quem utiliza o Vue?
  • Como criar seus primeiros códigos com VueJS
  • Como usar condicionais e loops no VueJS

Ferramentas

  • Vue
  • Editor de Texto

O que é VueJS?

Vue (a pronúncia correta é “viu” a mesma de view) é um framework Javascript progressivo de código aberto. Progressividade é a capacidade de ser utilizado em conjunto com outras soluções. Por exemplo, digamos que você, ao terminar a leitura desse post, queira testar o Vue com sua aplicação. Para isso, não é necessário remover todo o Javascript que você já utiliza no seu app para adicionar o Vue. Você pode adicionar em somente uma página e ir incorporando o novo framework progressivamente. As outras características do Vue são: reatividade, simplicidade e tamanho pequeno.

Quem utiliza o Vue?

Vue é um framework modesto em popularidade quando comparado ao Angular ou React. Apesar disso, grandes empresas o utilizam em suas aplicações e ele vem ganhando cada vez mais popularidade no mercado. Empresas como Gitlab, Codeship e a brasileira Rock Content revelaram quais foram os motivos que os levaram a escolher trabalhar com Vue. Depois veja o que eles disseram em seus blogs. Agora mãos a obra!

Mãos a obra

Vamos criar um pequeno exemplo usando Vue para que você dê seus primeiros passos no framework \o/, além disso vamos falar sobre condicionais e loops, bora:

 

  1. Configurando o projeto

Primeiramente, vamos fazer uma simples página HTML

Agora, vamos colocar a dependência através do CDN do Vue

Pronto! Temos o projeto configurado com o Vue pronto para ser utilizado. Agora, vamos criar uma div na qual será colocado o conteúdo deste tutorial.

O próximo passo é colocar a configuração básica de um elemento Vue.

Nesse ponto temos algumas particularidades da linguagem. “el” o elemento na página no qual o nosso app estará conectado. “data” é o objeto que será responsável por tornar seus atributos (no exemplo acima “message”) reativos. Isso significa que tudo pode ser mudado dinamicamente.

 

Agora vamos exibir a nossa mensagem.

Pronto! Temos nosso primeiro Hello World com VueJS! Simples ou fácil? Antes de continuar, abra o console da “index.html” e experimente alterar o valor do atributo “message” da seguinte forma: “app.message = ‘Bla bla bla’”.

 

  1. Entrada de Dados/ Condicionais/ Repetições

 

Agora vamos aprender sobre condicionais. O objetivo desta parte é esconder a mensagem “Hello World” se o usuário clicar em um botão e reexibi-la caso o botão seja novamente clicado.

Para isso precisamos de uma variável que será responsável por controlar a exibição da interpolação da mensagem.

Vamos colocar a mensagem em uma tag para deixar as coisas mais organizadas

Agora, vamos criar a função que é responsável por exibir ou não a mensagem. Basicamente, ela troca o valor da variável de verdadeiro para falso e vice-versa.

Por último, vamos colocar o botão no qual o usuário clica e chama a função que definimos acima

Temos uma nova diretiva do Vue sendo utilizada para poder lidar com eventos. Neste caso estamos utilizando a “v-on:click”, mas há várias outras diretivas conforme visto na documentação.

 

O que falta neste momento é a verificação da exibição da mensagem baseada o valor do atributo do campo

Pronto! É só clicar no botão. Porém é bastante sem graça termos uma palavra hardcoded deste jeito. Vamos tornar nossa página mais interessante adicionando um campo que nos permite alterar o valor padrão da mensagem.

Agora temos algo mais interessante com o uso do “v-model”. O que essa diretiva faz é estabelecer a relação entre o input de entrada e o atributo “message” de “data”.

 

Para aprenderemos sobre loops, vamos utilizar uma lista de elementos de texto como atributo de “data”.

Agora, vamos exibir os itens com o laço de repetição “v-for” e a interpolação do início do tutorial.

Vamos tornar as coisas mais interessantes adicionando novos itens na lista. Para isso, vamos colocar um novo atributo em data e o campo de entrada correspondente.

Seguindo o mesmo princípio dos passos acima, vamos declarar uma função que será responsável por colocar o valor fornecido pelo usuário na lista.

E o botão que colocará o item na listagem

Pronto! Veja que a listagem dos itens é alterada dinamicamente.

Por último, vamos remover o último item da lista. Primeiro definindo a função que fará a remoção.

Depois com o botão que aguarda o evento de clique.

Pronto \o/



12 formas de vencer o bloqueio criativo e escrever textos memoráveis (e 6 dicas extras)

Não perca nenhum conteúdo

Receba nosso resumo semanal com os novos posts, cursos, talks e vagas \o/



 

Conclusão

Hoje conhecemos um novo framework Javascript! Descobrimos o que é e quem está utilizando. Aprendemos o básico para poder fazer nossos primeiros componentes com o Vue!

Não se esqueça de compartilhar esse conteúdo e deixar nos comentários sua opinião sobre o uso do Vue! Aposto que você ficou interessado em conhecer mais sobre esse framework e aguarde que na próxima semana você vai aprender sobre componentes \o/

 


Você é novo por aqui?

Primeira vez no OneBitCode? Curtiu esse conteúdo?
O OneBitCode tem muito mais para você!

O OneBitCode traz conteúdos de qualidade e em português sobre programação com foco em Ruby on Rails e outras tecnologias como Angular, Ionic, React, desenvolvimento de Chatbots e etc.

Se você deseja aprender mais, de uma forma natural e dentro de uma comunidade ativa, visite nosso Facebook e nosso Twitter, veja os screencasts e talks no Youtube, alguns acontecimentos no Instagram, ouça os Podcasts e faça parte de nossa Newsletter.

Além disso, também estamos com alguns e-Books muito interessantes para quem deseja se aprimorar como programador e também como freelancer (os e-Books são gratuitos!):

Espero que curta nossos conteúdos e sempre que precisar de ajuda com os tutoriais, fala com a gente!
Seja por
Facebook ou e-mail, estamos aqui para você 🙂

Bem-vindo à família OneBitCode \o/

abril 2, 2018

1
Deixe um comentário

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
ricardomirannda@gmail.com Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
ricardomirannda@gmail.com
Visitante
ricardomirannda@gmail.com

Explicação simples, direta e objetiva !!!
Parabéns pelo post e continue com uma série sobre VueJs, achei bastante interessante esse framework.

Feito com s2 por OneBitCode
%d blogueiros gostam disto: