Vue.js

Vue.js
componentes reativos para interfaces web modernas

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

Vue (pronounced /vjuː/, like view)

"O vue.js é um
angular
simplificado!"

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.

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

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

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>

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

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

Vue.js

Mais conteúdo relacionado

Mais procurados (20)

Destaque (20)

Semelhante a Vue.js (14)

Último (19)

Vue.js