响应式产品列表布局 | Vue.js 教程

介绍

在这个项目中，你将学习如何创建一个具有切换功能的响应式产品列表布局。此功能允许用户轻松地在产品项的网格视图和列表视图之间切换。

👀 预览

响应式布局切换演示

🎯 任务

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

如何设置项目结构并理解每个文件和文件夹的用途
如何从 JSON 文件中获取数据并填充产品列表
如何使用 Vue.js 实现布局切换功能
如何根据所选视图有条件地渲染网格和列表布局

🏆 成果

完成此项目后，你将能够：

有效地构建 Vue.js 项目
使用 Axios 从 JSON 文件中获取数据
利用 Vue.js 指令（如 v-if 和 v-else）有条件地渲染内容
处理用户交互并相应地更新用户界面

设置项目结构

在这一步中，你将学习如何为布局切换项目设置项目结构。请按照以下步骤完成此操作：

├── css
├── images
├── js
│    ├── axios.min.js
│    └── vue.js
├── goodsList.json
└── index.html

熟悉每个文件夹和文件的用途：
- css：此文件夹用于存放样式文件。
- images：此文件夹用于存放图像。
- js/vue.js：这是 Vue 2.x 文件。
- js/axios.min.js：这是 Axios 文件。
- goodsList.json：这是请求所需的数据。
- index.html：此文件包含页面布局和逻辑。
点击 WebIDE 右下角的“Go Live”按钮来运行项目。
在虚拟机顶部打开“Web 8080”并手动刷新以查看页面。

实现数据获取

在这一步中，你将学习如何获取项目所需的数据。请按照以下步骤完成此操作：

在 index.html 文件中，找到文件底部的 <script> 标签。
在 <script> 标签内，使用 new Vue() 创建一个新的 Vue 实例。
在 Vue 实例的 data 选项中，添加一个 goodsList 属性并将其初始化为一个空数组。
在 Vue 实例的 mounted 钩子函数中，使用 Axios 从 goodsList.json 文件中获取数据。
用获取到的数据更新 goodsList 数据属性。

你的代码应该类似于以下内容：

var vm = new Vue({
  el: "#app",
  data: {
    goodsList: []
  },
  mounted() {
    axios.get("./goodsList.json").then((res) => (this.goodsList = res.data));
  }
});

实现布局切换

在这一步中，你将学习如何实现产品列表布局切换的功能。请按照以下步骤完成此操作：

在 index.html 文件中，找到 <div class="bar"> 元素。
在该元素内部，分别添加两个类名为 grid-icon 和 list-icon 的 <a> 元素。

<div class="bar">
  <a class="grid-icon"></a>
  <a class="list-icon"></a>
</div>

在 Vue 实例中创建一个 changeBar 数据属性，用于跟踪当前布局，将默认值设置为 0，即默认使用网格布局。

var vm = new Vue({
  el: "#app",
  data: {
    changeBar: 0
    //...
  }
});

为每个 <a> 元素绑定 @click 事件，当点击 grid-icon 时，将 changeBar 设置为 0，并为 grid-icon 添加 active 类。从 list-icon 中移除 active 类。

<div class="bar">
  <a
    class="grid-icon"
    :class="changeBar == 0? 'active' : ''"
    @click="changeBar = 0"
  ></a>
  <!--... -->
</div>

为每个 <a> 元素绑定 @click 事件，当点击 list-icon 时，将 changeBar 设置为 1，并为 list-icon 添加 active 类。从 grid-icon 中移除 active 类。

<div class="bar">
  <!--... -->
  <a
    class="list-icon"
    :class="changeBar == 1? 'active' : ''"
    @click="changeBar = 1"
  ></a>
</div>

使用 v-if 和 v-else 指令，根据 changeBar 的值有条件地渲染网格和列表布局。

<ul class="grid" v-if="changeBar == 0">
  <li v-for="item in goodsList">
    <a :href="item.url" target="_blank">
      <img :src="item.image.large" />
    </a>
  </li>
</ul>
<ul class="list" v-else>
  <li v-for="item in goodsList">
    <a :href="item.url" target="_blank">
      <img :src="item.image.small" />
    </a>
    <p>{{item.title}}</p>
  </li>
</ul>

完成项目

在这最后一步中，你将检查已完成的项目并确保它满足要求。

验证是否从 goodsList.json 文件中正确获取了数据。
确保布局切换功能按预期工作：
- 点击网格图标会将布局更改为网格视图，并为网格图标添加 active 类。
- 点击列表图标会将布局更改为列表视图，并为列表图标添加 active 类。
通过点击图标来测试项目，并确保布局按预期更改。

恭喜你！你已完成布局切换项目。你已经学会了如何：