Vue-resource
安装
npm install vue-resource --save
配置
【main.js】
import VueRouter from 'vue-router'
Vue.use(VueResource)
使用
【app.vue】
this.$http.get('/api/seller').then((res) => { // 成功的回调
res = res.body
if (res.errno === ERR_OK) { // 验证错误码
this.seller = res.data //赋值到data上的seller
}
})
外部组件
把数据传递给子组件
【App.vue】
<v-header :seller="seller"></v-header>
【header.vue】在props上注册
props: {
seller: {
type: Object
}
}
布局及样式
为了能在不同dpi的设备上引入不同规格的图片，需要创建一个bg-image函数。
【mixin.styl】
bg-image($url)
background-image :url($url+"@2x.png")
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
background-image :url($url+"@3x.png")
调用这个函数
【header.vue】
<style>
//.....
.brand
bg-image('brand')
<style>
因为商家有各种活动，所以不同的活动也绑定不同的样式类，对应的json如下
【data.json】
//.....
"supports": [
{
"type": 0,
"description": "在线支付满28减5"
},
{
"type": 1,
"description": "VC无限橙果汁全场8折"
},
{
"type": 2,
"description": "单人精彩套餐"
}//.....
在【header.vue】创建时创建一个数组，数值对应类名
//...
created() {
this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
}
使用时传入supports的type值
<span class="icon" :class="classMap[seller.supports[0].type]"></span>
效果图及代码
当前截图
