vue-resource的安装及使用,请求http数据。
程序员文章站
2022-07-15 13:05:51
...
1.安装vue-resource。
首先在命令行中找到项目位置【非常重要】,然后输入:
npm install --save vue-resource
安装成功后,打开项目的package.json可以查看到vue-resource的版本信息。
2.导入vue-resource
在组件中使用之前,一定要先导入vue-resource。导入方法为:
打开main.js,输入:
import Resource from 'vue-resource'
Vue.use(Resource)
如图
3.使用get请求获取数据。
在需要获取数据的组件中,创建get请求来获取数据。这里我们的项目中是在App.vue父组件中使用。
为了保证页面数据显示正确,我们在App.vue组件中创建created生命周期钩子函数,在生成DOM之前加载好数据。
APP.vue中,需要在data中创建一个seller对象接收传递过来的数据。因为data.json里的seller数据是一个对象,后面的goods和ratings是数组。
<template>
<div>
<v-header :seller="seller"></v-header>//在使用的组件中传入seller的数据。
</div>...
</template>
<script>
import header from './components/header/header.vue'
const ERR_OK = 0
export default {
data () {
return {
seller: {}
}
},
created () {
this.$http.get('/api/seller').then((response) => {
response = response.body
console.log(response)
if (response.errno === ERR_OK) {
this.seller = response.data
console.log(this.seller)
}
})
},
}
</script>
4.在子组件中使用数据。
在子组件中(header)的props中接收seller,就可以在页面中使用seller
props: {
seller: {
type: Object
}
},
推荐阅读
-
vue中promise的使用及异步请求数据的方法
-
模拟HTTP请求实现网页自动操作及数据采集的方法
-
vue-resource的安装及使用,请求http数据。
-
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
-
(Node.js(一)处理http请求并响应、用户登录、模块化、第三方模块的安装(npm)、nrm安装与使用)
-
vue2.5.2使用http请求获取静态json数据的实例代码
-
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
-
oracle11g数据库的安装及使用教程
-
使用mysql记录从url返回的http GET请求数据操作
-
vue中promise的使用及异步请求数据的方法