vue-resource的安装及使用,请求http数据。

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
    }
  },
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值