Dominando a Funcionalidade de Busca em Vue.js

Introdução

Neste projeto, você aprenderá como criar uma função de busca simples usando Vue 2. A função de busca permite que os usuários pesquisem conteúdo e exibe os resultados relevantes. Este projeto ajudará você a entender os fundamentos do Vue.js e como implementar um recurso de busca em uma aplicação web.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

Como configurar a estrutura do projeto e preparar os arquivos e pastas necessários
Como adicionar a estrutura HTML ao arquivo index.html
Como implementar a lógica JavaScript para lidar com a funcionalidade de busca
Como estilizar a entrada de busca e os resultados da busca usando CSS

🏆 Conquistas

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

Usar Vue.js para criar uma interface de usuário responsiva e interativa
Implementar um recurso de busca que filtra e exibe conteúdo relevante
Integrar HTML, CSS e JavaScript para criar uma aplicação web completa
Trabalhar com dados e propriedades computadas em Vue.js

Configurar a estrutura do projeto

Nesta etapa, você configurará a estrutura do projeto e preparará os arquivos e pastas necessários.

O código inicial para esta questão já foi fornecido. Abra o ambiente de codificação, e a estrutura de diretórios é a seguinte:

├── css
│   └── style.css
├── images
│   ├── bar.png
│   ├── birds.png
│   ├── cat.png
│   ├── dog.png
│   ├── fox.png
│   └── lion.png
├── index.html
└── vue.min.js

A pasta css contém o arquivo style.css, que será usado para estilizar a entrada de busca e os resultados da busca. A pasta images contém as imagens que serão exibidas nos resultados da busca. O arquivo index.html é o arquivo HTML principal do projeto, e o arquivo vue.min.js é a biblioteca Vue.js.

O objetivo principal do projeto é completar o arquivo index.html adicionando a estrutura HTML, a lógica JavaScript e os estilos CSS necessários para implementar a funcionalidade de busca.

Adicionar a estrutura HTML

Nesta etapa, você adicionará a estrutura HTML ao arquivo index.html.

Abra o arquivo index.html e adicione o seguinte código:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Search Function</title>
    <script src="vue.min.js"></script>
    <link rel="stylesheet" href="./css/style.css" />
  </head>

  <body>
    <div id="app">
      <div class="search-wrapper">
        <input type="text" v-model="search" placeholder="Please search" />
      </div>
      <div class="wrapper">
        <div class="card" v-for="post in filteredList">
          <a v-bind:href="post.link" target="_blank">
            <img v-bind:src="post.img" />
            {{ post.title }}
          </a>
        </div>
      </div>
    </div>
    <script>
      // O código JavaScript será adicionado na próxima etapa
    </script>
  </body>
</html>

Esta estrutura HTML inclui um campo de entrada de busca e um wrapper para exibir os resultados da busca. O campo de entrada de busca está vinculado à propriedade de dados search, e os resultados da busca são exibidos usando a diretiva v-for para iterar sobre o array filteredList.

Adicionar a lógica JavaScript

Nesta etapa, você adicionará a lógica JavaScript ao arquivo index.html.

Dentro da tag <script>, adicione o seguinte código:

class Post {
  constructor(title, link, img) {
    this.title = title;
    this.link = link;
    this.img = img;
  }
}

const app = new Vue({
  el: "#app",
  data: {
    search: "",
    postList: [
      new Post(
        "kitty",
        "https://unsplash.com/s/photos/cat",
        "./images/cat.png"
      ),
      new Post("puppy", "https://unsplash.com/@joeyc", "./images/dog.png"),
      new Post(
        "polar bear",
        "https://unsplash.com/@hansjurgen007",
        "./images/bar.png"
      ),
      new Post(
        "little lion",
        "https://unsplash.com/@hansjurgen007",
        "./images/lion.png"
      ),
      new Post(
        "little bird",
        "https://unsplash.com/@eugenechystiakov",
        "./images/birds.png"
      ),
      new Post(
        "fox",
        "https://unsplash.com/@introspectivedsgn",
        "./images/fox.png"
      )
    ]
  },
  computed: {
    filteredList() {
      return this.postList.filter((post) => {
        return post.title.includes(this.search);
      });
    }
  }
});

Este código JavaScript define uma classe Post e cria uma nova instância Vue com os dados e propriedades computadas (computed properties) necessários para lidar com a funcionalidade de busca.

A classe Post é usada para criar instâncias de posts com propriedades de título, link e imagem.
A instância Vue (app) é criada com as seguintes propriedades:
- el: Especifica o elemento para montar a instância Vue.
- data: Contém a propriedade search para a entrada de busca e um array de itens postList.
- computed: Define uma propriedade computada filteredList que filtra o postList com base na entrada de busca.

Modificar os estilos CSS

css/style.css foi fornecido com alguns estilos iniciais.

Se você deseja personalizar ainda mais os estilos, pode modificar o arquivo CSS para alterar a aparência da entrada de busca e dos resultados da busca.

Ou, você pode deixar os estilos como estão e prosseguir para a próxima etapa.

Executar o projeto

Clique no botão Go Live no canto inferior direito da WebIDE para executar o projeto.

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.

Desenvolvimento de Funcionalidade de Busca em Vue.js