Vue.jscomponentes reativos para interfaces web modernas

Luís || Felipe || Souzaluisfmsouza.com.br || @luisfmsouz

desenvolvedor front-end na

Estamos contratando!

1)Pronúncia

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.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!"

Live!

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!