dojo vue.js
TRANSCRIPT
![Page 1: Dojo vue.js](https://reader031.vdocuments.mx/reader031/viewer/2022020920/58eeacee1a28ab395a8b46f3/html5/thumbnails/1.jpg)
Vue.jsDojo #4
![Page 2: Dojo vue.js](https://reader031.vdocuments.mx/reader031/viewer/2022020920/58eeacee1a28ab395a8b46f3/html5/thumbnails/2.jpg)
Luís || Felipe || Souzaluisfmsouza.com.br || @luisfmsouz
![Page 3: Dojo vue.js](https://reader031.vdocuments.mx/reader031/viewer/2022020920/58eeacee1a28ab395a8b46f3/html5/thumbnails/3.jpg)
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.
![Page 4: Dojo vue.js](https://reader031.vdocuments.mx/reader031/viewer/2022020920/58eeacee1a28ab395a8b46f3/html5/thumbnails/4.jpg)
![Page 5: Dojo vue.js](https://reader031.vdocuments.mx/reader031/viewer/2022020920/58eeacee1a28ab395a8b46f3/html5/thumbnails/5.jpg)
![Page 6: Dojo vue.js](https://reader031.vdocuments.mx/reader031/viewer/2022020920/58eeacee1a28ab395a8b46f3/html5/thumbnails/6.jpg)
DOM {}
![Page 7: Dojo vue.js](https://reader031.vdocuments.mx/reader031/viewer/2022020920/58eeacee1a28ab395a8b46f3/html5/thumbnails/7.jpg)
Composable components
Vue.js nos permite construir aplicações compostas de pequenos componentes, que são auto-suficientes, e muitas vezes reutilizáveis.
![Page 8: Dojo vue.js](https://reader031.vdocuments.mx/reader031/viewer/2022020920/58eeacee1a28ab395a8b46f3/html5/thumbnails/8.jpg)
![Page 9: Dojo vue.js](https://reader031.vdocuments.mx/reader031/viewer/2022020920/58eeacee1a28ab395a8b46f3/html5/thumbnails/9.jpg)
Diretivas
![Page 10: Dojo vue.js](https://reader031.vdocuments.mx/reader031/viewer/2022020920/58eeacee1a28ab395a8b46f3/html5/thumbnails/10.jpg)
Diretivas<input type="text" v-model="name" />
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
![Page 11: Dojo vue.js](https://reader031.vdocuments.mx/reader031/viewer/2022020920/58eeacee1a28ab395a8b46f3/html5/thumbnails/11.jpg)
Diretivas - parte 2
<button v-on:click="doThis"></button>
<h1 v-if="isActive">{{ title }}</h1>
<h1 v-show="isActive">{{ title }}</h1>
![Page 12: Dojo vue.js](https://reader031.vdocuments.mx/reader031/viewer/2022020920/58eeacee1a28ab395a8b46f3/html5/thumbnails/12.jpg)
Opções deData e DOM
![Page 13: Dojo vue.js](https://reader031.vdocuments.mx/reader031/viewer/2022020920/58eeacee1a28ab395a8b46f3/html5/thumbnails/13.jpg)
Principais opçõesnew Vue({
});
el: "#element",
computed: {},methods: {},render: function()
data: {},
![Page 14: Dojo vue.js](https://reader031.vdocuments.mx/reader031/viewer/2022020920/58eeacee1a28ab395a8b46f3/html5/thumbnails/14.jpg)
Data (propriedades reativas)
data: {
name: "Luís Felipe",
lastName: "Souza",
company: "Magnetis",
debt: 1100
}
![Page 15: Dojo vue.js](https://reader031.vdocuments.mx/reader031/viewer/2022020920/58eeacee1a28ab395a8b46f3/html5/thumbnails/15.jpg)
Computed(faz cache do valor)
computed: {
hasName: function() {
return !!this.name.length && !!
this.lastName.length;
}
}
![Page 16: Dojo vue.js](https://reader031.vdocuments.mx/reader031/viewer/2022020920/58eeacee1a28ab395a8b46f3/html5/thumbnails/16.jpg)
Computed serve para evitar
// como era…
<h1 v-if="!!this.name.length && !!this.lastName.length"> …
</h1>
// e como é…
<h1 v-if="hasName"> … </h1>
![Page 17: Dojo vue.js](https://reader031.vdocuments.mx/reader031/viewer/2022020920/58eeacee1a28ab395a8b46f3/html5/thumbnails/17.jpg)
Methods
methods: { fullName: function() { return this.name + ' ' + this.lastName; }}
![Page 18: Dojo vue.js](https://reader031.vdocuments.mx/reader031/viewer/2022020920/58eeacee1a28ab395a8b46f3/html5/thumbnails/18.jpg)
Methods em ação
// o método...
<greeting
fullName="this.fullName()"></greeting>
// retorna...
<h1>Luís Felipe Souza</h1>
![Page 20: Dojo vue.js](https://reader031.vdocuments.mx/reader031/viewer/2022020920/58eeacee1a28ab395a8b46f3/html5/thumbnails/20.jpg)
mão na massa!#partiu
![Page 21: Dojo vue.js](https://reader031.vdocuments.mx/reader031/viewer/2022020920/58eeacee1a28ab395a8b46f3/html5/thumbnails/21.jpg)
desenvolvedor front-end na
![Page 22: Dojo vue.js](https://reader031.vdocuments.mx/reader031/viewer/2022020920/58eeacee1a28ab395a8b46f3/html5/thumbnails/22.jpg)
Estamos contratando!
![Page 23: Dojo vue.js](https://reader031.vdocuments.mx/reader031/viewer/2022020920/58eeacee1a28ab395a8b46f3/html5/thumbnails/23.jpg)
Obrigado!Merci!