Vue的知识记录

╰+攻爆jí腚メ 2022-05-27 10:55 248阅读 0赞

年前的时候做了一个电商的小程序，年后过来又开始写公司官网的静态界面，以及根据新需求修改电商后台的接口。  
但是公司要把小程序转为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>

![70][]

更多文章请关注公众号：每天学Java。想获得更多最新面试提醒请进入小程序：每天学Java

公众号二维码：                                                                                          小程序二维码：

![70 1][]                       ![70 2][]

[70]: /images/20220527/225cddc89d924af5a1e648c1c84088d2.png
[70 1]: https://img-blog.csdn.net/20180821214620778?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNDQyMjcwNjM2/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: /images/20220527/c5498b1dff3644d3adc068b1f053f1a1.png