SlideShare ist ein Scribd-Unternehmen logo
1 von 49
VueJs
Uma alternativa elegante
Quem sou eu
Jonathan Bijos - 21 - Carioca
Desenvolvedor Javascript & iOS
Github → @Quaggie
Email → jonathanpbijos@gmail.com
VueJs
Fonte: https://vuejs.org/
VueJs
Fonte:
Open source
Fonte:
Quem usa
Fonte: https://vuejs.org/
Simplicidade
Simplicidade
Simplicidade
Simplicidade
Data
JS
Data
HTML
Watch
JS
Computed Properties
JS
Computed Properties
HTML
Methods
JS
Methods
HTML
Template Syntax
HTML
Class style syntax
v-if & v-else
JS
v-if & v-else
HTML
v-show
HTML
v-show
v-for
Result:
v-for
Result:
v-for
Result:
Events & Modifiers
Fonte: http://vuejs.org/guide/syntax.html#v-bind-Shorthand
Events & Modifiers
Fonte: http://vuejs.org/guide/events.html
Events & Modifiers
Fonte: http://vuejs.org/guide/events.html
Exemplo:
v-on:click === @click
Events & Modifiers
Fonte: http://vuejs.org/guide/events.html
Exemplo:
v-on:click === @click
Components
HTML JS
Components
Single file
component
Hello.vue
Components
Components
Components
Components
Single file
component
Hello.vue
Props
JS
Props
HTML
Vue Loader
Vue Loader
Vue Loader
Vue Loader
Vue Loader
Vue Loader
Comparação
Fonte: https://vuejs.org/guide/comparison.html
Comparação
Fonte: https://vuejs.org/guide/comparison.html
Comparação
Fonte: https://vuejs.org/guide/comparison.html
Let’s Test!
Fim!
Obrigado!
Github → @Quaggie
Email → jonathanpbijos@gmail.com

Weitere ähnliche Inhalte

Was ist angesagt?

Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.jsJava script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Vinicius Reis
 
Destruindo com AJAX: evitando o apocalipse - riojs
Destruindo com AJAX: evitando o apocalipse - riojsDestruindo com AJAX: evitando o apocalipse - riojs
Destruindo com AJAX: evitando o apocalipse - riojs
Hugo Roque
 

Was ist angesagt? (20)

React - Biblioteca Javascript para criação de UI
React - Biblioteca Javascript para criação de UIReact - Biblioteca Javascript para criação de UI
React - Biblioteca Javascript para criação de UI
 
AngularJS Abraçando o MVC Client-Side
AngularJS Abraçando o MVC Client-SideAngularJS Abraçando o MVC Client-Side
AngularJS Abraçando o MVC Client-Side
 
Curso AngularJS - Parte 1
Curso AngularJS - Parte 1Curso AngularJS - Parte 1
Curso AngularJS - Parte 1
 
Spa com Vue.js
Spa com Vue.jsSpa com Vue.js
Spa com Vue.js
 
Descomplicando o JQuery - Introdução ao Framework
Descomplicando o JQuery - Introdução ao FrameworkDescomplicando o JQuery - Introdução ao Framework
Descomplicando o JQuery - Introdução ao Framework
 
Curso AngularJS - Parte 2
Curso AngularJS - Parte 2Curso AngularJS - Parte 2
Curso AngularJS - Parte 2
 
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.jsJava script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
 
Introdução ao AngularJS
Introdução ao AngularJSIntrodução ao AngularJS
Introdução ao AngularJS
 
O Poderoso AngularJS
O Poderoso AngularJSO Poderoso AngularJS
O Poderoso AngularJS
 
React Native na globo.com
React Native na globo.comReact Native na globo.com
React Native na globo.com
 
Primeiros passos no Vue.js
Primeiros passos no Vue.jsPrimeiros passos no Vue.js
Primeiros passos no Vue.js
 
React Native - Plataformas Mobile
React Native - Plataformas MobileReact Native - Plataformas Mobile
React Native - Plataformas Mobile
 
Performance com AngularJS
Performance com AngularJSPerformance com AngularJS
Performance com AngularJS
 
ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA
ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDAANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA
ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA
 
Apresentação JQuery
Apresentação JQueryApresentação JQuery
Apresentação JQuery
 
Destruindo com AJAX: evitando o apocalipse - riojs
Destruindo com AJAX: evitando o apocalipse - riojsDestruindo com AJAX: evitando o apocalipse - riojs
Destruindo com AJAX: evitando o apocalipse - riojs
 
Visão Geral sobre Angular JS
Visão Geral sobre Angular JSVisão Geral sobre Angular JS
Visão Geral sobre Angular JS
 
