Meisterung der Vue.js-Suchfunktionalität

Einführung

In diesem Projekt lernst du, wie du eine einfache Suchfunktion mit Vue 2 erstellst. Die Suchfunktion ermöglicht es Benutzern, Inhalte zu suchen und die relevanten Ergebnisse anzuzeigen. Dieses Projekt hilft dir, die Grundlagen von Vue.js zu verstehen und wie eine Suchfunktion in einer Webanwendung implementiert wird.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

Wie du die Projektstruktur einrichtest und die erforderlichen Dateien und Ordner vorbereitest
Wie du die HTML-Struktur zur index.html-Datei hinzufügst
Wie du die JavaScript-Logik implementierst, um die Suchfunktionalität zu verarbeiten
Wie du die Suchanzeige und die Suchergebnisse mit CSS gestylst

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

Vue.js verwenden, um eine responsive und interaktive Benutzeroberfläche zu erstellen
Eine Suchfunktion zu implementieren, die relevante Inhalte filtert und anzeigt
HTML, CSS und JavaScript zu integrieren, um eine vollständige Webanwendung zu erstellen
Mit Daten und berechneten Eigenschaften in Vue.js zu arbeiten

Projektstruktur einrichten

In diesem Schritt wirst du die Projektstruktur einrichten und die erforderlichen Dateien und Ordner vorbereiten.

Der Anfangscode für diese Aufgabe wurde bereits bereitgestellt. Öffne die Codierumgebung, und die Verzeichnisstruktur ist wie folgt:

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

Der css-Ordner enthält die Datei style.css, die zur Gestaltung der Suchanzeige und der Suchergebnisse verwendet wird. Der images-Ordner enthält die Bilder, die in den Suchergebnissen angezeigt werden. Die index.html-Datei ist die Haupt-HTML-Datei für das Projekt, und die vue.min.js-Datei ist die Vue.js-Bibliothek.

Das Hauptziel des Projekts ist es, die index.html-Datei zu vervollständigen, indem du die erforderliche HTML-Struktur, JavaScript-Logik und CSS-Stile hinzufügst, um die Suchfunktionalität zu implementieren.

HTML-Struktur hinzufügen

In diesem Schritt wirst du der index.html-Datei die HTML-Struktur hinzufügen.

Öffne die index.html-Datei und füge folgenden Code hinzu:

<!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>

Diese HTML-Struktur umfasst ein Suchfeld und einen Wrapper, um die Suchergebnisse anzuzeigen. Das Suchfeld ist an die search-Daten-Eigenschaft gebunden, und die Suchergebnisse werden mit der v-for-Direktive angezeigt, um über das filteredList-Array zu iterieren.

JavaScript-Logik hinzufügen

In diesem Schritt wirst du der index.html-Datei die JavaScript-Logik hinzufügen.

Innerhalb des <script>-Tags füge folgenden Code hinzu:

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);
      });
    }
  }
});

Dieser JavaScript-Code definiert eine Post-Klasse und erstellt eine neue Vue-Instanz mit den erforderlichen Daten und berechneten Eigenschaften, um die Suchfunktionalität zu verarbeiten.

Die Post-Klasse wird verwendet, um Instanzen von Beiträgen mit einem Titel, einem Link und Bild-Eigenschaften zu erstellen.
Die Vue-Instanz (app) wird mit folgenden Eigenschaften erstellt:
- el: Gibt das Element an, an dem die Vue-Instanz gemountet werden soll.
- data: Enthält die search-Eigenschaft für das Suchfeld und ein Array von postList-Elementen.
- computed: Definiert eine berechnete Eigenschaft filteredList, die die postList basierend auf der Suchanfrage filtert.

CSS-Stile ändern

In der Datei css/style.css wurden einige Anfangsstile bereitgestellt.

Wenn du die Stile weiter anpassen möchtest, kannst du die CSS-Datei ändern, um das Aussehen der Suchanzeige und der Suchergebnisse zu verändern.

Oder du kannst die Stile so belassen und zum nächsten Schritt übergehen.

Projekt ausführen

Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke des WebIDE, um das Projekt auszuführen.

Als Nächstes öffne "Web 8080" oben in der VM und aktualisiere es manuell, und du wirst die Seite sehen.

Zusammenfassung

Herzlichen Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Labore absolvieren, um deine Fähigkeiten zu verbessern.

Vue.js-Suchfunktionalitätentwicklung