Vue.js é uma biblioteca JavaScript reativa para construção de interfaces web, que permite criar aplicações baseadas em componentes de forma simples. Ela oferece data binding, diretivas e opções como computed properties e methods para manipulação de dados de forma reativa. A versão 2.0 trará melhorias como virtual DOM e server-side rendering, mantendo a API simples e leve da biblioteca.

1. Vue.js
componentes reativos para interfaces web modernas

2. Luís || Felipe || Souza
luisfmsouza.com.br || @luisfmsouz

3. desenvolvedor front-end na

4. Estamos
contratando!

5. 1)Pronúncia

6. Vue (pronounced /vjuː/, like view)

7. "O vue.js é um
angular
simplificado!"

9. 2) O vue.js não é
um angular
simplificado!

10. “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

11. 3) O que é esse
tal de vue.js?

12. Vue.js
Criado pelo Evan You (@youyuxi)
2014
Patreon $8,863
Apadrinhado pela comunidade
Laravel
Usado em larga escala na China
(Alibaba e Baidu)

13. 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.

16. DOM {}

17. Composable
components
Vue.js nos permite construir
aplicações compostas de pequenos
componentes, que são auto-
suficientes, e muitas vezes
reutilizáveis.

19. “Faltam mais
detalhes aqui!”
Devs que não estão dormindo

20. 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

21. Diretivas

22. Diretivas
<input type="text" v-model="name" />
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>

23. Diretivas - parte 2
<button v-on:click="doThis"></button>
<h1 v-if="isActive">{{ title }}</h1>
<h1 v-show="isActive">{{ title }}</h1>

25. 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

26. Opções de
Data e DOM

27. Principais opções
new Vue({
});
el: "#element",
data: {},
components: {},
computed: {},
methods: {}
template: "<div></div>",

28. Data (propriedades reativas)
data: {
name: "Luís Felipe",
lastName: "Souza",
company: "Magnetis",
debt: 1100
}

29. Components
components: {
'greeting': Greeting,
'money': Money
}

30. Components em ação
// o componente...
<money :value="1100"></money>
// se transforma em...
<h3>1100</h3>

31. Computed
computed: {
hasName: function() {
return !!this.name.length && !!this.lastName.length;
}
}

32. Computed serve para evitar
// como era…
<h1 v-if="!!this.name.length && !!this.lastName.length"> … </h1>
// e como é…
<h1 v-if="hasName"> … </h1>

33. Methods
methods: {
fullName: function() {
return this.name + ' ' + this.lastName;
}
}

34. Methods em ação
// o método...
<greeting fullName="this.fullName()"></greeting>
// retorna...
<h1>Luís Felipe Souza</h1>

35. "It's all about
simplicity!"

37. Live!

38. Bônus) Vue.js
2.0

39. Virtual-DOM!

40. 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

42. 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í!

43. Quero mais!
● http://www.vuejs-brasil.com.br/
● https://codecasts.com.br/
● https://github.com/vuejs/awesome-vue

44. Obrigado!
Merci!