Hamilton Gabriel
/Gabriel19016958
/hamiltongabriel
/@gabrielzinho.gabriel2
Desenvolvedor de Aplicações Front End @ TDR Informática
Graduando Ciência da Computação
Participo do grupo Vue.JS
Telegram: t.me/vuejsbrasil
Postagem de documentos
Medium @ phpzm.rocks/about
Vue.js, um framework progressivo
Nascido no final de 2013, Vue.js é classificado
Como um Framework Progressivo para a
criação de interfaces baseadas em
Componentes e desenvolvimento de SPA`s.
Com Vue.js construímos aplicações altamente escaláveis independente do tipo e nível do projeto.
O que preciso saber sobre o Vue?
-
Biblioteca que tem como Objetivo auxiliar na construção de interfaces na WEB
-
-
Implementa conceitos avançados de reatividade.
-
- Trabalha com DOM VIRTUAL. Acessar a memória se torna mais rápido que acessar o DOM REAL.
Por que usar o VueJS ?
- Criar Components com VueJS é muito mais simples, tudo possui seu lugar de maneira clara.
- VueJS é extremamente flexível, você está livre pra criar seu projeto da maneira que quiser.
Pode ser usado desde projetos pequenos a projetos maiores e mais complexos. - VueJS possui uma performance excelente e se apresenta como uma das melhores opções do mercado.
- VueJS tem boas práticas estabelecidas e amplamente aceitas dentro da comunidade.
- VueJs juntamente com o Quasar disponibiliza uma plataforma tripla, podendo trabalhar com o mesmo código em 3 ambientes, sendo ele Web, Mobile e Desktop com Electron.
- Documentação mantida pela Comunidade do Vue, bem detalhada, abrangente e bem clara.
- VueJS pode ser utilizado em qualquer tipo de projeto e Tecnologia.
... Python, Ruby, PHP, Node, Java Go ou qualquer outra linguagem.
Continuação....
O Vue.js Framework trabalha com:
- Ligação de Dados bidirecional (two-way-data-binding)
- Programação Reativa
- Eventos
- Criação de Componentes
Também podemos utiliza-lo com outras tecnologias:
- JSX
- TypeScript
Algumas das bibliotecas mais usadas:
- Vue-Router: Mapeamento de Rotas
- Vuex: Gerenciamento de estado
- Vue-CLI: Criação de Projetos Rápidos
- Axios: Gerenciador de requests
O que é um Componente.
- É um código independente, com tamanho pequeno ou grande.
- Pequeno como um botão
- Grande como um formulário
O que contem dentro de um componente?
- Estrutura de um Componente.
- Dados
- Seu próprio JavaScript
- As vezes seus próprios estilos.
- Pode conter outros componentes.
- Se comunica entre componentes
- Pai e Filho (Props)
- Filho e Pai ($emit)
O que são Diretivas?
É uma maneira de exibir dados na página. O HTML normal é embelezado usando atributos especiais - conhecidos como diretivas - que usamos para dizer ao Vue o que queremos que aconteça e o que deve acontecer com os dados que fornecemos.
Tipos de diretivas.
- V-HTML
- V-SHOW
- V-IF
- V-ELSE
- V-ELSE-IF
- V-FOR
- V-ON
- V-BIND
- V-MODEL
- V-ONCE
- Não recomendado devido a vulnerabilidade
- Mostrar ou não o Elemento
- Gerador de Listas, percorre arrays.
- Ouve eventos de filho pra pai.
- Ligação de atributo JavaScript a um Html.
- Liga os dados de entrada a propriedade correta.
- Altera os dados apenas uma vez.
V-IF Versus V-SHOW
V-IF
V-SHOW
V-IF: Ocultar coisas que ainda não foram carregadas. Porém perde no desempenho por gerar a árvore DOM por baixo.
V-SHOW: Alterar algo com frequência.
Primeira experiencia desenvolvendo um componente
- Componente Hello World!
Primeiro problema encontrado
- Atribuir um Dado dentro de outro Dado
- Não atribui valor e não emite erro no console.
Solução do Primeiro problema.
-
Primeiro Passo
-
Fazer o erro ser emitido no console.
- Usar Arrow Function (não reconhece o this no data)
-
Fazer o erro ser emitido no console.
-
Segundo passo.
- Ciclo de Vida
Adicionando interatividade com Diretivas Básicas
- O que é VUE-DEV-TOOLS e VUE-REMOTE-DEVTOOLS
-
Depurador Oficial da ferramenta. auxiliando na Depuração do Código.
-
Para instalar.
- Mozilla: https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/?src=ss
- Chrome: https://chrome.google.com/webstore/search/vue.js devtools
-
Para instalar.
-
Depurador Oficial da ferramenta. auxiliando na Depuração do Código.
VUE-DEV-TOOLS em ação.
Problemas com comunicações entre componentes.
Disparando o Evento
Recebendo o Evento.
Continuação ...
Ex: Você tem um megafone gritando em uma multidão o nome "Hamilton"
Quantos "Hamilton" podem ouvir e olhar para o eventbus? Varias.
Solução
-
Vuex ou Comunicação entre componente Pai e Filho
- Vuex - Gerenciamento de Estado
- Pai e Filho (props. $emit)
Vuex
-
Store
- Onde os dados ficam armazenados
-
Ação
- Faz uma mutação para alterar os dados da Store
-
Mutação
- Evento que altera os dados da Store
-
Getters
- Observa os dados da Store para fornece-los
Fluxo Vuex
Comunicação entre pai e filho
Filho enviando dados
Pai recebendo dados
Pai enviando props
Filho recebendo
Single Page Application
Aplicativos de Página única
O que são
-
Aplicação 100% Browser.
-
Servidor
-
Necessário apenas para acessar uma URL
-
Não necessita mais enviar HTML
-
-
-
Único arquivo HTML
-
Os dados são obtidos pelo Ajax
-
Depende de um Web Service
-
Dependem totalmente do JavaScript por viver no browser
-
Reatividade
O que precisa pra desenvolver um SPA ?
- Grande conhecimento com JavaScript
- Conhecimento Ambiente Browser
- Implementação de recursos JS
- Polyfills - Transforma o JavaScript para suporte de navegador antigo
- Debugger
- Gerenciamento de Estado
- Manter o Estado da tela.
Por onde iniciar o desenvolvimento do SPA?
- Iniciaremos com um ecossistema de Andaime
- VUE-CLI (VUE-CLIENTE)
- Necessita do NODE.JS => V-8
Por que iniciar pelo VUE-CLI?
- Rico em recursos
- Babel
- TypeScript
- ESLint
- Pwa
- Teste Unitários
- Roda em WebPack ou Browserify
- Converte .vue para JS
- Navegador passa a entender
- Atualização do projeto após alterações
- Não precisa configurar o ambiente
Vue.JS Awesome
By hamiltongabriel
Vue.JS Awesome
- 259