SlideShare a Scribd company logo
1 of 44
Download to read offline
Vue.js
componentes reativos para interfaces web modernas
Luís || Felipe || Souza
luisfmsouza.com.br || @luisfmsouz
desenvolvedor front-end na
Estamos
contratando!
1)Pronúncia
Vue (pronounced /vjuː/, like view)
"O vue.js é um
angular
simplificado!"
Vue.js
2) O vue.js não é
um angular
simplificado!
“Vue.js é para criar aplicações
baseadas em componentes. Angular é
para criar aplicações que chamo de:
baseadas em templates.”
http://bit.ly/2e9Cp0k
Luiz Vinicius, CodeCasts
3) O que é esse
tal de vue.js?
Vue.js
Criado pelo Evan You (@youyuxi)
2014
Patreon $8,863
Apadrinhado pela comunidade
Laravel
Usado em larga escala na China
(Alibaba e Baidu)
Reactive data
binding
Sempre que você modificar os
dados, o DOM será atualizado!
Como resultado, grande parte da
nossa lógica estará em manipular
diretamente os dados, em vez de
bagunçar o DOM.
Vue.js
Vue.js
DOM {}
Composable
components
Vue.js nos permite construir
aplicações compostas de pequenos
componentes, que são auto-
suficientes, e muitas vezes
reutilizáveis.
Vue.js
“Faltam mais
detalhes aqui!”
Devs que não estão dormindo
Hello world vue.js
<div id="app">
<h3>Olá, {{ name }}</h3>
<input type="text" v-model="name">
</div>
<script>
new Vue({
el: '#app',
data: {
name: 'Luís Felipe Souza',
},
})
</script>
http://bit.ly/2egsZA6
Diretivas
Diretivas
<input type="text" v-model="name" />
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
Diretivas - parte 2
<button v-on:click="doThis"></button>
<h1 v-if="isActive">{{ title }}</h1>
<h1 v-show="isActive">{{ title }}</h1>
Vue.js
Vue.js
<input v-model="name" />
<div v-show="hasError">
...
</div>
<h1>{{ msg | uppercase }}</h1>
<input ng-model="name" />
<div ng-show="hasError">
...
</div>
<h1>{{ msg | uppercase }}</h1>
Angular
Opções de
Data e DOM
Principais opções
new Vue({
});
el: "#element",
data: {},
components: {},
computed: {},
methods: {}
template: "<div></div>",
Data (propriedades reativas)
data: {
name: "Luís Felipe",
lastName: "Souza",
company: "Magnetis",
debt: 1100
}
Components
components: {
'greeting': Greeting,
'money': Money
}
Components em ação
// o componente...
<money :value="1100"></money>
// se transforma em...
<h3>1100</h3>
Computed
computed: {
hasName: function() {
return !!this.name.length && !!this.lastName.length;
}
}
Computed serve para evitar
// como era…
<h1 v-if="!!this.name.length && !!this.lastName.length"> … </h1>
// e como é…
<h1 v-if="hasName"> … </h1>
Methods
methods: {
fullName: function() {
return this.name + ' ' + this.lastName;
}
}
Methods em ação
// o método...
<greeting fullName="this.fullName()"></greeting>
// retorna...
<h1>Luís Felipe Souza</h1>
"It's all about
simplicity!"
Vue.js
Live!
Bônus) Vue.js
2.0
Virtual-DOM!
Bônus
Vue.js 2.0
● Virtual-DOM
● SSR - Server Side Rendering
● Template ou JSX
● 16kb (min+gzip)
● Não quebrou a API
● Weex, o "Vue-Native"
http://bit.ly/2etwPF8
Vue.js
Lembrem-se!
Pronúncia /vjuː/, like view
O vue.js não é um angular
simplificado!
It's all about simplicity!
Reactive data binding
Composable components
2.0 vem aí!
Quero mais!
● http://www.vuejs-brasil.com.br/
● https://codecasts.com.br/
● https://github.com/vuejs/awesome-vue
Obrigado!
Merci!

More Related Content

What's hot

Começando com Vue.js
Começando com Vue.jsComeçando com Vue.js
Começando com Vue.jsmarcusbalbi
 
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-SideSergio Azevedo
 
Criando um Web Service Restful com Jersey, Eclipse, JBoss, Tomcat, WebSphere
Criando um Web Service Restful com Jersey, Eclipse, JBoss, Tomcat, WebSphereCriando um Web Service Restful com Jersey, Eclipse, JBoss, Tomcat, WebSphere
Criando um Web Service Restful com Jersey, Eclipse, JBoss, Tomcat, WebSphereJuliano Martins
 
O Poderoso AngularJS
O Poderoso AngularJSO Poderoso AngularJS
O Poderoso AngularJSBeto Muniz
 
Evento Front End SP - Arquitetura de Front
Evento Front End SP - Arquitetura de FrontEvento Front End SP - Arquitetura de Front
Evento Front End SP - Arquitetura de FrontMichel Ribeiro
 
Um futuro chamado Web Components
Um futuro chamado Web ComponentsUm futuro chamado Web Components
Um futuro chamado Web ComponentsZeno Rocha
 
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 FrameworkPablo Garrido
 
Criando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zeroCriando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zeroEduardo Shiota Yasuda
 
Offline Web com Service Workers - Sérgio Lopes
Offline Web com Service Workers - Sérgio LopesOffline Web com Service Workers - Sérgio Lopes
Offline Web com Service Workers - Sérgio LopesCaelum
 
Introdução ao AngularJS
Introdução ao AngularJSIntrodução ao AngularJS
Introdução ao AngularJSRodrigo Branas
 
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.jsVinicius Reis
 
Otimizacao Front-End para WordPress - OlhoSEO 2013
Otimizacao Front-End para WordPress - OlhoSEO 2013Otimizacao Front-End para WordPress - OlhoSEO 2013
Otimizacao Front-End para WordPress - OlhoSEO 2013Guga Alves
 
A evolução do AngularJS
A evolução do AngularJSA evolução do AngularJS
A evolução do AngularJSRodrigo Branas
 
AngularJS com NODE.JS e Socket.IO
AngularJS com NODE.JS e Socket.IOAngularJS com NODE.JS e Socket.IO
AngularJS com NODE.JS e Socket.IODouglas Lira
 
Autenticação com AngularJS e loadOnDemand
Autenticação com AngularJS e loadOnDemandAutenticação com AngularJS e loadOnDemand
Autenticação com AngularJS e loadOnDemandDouglas Lira
 
Iniciando com jQuery
Iniciando com jQueryIniciando com jQuery
Iniciando com jQueryTiago Butzke
 
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 UICleiton Francisco
 
AngularJS com loadOnDemand
AngularJS com loadOnDemandAngularJS com loadOnDemand
AngularJS com loadOnDemandDouglas Lira
 

What's hot (20)

Curso AngularJS - Parte 1
Curso AngularJS - Parte 1Curso AngularJS - Parte 1
Curso AngularJS - Parte 1
 
Começando com Vue.js
Começando com Vue.jsComeçando com Vue.js
Começando com Vue.js
 
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
 
Criando um Web Service Restful com Jersey, Eclipse, JBoss, Tomcat, WebSphere
Criando um Web Service Restful com Jersey, Eclipse, JBoss, Tomcat, WebSphereCriando um Web Service Restful com Jersey, Eclipse, JBoss, Tomcat, WebSphere
Criando um Web Service Restful com Jersey, Eclipse, JBoss, Tomcat, WebSphere
 
O Poderoso AngularJS
O Poderoso AngularJSO Poderoso AngularJS
O Poderoso AngularJS
 
Evento Front End SP - Arquitetura de Front
Evento Front End SP - Arquitetura de FrontEvento Front End SP - Arquitetura de Front
Evento Front End SP - Arquitetura de Front
 
Um futuro chamado Web Components
Um futuro chamado Web ComponentsUm futuro chamado Web Components
Um futuro chamado Web Components
 
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
 
Criando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zeroCriando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zero
 
Offline Web com Service Workers - Sérgio Lopes
Offline Web com Service Workers - Sérgio LopesOffline Web com Service Workers - Sérgio Lopes
Offline Web com Service Workers - Sérgio Lopes
 
Introdução ao AngularJS
Introdução ao AngularJSIntrodução ao AngularJS
Introdução ao AngularJS
 
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
 
Otimizacao Front-End para WordPress - OlhoSEO 2013
Otimizacao Front-End para WordPress - OlhoSEO 2013Otimizacao Front-End para WordPress - OlhoSEO 2013
Otimizacao Front-End para WordPress - OlhoSEO 2013
 
A evolução do AngularJS
A evolução do AngularJSA evolução do AngularJS
A evolução do AngularJS
 
AngularJS com NODE.JS e Socket.IO
AngularJS com NODE.JS e Socket.IOAngularJS com NODE.JS e Socket.IO
AngularJS com NODE.JS e Socket.IO
 
Autenticação com AngularJS e loadOnDemand
Autenticação com AngularJS e loadOnDemandAutenticação com AngularJS e loadOnDemand
Autenticação com AngularJS e loadOnDemand
 
JQuery
JQueryJQuery
JQuery
 
Iniciando com jQuery
Iniciando com jQueryIniciando com jQuery
Iniciando com jQuery
 
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 com loadOnDemand
AngularJS com loadOnDemandAngularJS com loadOnDemand
AngularJS com loadOnDemand
 

