第一次使用vue做的页面总结

1/mint ui 弹框使用
<mt-popup id="warrantySet" v-model="warrantyVisible" position="bottom"></mt-popup>
控制弹框显示与否的是warrantyVisible，这是个布尔型变量，默认为false不显示
2/v-for="(value,key,index) in offermsg.maps"循环

maps结构如下：
maps":{
"43":{
    "id":null,
    "inquiryId":null,
    "inquiryPartId":"43",
    "list":[
        {"id":"16","inquiryId":null,"inquiryPartId":"43","partDesc":"","partInfo":"123","partMemo":"","partName":"鍓嶄繚闄╂潬鐨�","prepareTime":"鐜拌揣","price":190,"quality":"CRT","qualityName":null,"qualitys":"鍘熷巶鍘熷寘,鍘熷巶鍝佽川","quantity":1,"warranty":"鍗婂勾"},
        {"id":"17","inquiryId":null,"inquiryPartId":"43","partDesc":"鍝佺墝","partInfo":"鍘熷巶鏃犲寘瑁�","partMemo":"","partName":"鍓嶄繚闄╂潬鐨�","prepareTime":"鐜拌揣","price":130,"quality":"OEM","qualityName":null,"qualitys":"鍘熷巶鍘熷寘,鍘熷巶鍝佽川","quantity":1,"warranty":"鍗婂勾"}
    ],
    "partMemo":"",
    "partName":"鍓嶄繚闄╂潬鐨�",
    "qualitys":"鍘熷巶鍘熷寘,鍘熷巶鍝佽川",
    "quantity":1,
},
        
"44":{
"id":null,
"inquiryId":null,
"inquiryPartId":"44",
"list":[
    {
        "id":"18","inquiryPartId":"44","partDesc":"鍝佺墝","partInfo":null,"partMemo":"","partName":"鍙戝姩鏈虹僵","prepareTime":"鐜拌揣","price":395,"quality":"CRT","qualityName":null,"qualitys":"鍘熷巶鍘熷寘,鍝佺墝","quantity":1,"warranty":"鍗婂勾"
    }
],

"partMemo":"",
"partName":"鍙戝姩鏈虹僵",
"qualitys":"鍘熷巶鍘熷寘,鍝佺墝",
"quantity":1,
}}

value指代offermsg.maps中的对象的value，key是43,44等，index是0,1,...
方法中对象遍历 ==>
for(let item in items){
    console.log(items[item])
}
3/多个连续判断可使用if-else if -else或者switch
for写法：
for( let i in arr ){
    if(arr[i] ==='原厂原包'){    
        list.push(this.generateData(pid,'CRT',set.crtDefaultPartInfo,set.crtDefaultWarranty));
    }else if(arr[i] ==='原厂品质'){
        list.push(this.generateData(pid,'OEM',set.oemDefaultPartInfo,set.oemDefaultWarranty));
    }else if(arr[i] ==='品牌'){
        list.push(this.generateData(pid,'PP',set.ppDefaultPartInfo,set.ppDefaultWarranty));        
    }else if(arr[i] ==='适用'){
        list.push(this.generateData(pid,'SY',set.syDefaultPartInfo,set.syDefaultWarranty));    
    }else if(arr[i] ==='拆车'){
        list.push(this.generateData(pid,'CC',set.ccDefaultPartInfo,set.ccDefaultWarranty));
    }
}
switch写法
switch(data.quality){
    case 'CRT':
        data.partInfo = set.crtDefaultPartInfo;
        data.warranty = set.crtDefaultWarranty;
        break;
    case 'OEM':
        data.partInfo = set.oemDefaultPartInfo;
        data.warranty = set.oemDefaultWarranty;
        break;
    case 'PP':
        data.partInfo = set.ppDefaultPartInfo;
      data.warranty = set.ppDefaultWarranty;
      break;
    case 'SY':
        data.partInfo = set.syDefaultPartInfo;
        data.warranty = set.syDefaultWarranty;
        break;
    case 'CC':
        data.partInfo = set.ccDefaultPartInfo;
        data.warranty = set.ccDefaultWarranty;
        break;
}
4/查找索引 findIndex(function(value, index, arr) {})-->返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1
需求是：list中存放的是每条报价，每条报价根据提供的品质不同而不同，而相同品质可能也会有好几条数据。每种quality的第一条报价，带有+报价的按钮，其余的是-报价。

"list":[
    {
        "id":"18","quality":"CRT",partInfo: 'ddd'
    },
    {
        "id":"19","quality":"CRT",partInfo: 'sh'
    },
    {
        "id":"18","quality":"oem",partInfo: 'bj'
    }
]

嵌套在v-for循环中。
<div    v-for="(bj,iIndex) in item.list">
    <mt-button    v-if="bj.iIndex == list.findIndex(function(value,index, arr){
    return value.quality == bj.quality
})">+报价</mt-button>
<mt-button v-else>-报价</mt-button>
</div>
其实在list的数据中只要添加一个字段isAdd来标识就可以省下判断。
5/aixos跨域
1)引入 axios-> import axios from 'axios'
2)挂载在vue原型上-> Vue.prototype.$axios = axios
3)使用 
let options = {
    method: 'POST',
    headers: { 'content-type': 'application/x-www-form-urlencoded' },
    data: qs.stringify(data);
    url: process.env.API_HOST+'wx/offers!saveSubOffers.do';
};
this.$axios(options);
qs.stringify()这个方法是将一个对象序列化成一个字符串，与querystring.parse相对。
process.env.API_HOST是解决dev和production环境下，请求地址需要来回切换的一种方式。
在config文件夹下，
dev.env.js中配置API_HOST为dev环境下请求的域,也就是'/api'
prod.env.js中配置API_HOST为prod环境下请求的域

process.env.API_HOST可以自动根据你是使用的 npn run dev还是npm run build来判断进而使用设置的域。
6/访问xxx/index.html?id=xx,这里的id是请求中所需要的id，可在打包生成的index.html中手动通过
window.location.href.split('=')[1]获取，将其存储为一个常量，并将常量替换api.js中的请求id。
但是有个问题，就是首次输入地址会没有数据，控制台会因为拿不到数据而报错，但是刷新两次就没问题了。因为这个，我都不敢放在正式环境中，首次使用vue做的东西也只能这么放着了。