vue前端如何从数据库拿数据显示在前端

在 Vue 前端中从数据库中获取数据并显示在前端，一般需要通过后端接口来实现数据的获取和传输。以下是一般的步骤：

1. 创建后端接口：在后端（比如使用 Node.js、PHP、Python 等）创建一个接口用于从数据库中获取数据。该接口可以使用数据库查询语言（如 SQL）来查询数据，并将查询结果以 JSON 格式返回给前端。

2. 在前端使用 Axios（或其他 HTTP 请求库）发起请求：在前端代码中，使用 Axios（或其他合适的库）发送 HTTP 请求到后端接口，获取数据。

3. 在前端组件中处理获取的数据：在 Vue 组件中，可以使用生命周期钩子函数（如 `mounted`）或者方法来处理从后端获取的数据。将数据存储在组件的 data 中，并在模板中进行遍历和展示。

下面是一个简单的示例代码：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items: []
    };
  },
  mounted() {
    // 发起请求获取数据
    axios.get('/api/items')
      .then(response => {
        this.items = response.data;
      })
      .catch(error => {
        console.error(error);
      });
  }
};
</script>

在上述示例中，通过 `mounted` 钩子函数在组件挂载后发起请求，并将获取到的数据保存在 `items` 数组中，然后通过 `v-for` 指令在模板中遍历并展示数据。

需要注意的是，以上只是一个简单的示例，实际情况可能会更复杂，涉及到数据处理和错误处理等。具体实现方式还需要根据后端接口和数据库的具体情况进行调整。