javaScript vue+ajax网络数据获取

1.安装资源包

npm install vue-resource

2.启动文件main.js,引入文件

import VueResource from 'vue-resource'
Vue.use(VueResource)

3.request

<script>
  import header from './components/Header/header.vue'
  export default {
    data () {
      return {
        seller: {}
      }
    },
    created () {
      // GET /someUrl
      this.$http.get('/api/seller').then(response => {
        // get body data
        response = response.body
        if (response.errno === 0) {
          this.seller = response.data
          console.log(this.seller.avatar)
        }
      }, response => {
        // error callback
      })
    },
    components: {
      'v-header': header
    }}
</script>

4.v-bind(:) 通过pros传递数据

 <v-header :seller="seller"></v-header>

5.自定义组件v-header接受参数

<template>
    <div>
      <img :src="seller.avatar" alt="" width="60" height="60">
      {{seller.avatar}}
    </div>
</template>

<script type="text/ecmascript-6">
  export default{
    props: {
      seller: {
        type: Object
      }
    }
  }
</script>