掌握 Vue.js 搜索功能

介绍

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

👀 预览

🎯 任务

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

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

🏆 成果

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

使用 Vue.js 创建一个响应式且交互式的用户界面
实现一个能够过滤并显示相关内容的搜索功能
集成 HTML、CSS 和 JavaScript 来创建一个完整的 Web 应用程序
在 Vue.js 中处理数据和计算属性

设置项目结构

在这一步中，你将设置项目结构并准备必要的文件和文件夹。

这个问题的初始代码已经提供。打开编码环境，目录结构如下：

├── 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 中练习更多实验以提升技能。

Vue.js 搜索功能开发

介绍