Vue.js
44
Vue.js componentes reativos para interfaces web modernas
-
Upload
luis-felipe-souza -
Category
Technology
-
view
83 -
download
0
Transcript of Vue.js
Vue.jscomponentes reativos para interfaces web modernas
Luís || Felipe || Souzaluisfmsouza.com.br || @luisfmsouz
desenvolvedor front-end na
Estamos contratando!
1)Pronúncia
"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.jsCriado 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.
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
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
Opções deData e DOM
Principais opçõesnew 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!"
Bônus) Vue.js 2.0
Virtual-DOM!
BônusVue.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
Obrigado!Merci!
