Introdução ao Vue.js Conceitos Básicos Parte 1

Introdução ao Vue.js Conceitos Básicos Parte 1

11/08/2018 0 Por Alisson Suassuna

Olá galera, hoje vamos falar sobre o Vue.js, um dos frameworks mais famosos da atualidade tratando-se de desenvolvimento frontend, e dar uma breve introdução ao Vue.js. A ideia é escrever um série de artigos sobre, vamos ver cada detalhe dessa tecnologia, e aprenderemos juntos a utilizá-la em nossos projetos, e a primeira indagação a se fazer é, o que o Vue.js?

O que é Vue.js?

Introdução ao Vue.js

O que é ? – Introdução ao Vue.js

Para respondermos essa pergunta, vamos acessar o site oficial do framework Vue.js.org. Ao acessar o site, os criadores diz o seguinte sobre: “Vue.js é uma estrutura progressiva para construir interfaces com o usuário”. Ao contrário de outros frameworks monolíticos, o Vue é projetado desde o início para ser adotado incrementalmente. A biblioteca central é focada apenas na camada de visualização e é fácil de ser integrada a outras bibliotecas ou projetos existentes. Por outro lado, o Vue também é perfeitamente capaz de ser usado para sistemas SPA sofisticados quando usado em combinação com ferramentas modernas e bibliotecas de suporte.

Por onde começo?

Existe duas maneiras de ser utilizar o Vue.js, a primeira fazemos o download da biblioteca (core) e chamamos em um documento HTML, a segunda usamos o Vue-CLI onde é criada toda estrutura de build com webpack e etc, usada para projetos maiores. Para esse artigo vamos usar a primeira abordagem, pois é mais simples para aprendermos alguns conceitos básicos da ferramenta, então vamos ao código base para começarmos nossos estudos.

Código base – Introdução ao Vue.js

Em nosso código temos um documento HTML padrão, uma simples estilização CSS que modifica a cor de fundo da nossa página e a cor dos textos, uma <div>
com seu ID , observe que entre a tag <head> chamamos o arquivo Vue.js do repositório oficial que é disponibilizado no site do framework, podemos usar assim, ou então baixa o arquivo vue.min.js, vamos utilizar a primeira forma para facilitar nossa vida.


Fundamentos

Para começarmos a trabalhar com Vue, precisamos escrever essa função construtora, ela é chamada de Vue Instance, ela recebe por parâmetro um objeto JavaScript, neste definimos várias configurações, dados, métodos etc. Vamos conhecer o primeiro atributo de configuração do Vue.js.

Atributo el

O atributo el: é onde dizemos para o Vue.js qual elemento HTML essa Instance irá se comunicar, em nosso caso queremos que o mesmo tenha controle sobre nossa <div> cujo o ID é “app” quando fazemos isso o nosso trecho passa a ser controlado pelo Vue, e essa minha <div> é chamado de Template Vue, vamos visualizar melhor na figura seguir.

Introdução ao Vue.js

Como funciona a comunicação entre Vue instance e Vue template

Para que possamos testar se realmente o Vue está controlando a nossa template Vue, podemos escrever uma simples operação JavaScript entre duas chaves {{ }} e observar o resultado em nosso browser.

Introdução ao Vue.js

Resultado no browser – teste

Se o resultado for 4, teremos certeza de que o Vue está controlando nossa <div> HTML. Veja que agora usando as chaves {{ }} conseguimos escrever códigos JavaScript e o Vue.js faz esse meio de campo entre JavaScript e HTML para nós. Exemplo usando uma função entre as chaves.


Atributo data

Nesse atributo podemos passar todos os dados que queremos trabalhar em nossa aplicação, ela também aceita funções, mas por enquanto vamos manipular apenas dados simples. Vamos ao exemplo.

Introdução ao Vue.js

Resultado no browser – Introdução ao Vue.js

Note que não precisamos fazer {{ this.name }} ou {{ data.name }} o Vue já sabe que esses dados vem do objeto data, então ele faz um proxy e já percorre o caminho pra acessar esse dado. Conseguimos facilmente ler dados escritos em JavaScript e renderizar em nossa Vue Template.

Atributo methods

Esse atributo é onde ficará todos os nossos métodos, e posso invocar em nosso template facilmente usando a notação padrão do JavaScript, vamos fazer um método que calcule a media aritmética de um aluno qualquer.

 

Introdução ao Vue.js

Resultado no browser – Introdução ao Vue.js

Atributo computed

No atributo computed escrevemos valores calculáveis, por exemplo o calculo de desconto de um determinado produto, usando os dados, que estão no atributo data. Vamos fazer uma função que calcula o valor do desconto do produto iphone que construimos no atributo data acima, nesse caso teremos que usar o this para conseguir acessar os dados de data pois estamos no contexto da função Vue Instance, veja mesmo o atributo computed seja uma função, no Vue template o chamamos como um valor. A função toFixed(2) é para delimitar a quantidade de casas decimais que iram aparecer na nossa view.

Introdução ao Vue.js

Resultado no Browser

Conclusão

Neste nosso primeiro artigo sobre o Vue.js vimos os conceitos básicos do framework, os quatro principais atributos de configuração, e algumas nomenclaturas como Vue Intance, Vue Template. Em artigos futuros vamos nos aprofundar um pouco mais.

Recomendações de Estudos

O curso que vou está recomendando a vocês hoje é o Curso Web Moderno com JavaScript! COMPLETO 2018 + Projetos, criado pelo professor Leonardo Moura Leitao, um dos cursos mais completos que já vi, já são mais de 400 aulas postadas e ainda está em desenvolvimento ótimo curso, vale cada centavo.

O que aprenderei?

  • Tudo que vc precisa saber para construir aplicações modernas para Web
  • HTML, CSS, JavaScript, React, VueJS, Banco de Dados e muito mais

  • Base sólida de Javascript com os novos recursos da linguagem

  • Funções, Objetos, Array, Prototype, Clousure…
  • Usar JS para interagir com o DOM, requisições Ajax, ferramentas de build (Webpack e Gulp)
  • Paradigmas de programação aplicados em JS
  • Criar projetos integrando o que aprendemos no curso

Recomendação de Livro

Esse livro é muito bom pessoal, quem deseja se tornar um ótimo profissional Front End precisa ler.

Resumo do Livro

Bem-vindo a uma melhor maneira de aprender HTML & CSS. Se você quer projetar, construir do zero ou ter mais controle sobre um site existente, este livro lhe ajudará a criar conteúdos atrativos e amigáveis. Sabemos que código pode ser um pouco intimidador, mas dê uma olhada e veja como este guia difere dos livros de programação mais tradicionais.