SlideShare uma empresa Scribd logo
Vue JS
Por onde começar?
Leonardo Thizon Waterkemper
@leonardothizon
Javascript para todo lado!
O que é Vue?
Sim, é mais um framework Javascript
Vue -> pronuncia-se VIEW (viu)
17 kB
Reatividade
Componentização
Como começar?
npm install -g vue-cli
vue init webpack vueapp01
npm install
npm run dev
cd vueapp01
Estrutura criada
index.html
Classe principal do framework
Componente raíz da aplicação
Cria instância do Vue
<div id="app"></div>
Código HTML que será inserido
Componentes Vue que serão
utilizados na aplicação
main.js
Componentização
Single File Components
Principais diretivas
v-for
v-model
v-if
Eventos e modificadores
@click
@keyup
Me prova que isso
existe!
Reatividade
Ciclo de vida
Comunicação entre componentes
Próximos passos
Para ir além do básico...
Vue Router: gerenciamento de rotas
Transitions: transições e animações
Vuex: gerenciamento de estados (Flux)
Nuxt.js: renderização no lado do servidor
Vuetify: Material Design
Dúvidas ?
Obrigado!

Mais conteúdo relacionado

Mais procurados

VueJS Introduction
VueJS IntroductionVueJS Introduction
VueJS Introduction
David Ličen
 
H3 2011 파이썬으로 클라우드 하고 싶어요_분산기술Lab_하용호
H3 2011 파이썬으로 클라우드 하고 싶어요_분산기술Lab_하용호H3 2011 파이썬으로 클라우드 하고 싶어요_분산기술Lab_하용호
H3 2011 파이썬으로 클라우드 하고 싶어요_분산기술Lab_하용호KTH, 케이티하이텔
 
Vue.js Getting Started
Vue.js Getting StartedVue.js Getting Started
Vue.js Getting Started
Murat Doğan
 
Intro to vue.js
Intro to vue.jsIntro to vue.js
Intro to vue.js
TechMagic
 
AWS 비용 효율화를 고려한 Reserved Instance + Savings Plan 옵션 - 박윤 어카운트 매니저 :: AWS Game...
AWS 비용 효율화를 고려한 Reserved Instance + Savings Plan 옵션 - 박윤 어카운트 매니저 :: AWS Game...AWS 비용 효율화를 고려한 Reserved Instance + Savings Plan 옵션 - 박윤 어카운트 매니저 :: AWS Game...
AWS 비용 효율화를 고려한 Reserved Instance + Savings Plan 옵션 - 박윤 어카운트 매니저 :: AWS Game...
Amazon Web Services Korea
 
SRE/DevOps 신입으로 1년간 근무하며 겪은 경험담
SRE/DevOps 신입으로 1년간 근무하며 겪은 경험담SRE/DevOps 신입으로 1년간 근무하며 겪은 경험담
SRE/DevOps 신입으로 1년간 근무하며 겪은 경험담
Juhyun Kim
 
Escalabilidade para sua solução na Nuvem da AWS de um para centenas de milhõe...
Escalabilidade para sua solução na Nuvem da AWS de um para centenas de milhõe...Escalabilidade para sua solução na Nuvem da AWS de um para centenas de milhõe...
Escalabilidade para sua solução na Nuvem da AWS de um para centenas de milhõe...
Amazon Web Services LATAM
 
AWS로 사용자 천만 명 서비스 만들기 (윤석찬)- 클라우드 태권 2015
AWS로 사용자 천만 명 서비스 만들기 (윤석찬)- 클라우드 태권 2015 AWS로 사용자 천만 명 서비스 만들기 (윤석찬)- 클라우드 태권 2015
AWS로 사용자 천만 명 서비스 만들기 (윤석찬)- 클라우드 태권 2015
Amazon Web Services Korea
 
An introduction to Vue.js
An introduction to Vue.jsAn introduction to Vue.js
An introduction to Vue.js
Javier Lafora Rey
 
React JS - Parte 1
React JS - Parte 1React JS - Parte 1
React JS - Parte 1
Bruno Catão
 
An introduction to Vue.js
An introduction to Vue.jsAn introduction to Vue.js
An introduction to Vue.js
Pagepro
 
Introduction to Django REST Framework, an easy way to build REST framework in...
Introduction to Django REST Framework, an easy way to build REST framework in...Introduction to Django REST Framework, an easy way to build REST framework in...
Introduction to Django REST Framework, an easy way to build REST framework in...
Zhe Li
 
