Dominando la funcionalidad de búsqueda con Vue.js

Introducción

En este proyecto, aprenderás a crear una función de búsqueda simple utilizando Vue 2. La función de búsqueda permite a los usuarios buscar contenido y mostrar los resultados relevantes. Este proyecto te ayudará a entender los conceptos básicos de Vue.js y cómo implementar una característica de búsqueda en una aplicación web.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

Cómo configurar la estructura del proyecto y preparar los archivos y carpetas necesarios
Cómo agregar la estructura HTML al archivo index.html
Cómo implementar la lógica de JavaScript para manejar la funcionalidad de búsqueda
Cómo dar estilo a la entrada de búsqueda y los resultados de búsqueda utilizando CSS

🏆 Logros

Después de completar este proyecto, podrás:

Utilizar Vue.js para crear una interfaz de usuario reactiva e interactiva
Implementar una característica de búsqueda que filtre y muestre contenido relevante
Integrar HTML, CSS y JavaScript para crear una aplicación web completa
Trabajar con datos y propiedades computadas en Vue.js

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/BasicStructureGroup -.-> html/lang_decl("Language Declaration") html/BasicStructureGroup -.-> html/viewport("Viewport Declaration") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/MultimediaandGraphicsGroup -.-> html/multimedia("Multimedia Elements") html/MultimediaandGraphicsGroup -.-> html/embed_media("Embedding External Media") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/templating("HTML Templating") subgraph Lab Skills html/head_elems -.-> lab-445737{{"Desarrollo de la funcionalidad de búsqueda con Vue.js"}} html/lang_decl -.-> lab-445737{{"Desarrollo de la funcionalidad de búsqueda con Vue.js"}} html/viewport -.-> lab-445737{{"Desarrollo de la funcionalidad de búsqueda con Vue.js"}} html/layout -.-> lab-445737{{"Desarrollo de la funcionalidad de búsqueda con Vue.js"}} html/multimedia -.-> lab-445737{{"Desarrollo de la funcionalidad de búsqueda con Vue.js"}} html/embed_media -.-> lab-445737{{"Desarrollo de la funcionalidad de búsqueda con Vue.js"}} html/inter_elems -.-> lab-445737{{"Desarrollo de la funcionalidad de búsqueda con Vue.js"}} html/templating -.-> lab-445737{{"Desarrollo de la funcionalidad de búsqueda con Vue.js"}} end

Configurar la estructura del proyecto

En este paso, configurarás la estructura del proyecto y prepararás los archivos y carpetas necesarios.

El código inicial para esta pregunta ya se ha proporcionado. Abre el entorno de codificación y la estructura de directorios es la siguiente:

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

La carpeta css contiene el archivo style.css, que se utilizará para dar estilo a la entrada de búsqueda y los resultados de búsqueda. La carpeta images contiene las imágenes que se mostrarán en los resultados de búsqueda. El archivo index.html es el archivo HTML principal del proyecto y el archivo vue.min.js es la biblioteca de Vue.js.

El objetivo principal del proyecto es completar el archivo index.html agregando la estructura HTML necesaria, la lógica de JavaScript y los estilos CSS para implementar la funcionalidad de búsqueda.

Agregar la estructura HTML

En este paso, agregará la estructura HTML al archivo index.html.

Abra el archivo index.html y agregue el siguiente 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>
      // JavaScript code will be added in the next step
    </script>
  </body>
</html>

Esta estructura HTML incluye un campo de entrada de búsqueda y un contenedor para mostrar los resultados de búsqueda. El campo de entrada de búsqueda está vinculado a la propiedad de datos search, y los resultados de búsqueda se muestran utilizando la directiva v-for para iterar sobre la matriz filteredList.

Agregar la lógica de JavaScript

En este paso, agregará la lógica de JavaScript al archivo index.html.

Dentro de la etiqueta <script>, agregue el siguiente 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 de JavaScript define una clase Post y crea una nueva instancia de Vue con los datos y propiedades computadas necesarios para manejar la funcionalidad de búsqueda.

La clase Post se utiliza para crear instancias de publicaciones con propiedades de título, enlace e imagen.
La instancia de Vue (app) se crea con las siguientes propiedades:
- el: Especifica el elemento en el que montar la instancia de Vue.
- data: Contiene la propiedad search para la entrada de búsqueda y una matriz de elementos postList.
- computed: Define una propiedad computada filteredList que filtra la postList en función de la entrada de búsqueda.

Modificar los estilos CSS

Se ha proporcionado css/style.css con algunos estilos iniciales.

Si desea personalizar aún más los estilos, puede modificar el archivo CSS para cambiar la apariencia de la entrada de búsqueda y los resultados de búsqueda.

O, puede dejar los estilos tal como están y pasar al siguiente paso.

Ejecutar el proyecto

Haga clic en el botón Go Live en la esquina inferior derecha de WebIDE para ejecutar el proyecto.

Luego, abra "Web 8080" en la parte superior de la VM y actualícela manualmente y verá la página.

✨ Revisar Solución y Practicar

Resumen

¡Felicidades! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.