vue中发请求获取数据
时间: 2023-07-10 07:31:30 浏览: 143
Vue中通过点击商品信息跳转至更加详细的商品信息页面
在Vue中发起请求获取数据可以使用Vue提供的`axios`库。首先需要安装`axios`,可以通过命令`npm install axios --save`来进行安装。然后在Vue组件中使用`axios`进行数据请求。
以下是一个简单的例子,假设我们需要从后台获取用户列表数据:
```html
<template>
<div>
<ul>
<li v-for="user in userList" :key="user.id">
{{ user.name }}
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
userList: []
};
},
mounted() {
axios.get('/api/user/list')
.then(res => {
this.userList = res.data;
})
.catch(error => {
console.log(error);
});
}
};
</script>
```
在上面的例子中,我们在组件的`mounted`生命周期函数中使用`axios`发起了一个`GET`请求,请求的地址是`/api/user/list`。当请求成功后,我们将获取到的数据赋值给了组件的`userList`数据,然后使用`v-for`指令将数据渲染到页面上。
需要注意的是,在实际开发中,我们需要根据后台接口的具体情况来进行数据请求的参数设置和数据处理。
阅读全文