Layout de Lista de Produtos Responsivo | Tutorial Vue.js

Introdução

Neste projeto, você aprenderá como criar um layout de lista de produtos responsivo com uma funcionalidade de alternância. Essa funcionalidade permite que os usuários alternem facilmente entre uma visualização em grade e uma visualização em lista dos itens do produto.

👀 Pré-visualização

responsive layout switching demo

🎯 Tarefas

Neste projeto, você aprenderá:

Como configurar a estrutura do projeto e entender o propósito de cada arquivo e pasta
Como buscar dados de um arquivo JSON e preencher a lista de produtos
Como implementar a funcionalidade de alternância de layout usando Vue.js
Como renderizar condicionalmente os layouts de grade e lista com base na visualização selecionada

🏆 Conquistas

Após concluir este projeto, você será capaz de:

Estruturar um projeto Vue.js de forma eficaz
Usar Axios para buscar dados de um arquivo JSON
Utilizar diretivas Vue.js como v-if e v-else para renderizar conteúdo condicionalmente
Lidar com interações do usuário e atualizar a interface do usuário (UI) de acordo

Configurar a Estrutura do Projeto

Nesta etapa, você aprenderá como configurar a estrutura do projeto para o projeto Layout Switch. Siga as etapas abaixo para concluir esta etapa:

Abra a pasta do projeto para este projeto. A estrutura do diretório é a seguinte:

├── css
├── images
├── js
│    ├── axios.min.js
│    └── vue.js
├── goodsList.json
└── index.html

Familiarize-se com o propósito de cada pasta e arquivo:
- css: Esta pasta é para arquivos de estilo.
- images: Esta pasta é para imagens.
- js/vue.js: Este é o arquivo Vue 2.x.
- js/axios.min.js: Este é o arquivo Axios.
- goodsList.json: Estes são os dados necessários para a requisição.
- index.html: Este arquivo contém o layout e a lógica da página.
Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.
Abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

Implementar a Obtenção de Dados

Nesta etapa, você aprenderá como buscar os dados necessários para o projeto. Siga as etapas abaixo para concluir esta etapa:

No arquivo index.html, localize a tag <script> na parte inferior do arquivo.
Dentro da tag <script>, crie uma nova instância Vue usando new Vue().
Na opção data da instância Vue, adicione uma propriedade goodsList e inicialize-a como um array vazio.
No hook mounted da instância Vue, use Axios para buscar os dados do arquivo goodsList.json.
Atualize a propriedade de dados goodsList com os dados buscados.

Seu código deve ser semelhante a este:

var vm = new Vue({
  el: "#app",
  data: {
    goodsList: []
  },
  mounted() {
    axios.get("./goodsList.json").then((res) => (this.goodsList = res.data));
  }
});

Implementar a Mudança de Layout

Nesta etapa, você aprenderá como implementar a funcionalidade de alternar o layout da lista de produtos. Siga as etapas abaixo para concluir esta etapa:

No arquivo index.html, localize o elemento <div class="bar">.
Dentro deste elemento, adicione dois elementos <a> com os nomes de classe grid-icon e list-icon, respectivamente.

<div class="bar">
  <a class="grid-icon"></a>
  <a class="list-icon"></a>
</div>

Crie uma propriedade de dados changeBar na instância Vue para controlar o layout atual, definindo o valor padrão como 0, ou seja, o padrão é o layout de grade.

var vm = new Vue({
  el: "#app",
  data: {
    changeBar: 0
    // ...
  }
});

Vincule o evento @click a cada elemento <a>. Quando o grid-icon é clicado, defina changeBar como 0 e adicione a classe active ao grid-icon. Remova a classe active do list-icon.

<div class="bar">
  <a
    class="grid-icon"
    :class="changeBar == 0 ? 'active' : ''"
    @click="changeBar = 0"
  ></a>
  <!-- ... -->
</div>

Vincule o evento @click a cada elemento <a>. Quando o list-icon é clicado, defina changeBar como 1 e adicione a classe active ao list-icon. Remova a classe active do grid-icon.

<div class="bar">
  <!-- ... -->
  <a
    class="list-icon"
    :class="changeBar == 1 ? 'active' : ''"
    @click="changeBar = 1"
  ></a>
</div>

Use as diretivas v-if e v-else para renderizar condicionalmente os layouts de grade e lista com base no valor de changeBar.

<ul class="grid" v-if="changeBar == 0">
  <li v-for="item in goodsList">
    <a :href="item.url" target="_blank">
      <img :src="item.image.large" />
    </a>
  </li>
</ul>
<ul class="list" v-else>
  <li v-for="item in goodsList">
    <a :href="item.url" target="_blank">
      <img :src="item.image.small" />
    </a>
    <p>{{item.title}}</p>
  </li>
</ul>

Finalizar o Projeto

Nesta etapa final, você revisará o projeto concluído e garantirá que ele atenda aos requisitos.

Verifique se os dados estão sendo buscados corretamente do arquivo goodsList.json.
Certifique-se de que a funcionalidade de alternância de layout funciona conforme o esperado:
- Clicar no ícone de grade altera o layout para a visualização de grade e adiciona a classe active ao ícone de grade.
- Clicar no ícone de lista altera o layout para a visualização de lista e adiciona a classe active ao ícone de lista.
Teste o projeto clicando nos ícones e garantindo que o layout seja alterado conforme o esperado.

Parabéns! Você concluiu o projeto de Alternância de Layout. Você aprendeu como: