VUEJS

Introdução, conceitos e exemplos

O que é
● Framework Javascript para front-end;
● HTML, CSS e JS;
● Baseado em Componentes SPA (Single
Page Applications);
Histórico
● Evan You;
● Trabalhou para o Google com
AngularJS;
● "Pensei, e se eu pudesse retirar
somente a parte que realmente
gostava do Angular e criar algo
muito leve?";
● Lançado em fevereiro de 2014.
Empresas que utilizam
Ecossistema
● Vuex
● Vue-router
● Vue-resource
● Devtools (navegadores)
● Entre outros
Comunidade Crescente
● Documentação;
● Fóruns;
● Etc;
Independente do Back-end
● Diferentemente do blade, pode ser
usado de forma independente do
Back-end, podendo acompanhar
○ Laravel;
○ Django;
○ Spring boot;
○ Rails;
○ etc.
Conceitos
Componentes
● Os componentes nos permitem
dividir a interface do usuário em
partes independentes e
reutilizáveis e pensar em cada
parte isoladamente;
● Facilita a manutenção do código;
● Por padrão, o Vuejs possui o
componente principal App, no
qual toda a página é montada
 <Root/> (App)

<Header/> <Main>
 <Root/> (App)

<Header/> <MainBlog/> <SideMenu/>

<PageLinks> <Sponsors>
(App)
● Renderização declarativa: o Vue
estende o HTML padrão com uma
sintaxe de modelo que nos permite
descrever declarativamente a saída
HTML com base no estado do
JavaScript.

● Reatividade: o Vue rastreia

automaticamente as mudanças de
estado do JavaScript e atualiza com
eficiência o DOM quando as mudanças
acontecem.
● Exemplo em código
 ● Reative State
Script Section ● Methods
● Props
 ● Condicionais
Template Section ● Listas
● Eventos
 ● DOM
Ciclo de Vida ● LyfeCicle Diagram
DOM
O DOM (Document Object Model) é uma estrutura de árvore hierárquica que representa a
estrutura de um documento HTML ou XML em forma de objetos, permitindo que o
JavaScript manipule os elementos e conteúdos da página.

No VueJs o DOM é a representação virtual da página que o framework mantém em

memória. Isso é feito usando uma estrutura de dados conhecida como Virtual DOM. O
Virtual DOM é uma cópia em memória do DOM real, que é mantida atualizada com as
mudanças feitas no estado do aplicativo.
Outros Exemplos
● Disparar evento JS
● Iteração com v-for
● Adição, listagem e exclusão de
dados
Vuejs + Laravel
● Instalar o laravel && dependências
● Configurar .env com o banco de dados
● Adicionar dependências do VueJs (laravel/ui, ui vue,
vue-router vue-axios)
● Criar estrutura back-end
● Criar componentes front-end
● Definir estrutura de comunicação front/back
● Definir rotas para comunicação
app.blade.php
App.vue
AllProduct.vue
CreateProduct.vue
EditProduct.vue
resources/js/routes.js resources/js/app.js
Obrigado!