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-header>组件，通过v-bind方法
header.vue通过props属性接受传递过来的seller
export default {
props: {
seller: {
type: Object
}
}
}
avatar头像 的src通过v-bind ,图像宽高是设计稿的一半
<img width="64" height="64" :src="seller.avatar">