[Cloud OnAir] エンタープライズでのマイグレーション 組織とリソース管理 2019年07月25日 放送
[Cloud OnAir] エンタープライズでのマイグレーション 組織とリソース管理 2019年07月25日 放送[Cloud OnAir] エンタープライズでのマイグレーション 組織とリソース管理 2019年07月25日 放送
[Cloud OnAir] エンタープライズでのマイグレーション 組織とリソース管理 2019年07月25日 放送
Google Cloud Platform - Japan
 
Maven
MavenMaven
[NEW LAUNCH!] Introducing AWS Transit Gateway (NET331) - AWS re:Invent 2018
[NEW LAUNCH!] Introducing AWS Transit Gateway (NET331) - AWS re:Invent 2018[NEW LAUNCH!] Introducing AWS Transit Gateway (NET331) - AWS re:Invent 2018
[NEW LAUNCH!] Introducing AWS Transit Gateway (NET331) - AWS re:Invent 2018
Amazon Web Services
 
천만 사용자를 위한 AWS 클라우드 아키텍처 진화하기::이창수::AWS Summit Seoul 2018
천만 사용자를 위한 AWS 클라우드 아키텍처 진화하기::이창수::AWS Summit Seoul 2018천만 사용자를 위한 AWS 클라우드 아키텍처 진화하기::이창수::AWS Summit Seoul 2018
천만 사용자를 위한 AWS 클라우드 아키텍처 진화하기::이창수::AWS Summit Seoul 2018Amazon Web Services Korea
 
Vue.js
Vue.jsVue.js
Terraform Tips and Tricks - LAOUC 2022
Terraform Tips and Tricks - LAOUC 2022Terraform Tips and Tricks - LAOUC 2022
Terraform Tips and Tricks - LAOUC 2022
Nelson Calero
 
Docker Advanced registry usage
Docker Advanced registry usageDocker Advanced registry usage
Docker Advanced registry usage
Docker, Inc.
 
Introduction to Git and GitHub Part 1
Introduction to Git and GitHub Part 1Introduction to Git and GitHub Part 1
Introduction to Git and GitHub Part 1
Omar Fathy
 

Mais procurados (20)

VueJS Introduction
VueJS IntroductionVueJS Introduction
VueJS Introduction
 
H3 2011 파이썬으로 클라우드 하고 싶어요_분산기술Lab_하용호
H3 2011 파이썬으로 클라우드 하고 싶어요_분산기술Lab_하용호H3 2011 파이썬으로 클라우드 하고 싶어요_분산기술Lab_하용호
H3 2011 파이썬으로 클라우드 하고 싶어요_분산기술Lab_하용호
 
Vue.js Getting Started
Vue.js Getting StartedVue.js Getting Started
Vue.js Getting Started
 
Intro to vue.js
Intro to vue.jsIntro to vue.js
Intro to vue.js
 
AWS 비용 효율화를 고려한 Reserved Instance + Savings Plan 옵션 - 박윤 어카운트 매니저 :: AWS Game...
AWS 비용 효율화를 고려한 Reserved Instance + Savings Plan 옵션 - 박윤 어카운트 매니저 :: AWS Game...AWS 비용 효율화를 고려한 Reserved Instance + Savings Plan 옵션 - 박윤 어카운트 매니저 :: AWS Game...
AWS 비용 효율화를 고려한 Reserved Instance + Savings Plan 옵션 - 박윤 어카운트 매니저 :: AWS Game...
 
SRE/DevOps 신입으로 1년간 근무하며 겪은 경험담
SRE/DevOps 신입으로 1년간 근무하며 겪은 경험담SRE/DevOps 신입으로 1년간 근무하며 겪은 경험담
SRE/DevOps 신입으로 1년간 근무하며 겪은 경험담
 
Escalabilidade para sua solução na Nuvem da AWS de um para centenas de milhõe...
Escalabilidade para sua solução na Nuvem da AWS de um para centenas de milhõe...Escalabilidade para sua solução na Nuvem da AWS de um para centenas de milhõe...
Escalabilidade para sua solução na Nuvem da AWS de um para centenas de milhõe...
 
AWS로 사용자 천만 명 서비스 만들기 (윤석찬)- 클라우드 태권 2015
AWS로 사용자 천만 명 서비스 만들기 (윤석찬)- 클라우드 태권 2015 AWS로 사용자 천만 명 서비스 만들기 (윤석찬)- 클라우드 태권 2015
AWS로 사용자 천만 명 서비스 만들기 (윤석찬)- 클라우드 태권 2015
 
An introduction to Vue.js
An introduction to Vue.jsAn introduction to Vue.js
An introduction to Vue.js
 
React JS - Parte 1
React JS - Parte 1React JS - Parte 1
React JS - Parte 1
 
