Vue的知识记录

年前的时候做了一个电商的小程序，年后过来又开始写公司官网的静态界面，以及根据新需求修改电商后台的接口。
但是公司要把小程序转为H5，放到微信公众号当中。本来是直接用weweb转成H5，但是各种原因（filter，样式..等等问题）
公司决定使用Vue重新开发，于是便交给我了。
相比较自己毕业设计使用的AngularJS4，我觉得Vue的开发比较容易上手了。但是实现小程序上的界面功能就比较难受了，需要自己去写或者导入插件。
关于安转跟语法 去官网https://cn.vuejs.org/
这里记录一下自己所遇到问题：
1.eslint检查,刚开始看到红线在代码下面看着快纠结死了：
vue-cli有eslint检查,webstrom编译报错,Eslint代码规范在eslintrc.js中修改，或者config/idnex.js ->dev-> useEslintrc：false
2.for循环：
v-for循环应该配置key(key是在组件循环的时候必须的一个参数，用来唯一标识这个组件)
对于for循环下标（item，index）in List
3.数组的问题：
由于 JavaScript 的限制Vue 不能检测以下变动的数组(网上看到的解释：Vue之所以能够监听Model状态的变化，是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化。但是，对于数组元素的赋值，却没有办法直接监听)：
利用索引直接设置一个项(this.$set(List, index, newValue)) 
修改数组的长度 
4.自己在首页触底开始刷新下一页商品的功能，发现在别的页面触底也会触发该页面的触底函数
利用页面生命周期结束时会使用destroy方法销毁滚动事件。window.removeEventListener('scroll', this.scrollBottom);//页面滚动事件移除
5.点击跳转页面
第二种不会将参数携带在url中:1.this.$router.push({path:'/productDetail/'+item}) 2.this.$router.push({name:'productDetail',params:{productDetail:item}})
返回上一级：this.$router.go(-1)
接受参数：  let routerParams = this.$route.params
动态路由的变化 需要用watch进行监控，不然url虽然改变，但是生命周期不会重新来一次
    watch: {
      '$route'(to, from) {
        // 对路由变化作出响应...
        document.body.scrollTop = 0
        document.documentElement.scrollTop = 0
      }
    },
6.localStorage 不能缓存对象
当自己使用第二种方法进行页面跳转时，刷新界面会报错，因为没有参数，所以将参数保存到localStorage

7.省市区三级联动的实现：（npm i mint-ui --save）

这里自己去将

import 'mint-ui/lib/style.css';

中的css拷贝出来了，方便自己去修改模板的样式（不要直接在上面修改，不然其他人使用代码的时候，npm install 就会没有了）

<template>
  <div>
    <div class="padding10 back-white" style="color: rgb(74,74,74)">
      <div class="row space-between black-line items-center padding5550" style="height: 35px;">
        <div>收货人姓名</div>
        <input v-model="name"/>
      </div>
      <div class="row space-between black-line items-center padding5550" style="height: 35px;">
        <div>联系电话</div>
        <input v-model="tel"/>
      </div>
      <div class="row space-between black-line items-center padding5550" style="height: 35px;">
        <div>所在地区</div>
        <div @click="showCity()" class="fonts12">{{choose}}</div>
      </div>
      <div class="row space-between black-line items-center padding5550" style="height: 35px;">
        <div>详细地址</div>
        <input v-model="address"/>
      </div>
      <div class="row space-between  items-center padding5550" style="height: 35px;">
        <div>身份证号码</div>
        <input v-model="card"/>
      </div>
    </div>
    <div class="back-white padding10" style="margin-top: 5px">
      <div class="row space-between items-center padding5550" style="height: 35px;">
        <div>设为默认地址</div>
        <el-switch
          v-model="value"
          active-color="#df0c84"
          inactive-color="#f5f5f5">
        </el-switch>
      </div>
    </div>
    <div class="commodity_screen" v-if="show" @click="show = !show"></div>
    <transition name="slide-fade">
      <mt-picker v-show="show" :slots="slots" valueKey="region_name" @change="onValuesChange" :showToolbar="true">
        <div class="row space-between items-center" style="height:100%">
          <div class="picker-item" @click="showCity()">
            取消
          </div>
          <div class="picker-item">

          </div>
          <div class="picker-item" style="color: #df0c84" @click="sureAddress()">
            确定
          </div>
        </div>
      </mt-picker>
    </transition>
    <!-- 底部 -->
    <div style='height:50px;width:100%'>
    </div>
    <!-- 新增地址 -->
    <div class='xdp-fix' style='height:50px'>
      <div style='width:100%;font-size:19px;font-weight:600;color: #ffffff' data-id=''
           class="btn btn-block bgcolor just-center items-center" @click="submit()">
        保 存
      </div>
    </div>
  </div>
