Vue3从零开始-实战：首页列表数据动态化

S12：首页列表数据动态化

大家好，我是【Vue3从零开始-实战】系列文章的作者，很高兴又和大家见面了。我们已经介绍了Vue3的基本使用，包括如何创建项目、使用组件、调用接口等，现在是时候开始实战了。在这一节中，我们将介绍如何使用Vue3来实现首页列表数据的动态化。

效果演示

在开始之前，我们先来看一下效果演示：

如上图所示，这是一个简单的首页列表页面，其中包含了文章标题、文章作者和文章发布时间等信息。当用户点击文章标题时，可以跳转到文章详情页面。

实现步骤

1. 创建项目

首先，我们需要创建一个Vue3项目。可以使用Vue CLI工具来创建项目，也可以手动创建项目。

2. 安装依赖

在项目中，我们需要安装一些依赖，包括Vue3、axios和Element UI。可以使用以下命令来安装这些依赖：

npm install vue@3 axios element-ui

3. 创建组件

接下来，我们需要创建一个组件来实现首页列表页面。可以使用以下命令来创建组件：

vue create component Home

这将在src/components目录下创建一个名为Home.vue的文件。

4.编写组件代码

在Home.vue文件中，我们需要编写组件的代码。组件代码如下：

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">
        <router-link :to="`/article/${item.id}`">{{ item.title }}</router-link>
        <span>{{ item.author }}</span>
        <span>{{ item.time }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import axios from 'axios'

export default {
  setup() {
    const list = ref([])

    onMounted(() => {
      axios.get('/api/articles').then(res => {
        list.value = res.data.data
      })
    })

    return {
      list
    }
  }
}
</script>

在这个组件中，我们使用了一个ul列表来显示文章列表，并使用v-for指令来遍历文章列表数据。当用户点击文章标题时，会跳转到文章详情页面。

5. 注册组件

在main.js文件中，我们需要注册组件：

import Home from './components/Home.vue'

const app = Vue.createApp({})

app.component('Home', Home)

app.mount('#app')

6. 启动项目

最后，我们可以使用以下命令来启动项目：

npm run serve

总结

以上就是如何使用Vue3来实现首页列表数据动态化的步骤。希望对大家有所帮助。在下一节中，我们将介绍如何使用Vue3来实现文章详情页面的功能。

关键词