vue-resource

vue-resource处理前后端数据交互

• 安装cnpm install vue-resource --save
• 使用:
  import VueResource from 'vue-resource'
Vue.use(VueResource)

this指vue实例

{
  // GET /someUrl
  this.$http.get('/someUrl').then(response => {

    // get body data
    this.someData = response.body;

  }, response => {
    // error callback
  });
}

• app.vue:

const ERR_OK = 0
  export default {
    data() {
      return {
        seller: {}
      }
    },
    created() {
      this.$http.get('/api/seller').then((res) => {
        res = res.body;
        if(res.errno === ERR_OK){//如果OK的状态
          this.seller = res.data;
          console.log(this.seller)//拿到了seller数据
        }
      })
    },
    components: {
      "v-header": header
    }
  }

把seller数据传递给组件，通过v-bind方法
header.vue通过props属性接受传递过来的seller

      export default {
        props: {
            seller: {
                type: Object
            }
        }
    }

avatar头像 的src通过v-bind ,图像宽高是设计稿的一半