Мастерство в функциональности поиска на Vue.js

Введение

В этом проекте вы научитесь создавать простую функцию поиска с использованием Vue 2. Функция поиска позволяет пользователям искать контент и отображать соответствующие результаты. Этот проект поможет вам понять основы Vue.js и как реализовать функцию поиска в веб-приложении.

👀 Предпросмотр

🎯 Задачи

В этом проекте вы научитесь:

Как настроить структуру проекта и подготовить необходимые файлы и папки
Как добавить HTML-структуру в файл index.html
Как реализовать JavaScript-логику для обработки функциональности поиска
Как стилизовать поле ввода поиска и результаты поиска с использованием CSS

🏆 Достижения

После завершения этого проекта вы сможете:

Использовать Vue.js для создания отзывчивого и интерактивного пользовательского интерфейса
Реализовать функцию поиска, которая фильтрует и отображает соответствующий контент
Интегрировать HTML, CSS и JavaScript для создания полноценного веб-приложения
Работать с данными и вычисляемыми свойствами в Vue.js

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) 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{{"Разработка функции поиска на Vue.js"}} html/lang_decl -.-> lab-445737{{"Разработка функции поиска на Vue.js"}} html/viewport -.-> lab-445737{{"Разработка функции поиска на Vue.js"}} html/layout -.-> lab-445737{{"Разработка функции поиска на Vue.js"}} html/multimedia -.-> lab-445737{{"Разработка функции поиска на Vue.js"}} html/embed_media -.-> lab-445737{{"Разработка функции поиска на Vue.js"}} html/inter_elems -.-> lab-445737{{"Разработка функции поиска на Vue.js"}} html/templating -.-> lab-445737{{"Разработка функции поиска на Vue.js"}} end

Настройка структуры проекта

В этом шаге вы настроите структуру проекта и подготовите необходимые файлы и папки.

Начальный код для этого вопроса уже предоставлен. Откройте среду разработки, и структура каталогов будет выглядеть так:

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

Папка css содержит файл style.css, который будет использоваться для стилизации поля ввода поиска и результатов поиска. Папка images содержит изображения, которые будут отображаться в результатах поиска. Файл index.html - это главный HTML-файл для проекта, а файл vue.min.js - это библиотека Vue.js.

Основная цель проекта - завершить файл index.html, добавив необходимую HTML-структуру, JavaScript-логику и CSS-стили для реализации функциональности поиска.

Добавление HTML-структуры

В этом шаге вы добавите HTML-структуру в файл index.html.

Откройте файл index.html и добавьте следующий код:

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

Эта HTML-структура включает в себя поле ввода поиска и обертку для отображения результатов поиска. Поле ввода поиска связано с свойством данных search, а результаты поиска отображаются с использованием директивы v-for для перебора массива filteredList.

Добавление JavaScript-логики

В этом шаге вы добавите JavaScript-логику в файл index.html.

Внутри тега <script> добавьте следующий код:

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

Этот JavaScript-код определяет класс Post и создает новый экземпляр Vue с необходимыми данными и вычисляемыми свойствами для обработки функциональности поиска.

Класс Post используется для создания экземпляров постов с свойствами заголовок, ссылка и изображение.
Экземпляр Vue (app) создается с следующими свойствами:
- el: Указывает элемент, на котором будет монтирован экземпляр Vue.
- data: Содержит свойство search для поля ввода поиска и массив элементов postList.
- computed: Определяет вычисляемое свойство filteredList, которое фильтрует postList на основе ввода поиска.

Изменение CSS-стилей

В css/style.css уже предоставлены некоторые начальные стили.

Если вы хотите дальней customize стили, вы можете изменить CSS-файл, чтобы изменить внешний вид поля ввода поиска и результатов поиска.

Или вы можете оставить стили как есть и перейти к следующему шагу.

Запустите проект

Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

Далее откройте "Web 8080" в верхней части ВМ и обновите его вручную, и вы увидите страницу.

✨ Проверить решение и практиковаться

Резюме

Поздравляем! Вы завершили этот проект. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.