Viewers also liked

Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0Toshiro Shimizu
 
Enjoy the vue.js
Enjoy the vue.jsEnjoy the vue.js
Enjoy the vue.jsTechExeter
 
Making Turbolinks work with Vue.js: Fast server-generated pages with reactive...
Making Turbolinks work with Vue.js: Fast server-generated pages with reactive...Making Turbolinks work with Vue.js: Fast server-generated pages with reactive...
Making Turbolinks work with Vue.js: Fast server-generated pages with reactive...pascallaliberte
 
XebiCon'16 : Angular2, React, Vue.js - Bien choisir son framework Front-End. ...
XebiCon'16 : Angular2, React, Vue.js - Bien choisir son framework Front-End. ...XebiCon'16 : Angular2, React, Vue.js - Bien choisir son framework Front-End. ...
XebiCon'16 : Angular2, React, Vue.js - Bien choisir son framework Front-End. ...Publicis Sapient Engineering
 
Vue.js is boring - and that's a good thing
Vue.js is boring - and that's a good thingVue.js is boring - and that's a good thing
Vue.js is boring - and that's a good thingJoonas Lehtonen
 
Vue 淺談前端建置工具
Vue 淺談前端建置工具Vue 淺談前端建置工具
Vue 淺談前端建置工具andyyou
 
Vue js and Vue Material
Vue js and Vue MaterialVue js and Vue Material
Vue js and Vue MaterialEueung Mulyana
 
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染Sheng-Han Su
 
An Introduction to Vuejs
An Introduction to VuejsAn Introduction to Vuejs
An Introduction to VuejsPaddy Lock
 
Vue js 大型專案架構
Vue js 大型專案架構Vue js 大型專案架構
Vue js 大型專案架構Hina Chen
 
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.jsTakuya Tejima
 
Visual Studio Code 快速上手指南
Visual Studio Code 快速上手指南Visual Studio Code 快速上手指南
Visual Studio Code 快速上手指南Shengyou Fan
 
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]Kuro Hsu
 

Viewers also liked (20)

Why Vue.js?
Why Vue.js?Why Vue.js?
Why Vue.js?
 
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
 
Vue.js for beginners
Vue.js for beginnersVue.js for beginners
Vue.js for beginners
 
Enjoy the vue.js
Enjoy the vue.jsEnjoy the vue.js
Enjoy the vue.js
 
Desmistificando o PostCSS
Desmistificando o PostCSSDesmistificando o PostCSS
Desmistificando o PostCSS
 
Dojo vue.js
Dojo vue.jsDojo vue.js
Dojo vue.js
 
Making Turbolinks work with Vue.js: Fast server-generated pages with reactive...
Making Turbolinks work with Vue.js: Fast server-generated pages with reactive...Making Turbolinks work with Vue.js: Fast server-generated pages with reactive...
Making Turbolinks work with Vue.js: Fast server-generated pages with reactive...
 
XebiCon'16 : Angular2, React, Vue.js - Bien choisir son framework Front-End. ...
XebiCon'16 : Angular2, React, Vue.js - Bien choisir son framework Front-End. ...XebiCon'16 : Angular2, React, Vue.js - Bien choisir son framework Front-End. ...
XebiCon'16 : Angular2, React, Vue.js - Bien choisir son framework Front-End. ...
 
Vue.js is boring - and that's a good thing
Vue.js is boring - and that's a good thingVue.js is boring - and that's a good thing
Vue.js is boring - and that's a good thing
 
Vue 淺談前端建置工具
Vue 淺談前端建置工具Vue 淺談前端建置工具
Vue 淺談前端建置工具
 
Vue js and Vue Material
Vue js and Vue MaterialVue js and Vue Material
Vue js and Vue Material
 
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
 
An Introduction to Vuejs
An Introduction to VuejsAn Introduction to Vuejs
An Introduction to Vuejs
 
Love at first Vue
Love at first VueLove at first Vue
Love at first Vue
 
Vue
VueVue
Vue
 
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
 
Visual Studio Code 快速上手指南
Visual Studio Code 快速上手指南Visual Studio Code 快速上手指南
Visual Studio Code 快速上手指南
 
Vue.js
Vue.jsVue.js
Vue.js
 
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
 

Similar to Vue.js

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.jsAlberto Souza
 
Workshop Node.js + MongoDB + Mongoose
Workshop Node.js + MongoDB + MongooseWorkshop Node.js + MongoDB + Mongoose
Workshop Node.js + MongoDB + MongooseLuiz Duarte
 
Backbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectadosBackbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectadosHenrique Gogó
 
