vue-resource如何使用及小例子
时间: 2024-01-01 18:04:40 浏览: 30
使用vue-resource需要先在项目中安装vue-resource插件。可以通过npm或yarn进行安装,命令如下:
```bash
npm install vue-resource --save
# 或者
yarn add vue-resource
```
安装完成后,在Vue项目中使用vue-resource需要先在main.js中引入,并将其挂载到Vue实例中,代码如下:
```javascript
import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource)
```
引入完成后,就可以在Vue组件中使用this.$http发起HTTP请求了,例如:
```vue
<template>
<div>
<div v-for="post in posts" :key="post.id">
<h2>{{ post.title }}</h2>
<p>{{ post.body }}</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
posts: []
}
},
mounted() {
this.$http.get('https://jsonplaceholder.typicode.com/posts')
.then(response => {
this.posts = response.body
})
}
}
</script>
```
上面的例子展示了如何使用Vue-resource发起一个GET请求,并将返回的数据赋值给组件data中的posts属性,然后通过v-for指令展示在页面上。
除了GET请求外,Vue-resource还支持POST、PUT、DELETE等请求方法,具体可以参考官方文档。同时,Vue-resource还支持拦截器、请求/响应转换、请求/响应拦截等功能,使得开发者能够更加方便地处理网络请求。