Curso
Vue.js: Exibindo listas (v-for)
É comum em nossa página ou aplicação web exibirmos listas. Elas podem ser uma lista de notícias, postagens, jogos, etc. No Vue.js existe a diretiva chamada v-for que nos permite percorrer um array e exibir os dados dos seus elementos diretamente no HTML. Neste curso você vai aprender como utilizar a diretiva v-for para renderizar listas.
Esse curso inclui:
Suporte em tempo real
Certificado
Carga horária:
6 horas
Curso de Vue.js (6 aulas)
Aula 1 - Introdução
Para exibirmos listas na programação Vue.js utilizamos a diretiva v-for. Nesta aula vamos entender o que é o v-for e porque ele é útil.
Aula 2 - v-for percorrendo um array
Nesta aula vamos aprender a sintaxe do v-for e como usá-lo para percorrer um array e exibir seus dados em uma tag HTML.
Aula 3 - v-for percorrendo um objeto
Assim como utilizamos o v-for para percorrer um array, também podemos fazer o mesmo para percorrer as propriedades de um objeto. Dessa forma conseguimos imprimir os nomes das propriedades e os seus respectivos valores.
Aula 4 - v-for com v-if
Ao percorrer um array nem todos os seus elementos devem ser exibidos para o usuário. Um exemplo disso é um array que possui uma lista de produtos onde você só deve exibir para o usuário o que possui estoque.
Aula 5 - Conhecendo o projeto base
Para focarmos no objetivo desse curso que é renderizar listas, vamos baixar um projeto base que conheceremos nesta aula.
Aula 6 - Refatorando o projeto
Agora que já conhecemos nosso projeto base e já sabemos o que podemos melhorar nele, nesta aula vamos colocar em prática o v-for refatorando nosso projeto.
Veja outros cursos de Vue.js
Vue.js: Hello World com Vue 3.0 CLI
Vue.js: Formulários
Curso de Vue.js: Como criar sua primeira aplicação