</template>
<script>
  //  import MtPicker from "../../../node_modules/mint-ui/packages/picker/src/picker.vue";
  import myaddress from '../../../static/json/provinces.json'
  import {newAddress} from '../../http/httpClient'
  import {message} from '../../remind/alert'

  export default {
//    components: {MtPicker},
    data() {
      return {
        name: "",
        tel: "",
        address: "",
        card: "",
        choose: "请选择",
        show: false,
        value: true,
        province: "",
        city: "",
        district: "",
        provincename: "",
        cityname: "",
        districtname: "",
        addressDetail: null,
        front: "",
        contrary: "",
        slots: [
          {
            flex: 1,
            values: myaddress[0],
            className: 'slot1',
            textAlign: 'right',
          }, {
            divider: true,
            content: '-',
            className: 'slot2'
          }, {
            flex: 1,
            values: '',
            className: 'slot3',
            textAlign: 'left'
          },
          {
            divider: true,
            content: '-',
            className: 'slot4'
          },
          {
            flex: 1,
            values: '',
            className: 'slot5',
            textAlign: 'left'
          },
        ]
      }
    },
    created() {
      var tempCity = [], tempCounty = [];
      for (var i = 0; i < myaddress[1].length; i++) {
        if ("130000" == myaddress[1][i].parent_code) {
          tempCity.push(myaddress[1][i])
        }
      }
      for (var i = 0; i < myaddress[2].length; i++) {
        if ("130100" == myaddress[2][i].parent_code) {
          tempCounty.push(myaddress[2][i])
        }
      }
      this.slots[2].values = tempCity;
      this.slots[4].values = tempCounty;
      let routerParams = this.$route.params
      console.log(routerParams)
      if (routerParams.addressDetail != null) {
        this.addressDetail = routerParams.addressDetail
        this.address = routerParams.addressDetail.address
        this.choose = routerParams.addressDetail.province + routerParams.addressDetail.city + routerParams.addressDetail.district
        this.tel = routerParams.addressDetail.phone
        this.card = routerParams.addressDetail.idNo
        this.name = routerParams.addressDetail.realName
        this.value = routerParams.addressDetail.isDefaultAddress == 1 ? true : false
      } else {
        console.log(this.addressDetail)
      }
    },
    mounted() {
      this.$nextTick(() => { //vue里面全部加载好了再执行的函数 （类似于setTimeout）
//          this.myAddressSlots[0].defaultIndex = 0
      })
    },
    methods: {
      submit() {
        var that = this
        var data = null;
        if (that.addressDetail == null) {
          data = {
            "address": this.address,
            "city": this.city,
            "district": this.district,
            "idNo": this.card,
            "isDefaultAddress": this.value == true ? 1 : 0,
            "phone": this.tel,
            "province": this.province,
            "realName": this.name,
            "othersideCardidImage": this.front,
            "positiveCardidImage": this.contrary,
          }
        } else {
          data = {
            "address": this.address,
            "city": this.city,
            "idx": this.addressDetail.idx,
            "memberIdx": this.addressDetail.memberIdx,
            "district": this.district,
            "idNo": this.card,
            "isDefaultAddress": this.value == true ? 1 : 0,
            "phone": this.tel,
            "province": this.province,
            "realName": this.name,
            "othersideCardidImage": this.front,
            "positiveCardidImage": this.contrary,
            "version": this.addressDetail.version
          }
        }
        newAddress(data).then((res) => {
          console.log(res)
          if (res.status == "200") {
            that.$router.go(-1)
            if (that.addressDetail == null) {
              message("添加成功", "success", that)
            } else {
              message("修改成功", "success", that)
            }
          }
        })
      },
      sureAddress() {
        console.log(this.province + this.city + this.district)
        this.choose = this.provincename + this.cityname + this.districtname
        this.showCity()
      },
      showCity() {
        this.show = !this.show;
      },
      onValuesChange(picker, values) {
        console.log(values[0])
        var tempCity = [], tempCounty = [];
        for (var i = 0; i < myaddress[1].length; i++) {
          if (values[0].region_code == myaddress[1][i].parent_code) {
            tempCity.push(myaddress[1][i])
          }
        }
        if (values[1] != null) {
          for (var i = 0; i < myaddress[2].length; i++) {
            if (values[1].region_code == myaddress[2][i].parent_code) {
              tempCounty.push(myaddress[2][i])
            }
          }
        }
        picker.setSlotValues(1, tempCity)
        picker.setSlotValues(2, tempCounty)
        this.province = values[0].region_code;
        this.city = values[1].region_code;
        this.district = values[2].region_code;
        this.provincename = values[0].region_name;
        this.cityname = values[1].region_name;
        this.districtname = values[2].region_name;
      }
    },
  }
</script>
<style>
  /* 可以设置不同的进入和离开动画 */
  /* 设置持续时间和动画函数 */
  .slide-fade-enter-active {
    transition: all .5s ease;
  }

  .slide-fade-leave-active {
    transition: all .4s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }

  .slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */
  {
    transform: translateY(10px);
    opacity: 0;
  }

  input {
    border: 0px;
    outline: none;
    text-align: right;
  }

  .padding5550 {
    padding: 5px 5px 5px 0px;

  }

  .xdp-fix {
    display: flex;
    position: fixed;
    bottom: 0;
    width: 100%;
    font-size: 17px;
    box-shadow: #ccc 10px 10px 10px 10px;
    height: 50px;
  }
</style>