Front-end Campinas Dojo de introdução ao Vue.js. Dia 12/11/2016.

1. Vue.js
Dojo #4

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

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

6. DOM {}

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

9. Diretivas

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

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

12. Opções de
Data e DOM

13. Principais opções
new Vue({
});
el: "#element",
computed: {},
methods: {},
render: function()
data: {},

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

15. Computed(faz cache do valor)
computed: {
hasName: function() {
return !!this.name.length && !!this.lastName.length;
}
}

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

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

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

19. vue-cli
https://github.com/vuejs/vue-cli

20. mão na massa!
#partiu

21. desenvolvedor front-end na

22. Estamos
contratando!

23. Obrigado!
Merci!