An introduction to Vue.js
An introduction to Vue.jsAn introduction to Vue.js
An introduction to Vue.js
 
Introduction to Django REST Framework, an easy way to build REST framework in...
Introduction to Django REST Framework, an easy way to build REST framework in...Introduction to Django REST Framework, an easy way to build REST framework in...
Introduction to Django REST Framework, an easy way to build REST framework in...
 
[Cloud OnAir] エンタープライズでのマイグレーション 組織とリソース管理 2019年07月25日 放送
[Cloud OnAir] エンタープライズでのマイグレーション 組織とリソース管理 2019年07月25日 放送[Cloud OnAir] エンタープライズでのマイグレーション 組織とリソース管理 2019年07月25日 放送
[Cloud OnAir] エンタープライズでのマイグレーション 組織とリソース管理 2019年07月25日 放送
 
Maven
MavenMaven
Maven
 
[NEW LAUNCH!] Introducing AWS Transit Gateway (NET331) - AWS re:Invent 2018
[NEW LAUNCH!] Introducing AWS Transit Gateway (NET331) - AWS re:Invent 2018[NEW LAUNCH!] Introducing AWS Transit Gateway (NET331) - AWS re:Invent 2018
[NEW LAUNCH!] Introducing AWS Transit Gateway (NET331) - AWS re:Invent 2018
 
천만 사용자를 위한 AWS 클라우드 아키텍처 진화하기::이창수::AWS Summit Seoul 2018
천만 사용자를 위한 AWS 클라우드 아키텍처 진화하기::이창수::AWS Summit Seoul 2018천만 사용자를 위한 AWS 클라우드 아키텍처 진화하기::이창수::AWS Summit Seoul 2018
천만 사용자를 위한 AWS 클라우드 아키텍처 진화하기::이창수::AWS Summit Seoul 2018
 
Vue.js
Vue.jsVue.js
Vue.js
 
Terraform Tips and Tricks - LAOUC 2022
Terraform Tips and Tricks - LAOUC 2022Terraform Tips and Tricks - LAOUC 2022
Terraform Tips and Tricks - LAOUC 2022
 
Docker Advanced registry usage
Docker Advanced registry usageDocker Advanced registry usage
Docker Advanced registry usage
 
Introduction to Git and GitHub Part 1
Introduction to Git and GitHub Part 1Introduction to Git and GitHub Part 1
Introduction to Git and GitHub Part 1
 

Semelhante a Introdução Vue JS

Vue.js - o framework progressivo
Vue.js - o framework progressivoVue.js - o framework progressivo
Vue.js - o framework progressivo
Vinicius Reis
 
Asp.net core
Asp.net coreAsp.net core
Asp.net core
Tanato Cartaxo
 
Asp.Net Core - Meetup BH
Asp.Net Core - Meetup BHAsp.Net Core - Meetup BH
Asp.Net Core - Meetup BH
André Paulovich
 
Introdução ao DotNetNuke
Introdução ao DotNetNukeIntrodução ao DotNetNuke
Introdução ao DotNetNuke
Comunidade NetPonto
 
Produtividade infinito e além com We.js
Produtividade infinito e além com We.jsProdutividade infinito e além com We.js
Produtividade infinito e além com We.js
Alberto Souza
 
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
José Barbosa
 
Hello vue
Hello vueHello vue
Hello vue
Gabriel Colombo
 
Vue.js
Vue.jsVue.js
Aplicações Profissionais para Internet com Zend Framework
Aplicações Profissionais para Internet com Zend FrameworkAplicações Profissionais para Internet com Zend Framework
Aplicações Profissionais para Internet com Zend Framework
Flávio Lisboa
 
Spa com Vue.js
Spa com Vue.jsSpa com Vue.js
Acelerando a entrega de software com as ferramentas de desenvolvimento da AWS
Acelerando a entrega de software com as ferramentas de desenvolvimento da AWSAcelerando a entrega de software com as ferramentas de desenvolvimento da AWS
Acelerando a entrega de software com as ferramentas de desenvolvimento da AWS
Amazon Web Services LATAM
 
Primeiros passos no Vue.js
Primeiros passos no Vue.jsPrimeiros passos no Vue.js
Primeiros passos no Vue.js
Joel Rodrigues
 
IFSP 2015 - Cultura DevOps
IFSP 2015 - Cultura DevOpsIFSP 2015 - Cultura DevOps
IFSP 2015 - Cultura DevOps
Leonardo Comelli
 
Desmistificando o Framework da Zend
Desmistificando o Framework da ZendDesmistificando o Framework da Zend
Desmistificando o Framework da Zend
Domingos Teruel
 
