vue3 获取网络新闻列表显示

Vue 3是一种流行的JavaScript框架，用于构建用户界面。它是Vue.js的最新版本，具有许多改进和新功能。要获取网络新闻列表并显示在Vue 3应用程序中，你可以按照以下步骤进行操作：

1. 首先，确保你已经安装了Vue 3。你可以通过在终端中运行以下命令来安装Vue CLI（命令行界面）：

npm install -g @vue/cli

2. 创建一个新的Vue 3项目。在终端中运行以下命令：

vue create my-news-app

然后按照提示进行配置，选择适合你的选项。

3. 进入项目目录：

cd my-news-app

4. 安装用于发起网络请求的axios库。在终端中运行以下命令：

npm install axios

5. 在Vue组件中使用axios来获取网络新闻列表。在你的组件中，可以使用以下代码来发起GET请求并获取新闻列表：

import axios from 'axios';

export default {
  data() {
    return {
      newsList: []
    };
  },
  mounted() {
    axios.get('https://api.example.com/news')
      .then(response => {
        this.newsList = response.data;
      })
      .catch(error => {
        console.error(error);
      });
  }
};

6. 在模板中显示新闻列表。在你的模板中，可以使用`v-for`指令来遍历新闻列表并显示每个新闻的标题和内容。以下是一个简单的示例：

<template>
  <div>
    <h1>网络新闻列表</h1>
    <ul>
      <li v-for="news in newsList" :key="news.id">
        <h2>{{ news.title }}</h2>
        <p>{{ news.content }}</p>
      </li>
    </ul>
  </div>
</template>

这样，当你运行Vue应用程序时，它将发起网络请求并获取新闻列表，并将其显示在页面上。