美文网首页
uni-app第一节-基础

uni-app第一节-基础

作者: 企业信息化架构 | 来源:发表于2020-01-08 12:49 被阅读0次

    对象数组赋值

    如果开始已经赋值,例如在data里面初始化,数组为2个对象。对数组进行修改时,如果采用游标的方式,只能修改两个值,不会增加值。
    如果需要重置数组,则需要先清空数据,然后采用push方式增加对象。

    //初始化
    data() {
                return {
                    addressList: [
                        {
                            id:1,
                            contactMan:"lgl",
                            contactPhone:"18826482013",
                            isDefault:1,
                            province:"广东省",
                            city:"广州市",
                            area:"天河",
                            contactAddress:"测试"
                        },
                        {
                            id:2,
                            contactMan:"lgl",
                            contactPhone:"18826482013",
                            isDefault:1,
                            province:"广东省",
                            city:"广州市",
                            area:"天河",
                            contactAddress:"测试"
                        }
                    ]
                }
            }
    
    //赋值
                        this.addressList=[];
                        let addressListRes = res.data;
                        for (var i = 0; i < addressListRes.length; i++) {
                            let address = {};
                            address.id =  addressListRes[i].id;
                            address.contactMan = addressListRes[i].contactMan;
                            address.contactPhone = addressListRes[i].contactPhone;
                            address.isDefault = addressListRes[i].isDefault;
                            address.province = addressListRes[i].province.name;
                            address.city = addressListRes[i].city.name;
                            address.area = addressListRes[i].area.name;
                            address.contactAddress = addressListRes[i].contactAddress;
                            this.addressList.push(address);
                        }
    

    let与var

    let是ES6中新增命令,用来声明局部的变量。用法类似var,但是所声明的变量,只会在let命令所在的代码块内有效,而且有暂时性死区的约束。

    function(e)

    e是参数的名字。参数分为:
    1.形参:形式参数,相当于函数声明的局部变量,实参把自己的值赋给形参,形参就保存了这个值
    2.形参只能在函数内部使用。
    3.实参:实际参数,函数的调用者把值放在实参里面,传给函数的形参。
    所以,实参、形参就相当于一个管道,一个接口,使调用函数的人可以通过这种方式把要计算的值传给函数去计算。

    e.currentTarget.dataset.* 可以获取data-*的数据

    <view class="tui-address-imgbox" :data-key="item.id"  @tap="toEditAddress">
        <image class="tui-address-img" src="/static/images/mall/my/icon_addr_edit.png" />
    </view>
    
    toEditAddress(e){
        let key = e.currentTarget.dataset.key || "";
        uni.navigateTo({
            url: '../address/editAddress?addressId='+key
        })
    }
    
    

    vue 的 this

    在vue中当在vue中使用匿名函数的时候,会出现this指针改变的问题,出现方法或者属性数据undefine的问题,以下是相关的解决方法
    一、在回调函数之前重新将this赋值
    例如

     connection() {
          // 更换that指针
          var that = this
          const socket = new SockJS('http://localhost:8080/test-info')
          this.stompClient = Stomp.over(socket)
          console.log('----------------')
          console.log(this.stompClient)
          console.log('----------------')
          const tt = this.stompClient
          // 此处不能使用 this.stompClient
          tt.connect({}, function(frame) {
            console.log('++++++++++++++++')
            console.log('Connected: ' + frame)
            console.log('++++++++++++++++')
    
            tt.subscribe('/stock/price', function(val) {
              console.log(val)
              console.log(JSON.parse(val.body))
              that.list1 = JSON.parse(val.body)
            })
          })
        }
    

    二、使用箭头函数

      connection() {
          // 更换that指针
          const socket = new SockJS('http://localhost:8080/test-info')
          this.stompClient = Stomp.over(socket)
          console.log('----------------')
          console.log(this.stompClient)
          console.log('----------------')
           this.stompClient.connect({}, (frame) => {
            console.log(frame)
            this.stompClient.subscribe('/stock/price', (val) => {
              console.log('--------list1-----------')
              console.log(this.list1)
              console.log('--------list1-----------')
              this.list1 = JSON.parse(val.body)
            })
          })
        }
    

    在回调函数中有时候回调函数会修改this的指向,this本来应该指的是vue这个对象,但是他的this指向的是回调,由于在回调函数改变了this指针,导致后序出现this指向的数据出现未定义的状况。
    但是在箭头函数中this指向的永远都是vue对象,所以建议多是想用箭头函数

    参考

    Uni-app 学习笔记
    vue 中的this问题

    相关文章

      网友评论

          本文标题:uni-app第一节-基础

          本文链接:https://www.haomeiwen.com/subject/ozvwoctx.html