Diego Narducci - React + Angular
Diego Narducci - React + AngularDiego Narducci - React + Angular
Diego Narducci - React + Angular
 
Material Design simples e rapido com AngularJS
Material Design simples e rapido com AngularJSMaterial Design simples e rapido com AngularJS
Material Design simples e rapido com AngularJS
 
Um futuro chamado Web Components
Um futuro chamado Web ComponentsUm futuro chamado Web Components
Um futuro chamado Web Components
 

Andere mochten auch

Ricky & alex powerpoint
Ricky & alex powerpointRicky & alex powerpoint
Ricky & alex powerpoint
kkopchick
 

Andere mochten auch (15)

How tovuejs
How tovuejsHow tovuejs
How tovuejs
 
An Introduction to Vuejs
An Introduction to VuejsAn Introduction to Vuejs
An Introduction to Vuejs
 
Vuejs testing
Vuejs testingVuejs testing
Vuejs testing
 
Vue.js
Vue.jsVue.js
Vue.js
 
VueJS meetup (Basics) @ nodum.io
VueJS meetup (Basics) @ nodum.ioVueJS meetup (Basics) @ nodum.io
VueJS meetup (Basics) @ nodum.io
 
Ricky & alex powerpoint
Ricky & alex powerpointRicky & alex powerpoint
Ricky & alex powerpoint
 
nodum.io MongoDB Meetup (Dutch)
nodum.io MongoDB Meetup (Dutch)nodum.io MongoDB Meetup (Dutch)
nodum.io MongoDB Meetup (Dutch)
 
Gui Input Tools for Math [UKMC09]
Gui Input Tools for Math [UKMC09]Gui Input Tools for Math [UKMC09]
Gui Input Tools for Math [UKMC09]
 
VueJs 簡介
VueJs 簡介VueJs 簡介
VueJs 簡介
 
Why Vue.js?
Why Vue.js?Why Vue.js?
Why Vue.js?
 
Vue js 大型專案架構
Vue js 大型專案架構Vue js 大型專案架構
Vue js 大型專案架構
 
Vue 2.0 + Vuex Router & Vuex at Vue.js
Vue 2.0 + Vuex Router & Vuex at Vue.jsVue 2.0 + Vuex Router & Vuex at Vue.js
Vue 2.0 + Vuex Router & Vuex at Vue.js
 
VueJS: The Simple Revolution
VueJS: The Simple RevolutionVueJS: The Simple Revolution
VueJS: The Simple Revolution
 
Volcanoes and earthquakes education powerpoint
Volcanoes and earthquakes education powerpointVolcanoes and earthquakes education powerpoint
Volcanoes and earthquakes education powerpoint
 
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
 

Ähnlich wie VueJS - Uma alternativa elegante

WEB 2 - Aula 01 - 02.08
WEB 2 - Aula 01 - 02.08WEB 2 - Aula 01 - 02.08
WEB 2 - Aula 01 - 02.08
Gilson Silva
 
Spring MVC Framework
Spring MVC FrameworkSpring MVC Framework
Spring MVC Framework
elliando dias
 

Ähnlich wie VueJS - Uma alternativa elegante (20)

jQuery e ASP.Net mvc2
jQuery e ASP.Net mvc2jQuery e ASP.Net mvc2
jQuery e ASP.Net mvc2
 
API's do HTML5 - Davidson Alencar - WebBR2013
API's do HTML5 - Davidson Alencar - WebBR2013API's do HTML5 - Davidson Alencar - WebBR2013
API's do HTML5 - Davidson Alencar - WebBR2013
 
WEB 2 - Aula 01 - 02.08
WEB 2 - Aula 01 - 02.08WEB 2 - Aula 01 - 02.08
WEB 2 - Aula 01 - 02.08
 
Spring MVC Framework
Spring MVC FrameworkSpring MVC Framework
Spring MVC Framework
 
Android chat app com Node.js
Android chat app com Node.jsAndroid chat app com Node.js
Android chat app com Node.js
 
Workshop Node.js + MongoDB + Mongoose
Workshop Node.js + MongoDB + MongooseWorkshop Node.js + MongoDB + Mongoose
Workshop Node.js + MongoDB + Mongoose
 
Como fazer mais em aplicações RIA escrevendo menos
Como fazer mais em aplicações RIA escrevendo menosComo fazer mais em aplicações RIA escrevendo menos
Como fazer mais em aplicações RIA escrevendo menos
 
Como Fazer (+) Em AplicaçõEs Ria Escrevendo ( )
Como Fazer (+) Em AplicaçõEs Ria Escrevendo ( )Como Fazer (+) Em AplicaçõEs Ria Escrevendo ( )
Como Fazer (+) Em AplicaçõEs Ria Escrevendo ( )
 
