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:
- 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’”.
- 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/
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/
Quer se tornar um Programador Full Stack Javascript em 8 semanas? 😀
Nós desenvolvemos um treinamento completo onde você vai aprender desde a base da Web (HTML5, CSS, Bulma,
Javascript e Es6+) até React e ExpressJs totalmente do zero!
Nele você também vai desenvolver um projeto do inicio até o Deploy (clone do Evernote) e irá
aprender como conseguir as melhores vagas no módulo carreira de Programador.
Se você não quer mais perder oportunidades, clique aqui e saiba mais 💪
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 https://onebitcode.com/online-dating-first-skype-chat/, ouça os is $50 too much for a dating anniversary gift 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!):
- WorkFlow Super Full Stack
- Desenvolvendo seus projetos como um profissional
- Guia do Freelancer
- PDF com links fundamentais para quem quer ser um freelancer de sucesso
- Guia One Bit Code de Gems
- Baixe gratuitamente seu e-Book com 60 Gems separadas por categorias
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/
Explicação simples, direta e objetiva !!!
Parabéns pelo post e continue com uma série sobre VueJs, achei bastante interessante esse framework.