Iniciando com Jquery
Iniciando com JqueryIniciando com Jquery
Iniciando com JqueryDanilo Sousa
 
Workshop react + adonis.js
Workshop react + adonis.jsWorkshop react + adonis.js
Workshop react + adonis.jsDenis Velrino
 
Prototype Framework Javascript
Prototype Framework JavascriptPrototype Framework Javascript
Prototype Framework JavascriptMarcio Romu
 
LambdaDay: Backbone.js
LambdaDay: Backbone.jsLambdaDay: Backbone.js
LambdaDay: Backbone.jsGiovanni Bassi
 
Layouts e multiplas activities
Layouts e multiplas activitiesLayouts e multiplas activities
Layouts e multiplas activitiesCalebeMiquissene
 
Apresentação CEJS - Do nada para a nuvem
Apresentação CEJS - Do nada para a nuvemApresentação CEJS - Do nada para a nuvem
Apresentação CEJS - Do nada para a nuvemRodrigo Valerio
 
Desenvolvendo aplicações com Angular e Laravel no Back-end
Desenvolvendo aplicações com Angular e Laravel no Back-endDesenvolvendo aplicações com Angular e Laravel no Back-end
Desenvolvendo aplicações com Angular e Laravel no Back-endGiovanny Valente
 
Primeiros passos no Vue.js
Primeiros passos no Vue.jsPrimeiros passos no Vue.js
Primeiros passos no Vue.jsJoel Rodrigues
 
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 - WebBR2013Davidson Alencar
 
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015  Porto Alegre - Interfaces ricas com Rails e React.JSTDC2015  Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JSRodrigo Urubatan
 
Aplicações móveis com j query mobile
Aplicações móveis com j query mobileAplicações móveis com j query mobile
Aplicações móveis com j query mobileRondinelli Mesquita
 
ODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQueryODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQueryMarketing Digital ODIG
 
435142330-Guia-Completo-React-Js.pdf
435142330-Guia-Completo-React-Js.pdf435142330-Guia-Completo-React-Js.pdf
435142330-Guia-Completo-React-Js.pdfJulia469065
 
IoTizando com JavaScript
IoTizando com JavaScriptIoTizando com JavaScript
IoTizando com JavaScriptHeider Lopes
 

Similar to Vue.js (20)

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
 
Workshop Node.js + MongoDB + Mongoose
Workshop Node.js + MongoDB + MongooseWorkshop Node.js + MongoDB + Mongoose
Workshop Node.js + MongoDB + Mongoose
 
Backbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectadosBackbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectados
 
Spa com Vue.js
Spa com Vue.jsSpa com Vue.js
Spa com Vue.js
 
Iniciando com Jquery
Iniciando com JqueryIniciando com Jquery
Iniciando com Jquery
 
Workshop react + adonis.js
Workshop react + adonis.jsWorkshop react + adonis.js
Workshop react + adonis.js
 
Introdução Vue JS
Introdução Vue JSIntrodução Vue JS
Introdução Vue JS
 
Prototype Framework Javascript
Prototype Framework JavascriptPrototype Framework Javascript
Prototype Framework Javascript
 
LambdaDay: Backbone.js
LambdaDay: Backbone.jsLambdaDay: Backbone.js
LambdaDay: Backbone.js
 
Layouts e multiplas activities
Layouts e multiplas activitiesLayouts e multiplas activities
Layouts e multiplas activities
 
Apresentação CEJS - Do nada para a nuvem
Apresentação CEJS - Do nada para a nuvemApresentação CEJS - Do nada para a nuvem
Apresentação CEJS - Do nada para a nuvem
 
Desenvolvendo aplicações com Angular e Laravel no Back-end
Desenvolvendo aplicações com Angular e Laravel no Back-endDesenvolvendo aplicações com Angular e Laravel no Back-end
Desenvolvendo aplicações com Angular e Laravel no Back-end
 
Primeiros passos no Vue.js
Primeiros passos no Vue.jsPrimeiros passos no Vue.js
Primeiros passos no Vue.js
 
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
 
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015  Porto Alegre - Interfaces ricas com Rails e React.JSTDC2015  Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JS
 
Aplicações móveis com j query mobile
Aplicações móveis com j query mobileAplicações móveis com j query mobile
Aplicações móveis com j query mobile
 
ODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQueryODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQuery
 
435142330-Guia-Completo-React-Js.pdf
435142330-Guia-Completo-React-Js.pdf435142330-Guia-Completo-React-Js.pdf
435142330-Guia-Completo-React-Js.pdf
 
IoTizando com JavaScript
IoTizando com JavaScriptIoTizando com JavaScript
IoTizando com JavaScript
 
JavaServer Faces
JavaServer FacesJavaServer Faces
JavaServer Faces
 

Vue.js