Vue.js Dojo #4
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!