Vue.js 从 Ajax 获取数据

在 Vue.js 中，你可以使用 Ajax（也称 XMLHttpRequest）来从服务器获取数据。这篇文章将介绍如何使用 Vue.js 和 Ajax 来获取数据。

Ajax

Ajax 是客户端与服务器进行异步通信的一种技术。使用 Ajax 可以在不刷新整个页面的情况下从服务器获取数据。

在 Vue.js 中，你可以使用内置的 axios 库来发起 Ajax 请求。

安装 axios

使用 npm 或 yarn 安装 axios。

npm install axios

yarn add axios

发起 Ajax 请求

在 Vue.js 中，你可以使用 axios.get、axios.post、axios.put 等方法来发起 Ajax 请求。

// 发起 GET 请求
axios.get('http://example.com/api/data')
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  })

// 发起 POST 请求
axios.post('http://example.com/api/data', {
  foo: 'bar'
})
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  })

使用 Ajax 获取数据并渲染列表

下面的示例演示了如何使用 Ajax 获取数据并渲染列表。

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

<script>
import axios from 'axios'

export default {
  data() {
    return {
      items: []
    }
  },
  mounted() {
    axios.get('http://example.com/api/data')
      .then(response => {
        this.items = response.data
      })
      .catch(error => {
        console.error(error)
      })
  }
}
</script>

在上面的示例中，mounted 钩子函数会在组件挂载后自动调用。在这里，我们发起 Ajax 请求，并在响应中设置 items 数据。这会自动更新列表，显示从服务器获取的数据。

总结

使用 Vue.js 和 Ajax 从服务器获取数据非常简单。你可以使用 axios 库发起 Ajax 请求，并在响应中设置组件数据来更新 UI。