Vue.jsDojo #4

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

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.

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>

Opções deData e DOM

Principais opçõesnew Vue({

});

el: "#element",

computed: {},methods: {},render: function()

data: {},

Data (propriedades reativas)

data: {

name: "Luís Felipe",

lastName: "Souza",

company: "Magnetis",

debt: 1100

}

Computed(faz cache do valor)

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>

vue-clihttps://github.com/vuejs/vue-cli

mão na massa!#partiu

desenvolvedor front-end na

Estamos contratando!

Obrigado!Merci!