掌握 Vue.js 搜索功能

简介

在这个项目中，你将学习如何使用Vue 2创建一个简单的搜索功能。该搜索功能允许用户搜索内容并显示相关结果。这个项目将帮助你理解Vue.js的基础知识以及如何在Web应用程序中实现搜索功能。

👀 预览

🎯 任务

在这个项目中，你将学习：

如何设置项目结构并准备必要的文件和文件夹
如何将HTML结构添加到index.html文件中
如何实现处理搜索功能的JavaScript逻辑
如何使用CSS对搜索输入和搜索结果进行样式设置

🏆 成果

完成这个项目后，你将能够：

使用Vue.js创建一个响应式且交互式的用户界面
实现一个能够过滤并显示相关内容的搜索功能
集成HTML、CSS和JavaScript来创建一个完整的Web应用程序
在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库。

该项目的主要目标是通过添加必要的HTML结构、JavaScript逻辑和CSS样式来完成 index.html 文件，以实现搜索功能。

添加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>搜索功能</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="请输入搜索内容" />
      </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代码
    </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("小猫", "https://unsplash.com/s/photos/cat", "./images/cat.png"),
      new Post("小狗", "https://unsplash.com/@joeyc", "./images/dog.png"),
      new Post(
        "北极熊",
        "https://unsplash.com/@hansjurgen007",
        "./images/bar.png"
      ),
      new Post(
        "小狮子",
        "https://unsplash.com/@hansjurgen007",
        "./images/lion.png"
      ),
      new Post(
        "小鸟",
        "https://unsplash.com/@eugenechystiakov",
        "./images/birds.png"
      ),
      new Post(
        "狐狸",
        "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 已经提供了一些初始样式。

如果你想进一步自定义样式，可以修改CSS文件来更改搜索输入框和搜索结果的外观。

或者，你也可以保持样式不变，直接进入下一步。

运行项目

点击WebIDE右下角的启动实时服务器按钮来运行项目。

接下来，在虚拟机顶部打开“Web 8080”并手动刷新，你就会看到页面。

✨ 查看解决方案并练习

总结

恭喜！你已完成此项目。你可以在LabEx中练习更多实验以提升技能。