Vue.js - Framwork Progressivo
Vue.js - Framwork ProgressivoVue.js - Framwork Progressivo
Vue.js - Framwork Progressivo
Bruno Santana
 
Asp net mvc
Asp net mvcAsp net mvc
Angular, React ou Vue? Comparando os favoritos do JS reativo
Angular, React ou Vue? Comparando os favoritos do JS reativoAngular, React ou Vue? Comparando os favoritos do JS reativo
Angular, React ou Vue? Comparando os favoritos do JS reativo
GDGFoz
 
ASP .NET MVC - Você esta pronto para a pílula vermelha?
ASP .NET MVC - Você esta pronto para a pílula vermelha?ASP .NET MVC - Você esta pronto para a pílula vermelha?
ASP .NET MVC - Você esta pronto para a pílula vermelha?
Douglas Aguiar
 
RubyConf 17 - Colocando sua aplicação vue nos trilhos
RubyConf 17 - Colocando sua aplicação vue nos trilhosRubyConf 17 - Colocando sua aplicação vue nos trilhos
RubyConf 17 - Colocando sua aplicação vue nos trilhos
Felipe Gadelha Ruoso
 
Introdução ao VUE JS
Introdução ao VUE JSIntrodução ao VUE JS
Introdução ao VUE JS
Cristiano Gonçalves
 

Semelhante a Introdução Vue JS (20)

Vue.js - o framework progressivo
Vue.js - o framework progressivoVue.js - o framework progressivo
Vue.js - o framework progressivo
 
Asp.net core
Asp.net coreAsp.net core
Asp.net core
 
Asp.Net Core - Meetup BH
Asp.Net Core - Meetup BHAsp.Net Core - Meetup BH
Asp.Net Core - Meetup BH
 
Introdução ao DotNetNuke
Introdução ao DotNetNukeIntrodução ao DotNetNuke
Introdução ao DotNetNuke
 
Produtividade infinito e além com We.js
Produtividade infinito e além com We.jsProdutividade infinito e além com We.js
Produtividade infinito e além com We.js
 
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
 
Hello vue
Hello vueHello vue
Hello vue
 
Vue.js
Vue.jsVue.js
Vue.js
 
Aplicações Profissionais para Internet com Zend Framework
Aplicações Profissionais para Internet com Zend FrameworkAplicações Profissionais para Internet com Zend Framework
Aplicações Profissionais para Internet com Zend Framework
 
Spa com Vue.js
Spa com Vue.jsSpa com Vue.js
Spa com Vue.js
 
Acelerando a entrega de software com as ferramentas de desenvolvimento da AWS
Acelerando a entrega de software com as ferramentas de desenvolvimento da AWSAcelerando a entrega de software com as ferramentas de desenvolvimento da AWS
Acelerando a entrega de software com as ferramentas de desenvolvimento da AWS
 
Primeiros passos no Vue.js
Primeiros passos no Vue.jsPrimeiros passos no Vue.js
Primeiros passos no Vue.js
 
IFSP 2015 - Cultura DevOps
IFSP 2015 - Cultura DevOpsIFSP 2015 - Cultura DevOps
IFSP 2015 - Cultura DevOps
 
Desmistificando o Framework da Zend
Desmistificando o Framework da ZendDesmistificando o Framework da Zend
Desmistificando o Framework da Zend
 
Vue.js - Framwork Progressivo
Vue.js - Framwork ProgressivoVue.js - Framwork Progressivo
Vue.js - Framwork Progressivo
 
Asp net mvc
Asp net mvcAsp net mvc
Asp net mvc
 
Angular, React ou Vue? Comparando os favoritos do JS reativo
Angular, React ou Vue? Comparando os favoritos do JS reativoAngular, React ou Vue? Comparando os favoritos do JS reativo
Angular, React ou Vue? Comparando os favoritos do JS reativo
 
ASP .NET MVC - Você esta pronto para a pílula vermelha?
ASP .NET MVC - Você esta pronto para a pílula vermelha?ASP .NET MVC - Você esta pronto para a pílula vermelha?
ASP .NET MVC - Você esta pronto para a pílula vermelha?
 
RubyConf 17 - Colocando sua aplicação vue nos trilhos
RubyConf 17 - Colocando sua aplicação vue nos trilhosRubyConf 17 - Colocando sua aplicação vue nos trilhos
RubyConf 17 - Colocando sua aplicação vue nos trilhos
 
Introdução ao VUE JS
Introdução ao VUE JSIntrodução ao VUE JS
Introdução ao VUE JS
 

Introdução Vue JS