Introdução à Node.js + MongoDB
Introdução à Node.js + MongoDBIntrodução à Node.js + MongoDB
Introdução à Node.js + MongoDB
 
Desenvolvimento de Aplicações para o Facebook em ASP .NET
Desenvolvimento de Aplicações para o Facebook em ASP .NETDesenvolvimento de Aplicações para o Facebook em ASP .NET
Desenvolvimento de Aplicações para o Facebook em ASP .NET
 
Introduzindo StimulusJS: o novo Framework JavaScript para Ruby On Rails.
Introduzindo StimulusJS: o novo Framework JavaScript para Ruby On Rails.Introduzindo StimulusJS: o novo Framework JavaScript para Ruby On Rails.
Introduzindo StimulusJS: o novo Framework JavaScript para Ruby On Rails.
 
Java script aula 10 - angularjs
Java script   aula 10 - angularjsJava script   aula 10 - angularjs
Java script aula 10 - angularjs
 
C#4 - Parte 2 - COM interop e variância
C#4 - Parte 2 - COM interop e variânciaC#4 - Parte 2 - COM interop e variância
C#4 - Parte 2 - COM interop e variância
 
JSF 2.0 e ScrumToys
JSF 2.0 e ScrumToysJSF 2.0 e ScrumToys
JSF 2.0 e ScrumToys
 
Guia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devsGuia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devs
 
Introdução ao Asp.Net Mvc
Introdução ao Asp.Net MvcIntrodução ao Asp.Net Mvc
Introdução ao Asp.Net Mvc
 
JSF 2.0 e ScrumToys
JSF 2.0 e ScrumToysJSF 2.0 e ScrumToys
JSF 2.0 e ScrumToys
 
Workshop Mundo Senai - Hello, Angular.js
Workshop Mundo Senai - Hello, Angular.jsWorkshop Mundo Senai - Hello, Angular.js
Workshop Mundo Senai - Hello, Angular.js
 
Curso de Java (Parte 6) Introdução a Front-end
Curso de Java (Parte 6) Introdução a Front-endCurso de Java (Parte 6) Introdução a Front-end
Curso de Java (Parte 6) Introdução a Front-end
 
Rapid Application Development com Tapestry 5
Rapid Application Development com Tapestry 5Rapid Application Development com Tapestry 5
Rapid Application Development com Tapestry 5
 

Kürzlich hochgeladen

Assessement Boas Praticas em Kubernetes.pdf
Assessement Boas Praticas em Kubernetes.pdfAssessement Boas Praticas em Kubernetes.pdf
Assessement Boas Praticas em Kubernetes.pdf
Natalia Granato
 

Kürzlich hochgeladen (6)

ATIVIDADE 1 - LOGÍSTICA EMPRESARIAL - 52_2024.docx
ATIVIDADE 1 - LOGÍSTICA EMPRESARIAL - 52_2024.docxATIVIDADE 1 - LOGÍSTICA EMPRESARIAL - 52_2024.docx
ATIVIDADE 1 - LOGÍSTICA EMPRESARIAL - 52_2024.docx
 
ATIVIDADE 1 - GCOM - GESTÃO DA INFORMAÇÃO - 54_2024.docx
ATIVIDADE 1 - GCOM - GESTÃO DA INFORMAÇÃO - 54_2024.docxATIVIDADE 1 - GCOM - GESTÃO DA INFORMAÇÃO - 54_2024.docx
ATIVIDADE 1 - GCOM - GESTÃO DA INFORMAÇÃO - 54_2024.docx
 
Padrões de Projeto: Proxy e Command com exemplo
Padrões de Projeto: Proxy e Command com exemploPadrões de Projeto: Proxy e Command com exemplo
Padrões de Projeto: Proxy e Command com exemplo
 
Boas práticas de programação com Object Calisthenics
Boas práticas de programação com Object CalisthenicsBoas práticas de programação com Object Calisthenics
Boas práticas de programação com Object Calisthenics
 
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docxATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
 
Assessement Boas Praticas em Kubernetes.pdf
Assessement Boas Praticas em Kubernetes.pdfAssessement Boas Praticas em Kubernetes.pdf
Assessement Boas Praticas em Kubernetes.pdf
 

VueJS - Uma alternativa elegante

Hinweis der Redaktion

  1. Faculdade Processo das empresas Como chegou aonde está hoje
  2. 3 motivos -> Facil de começar; Versátil.. Minimalista.. Simples; Performático Comparar com velocidade do react que é considerado o mais rápido
  3. 3 motivos -> Facil de começar; Versátil.. Minimalista.. Simples; Performático Comparar com velocidade do react que é considerado o mais rápido