美文网首页
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问题

相关文章

  • 1.uni-app的相关介绍使用

    uni-app的基本使用 基础部分: +环境搭建 +页面外观配置 +数据绑定 +uni-app的生命周期 +组件的...

  • uni-app第一节-基础

    对象数组赋值 如果开始已经赋值,例如在data里面初始化,数组为2个对象。对数组进行修改时,如果采用游标的方式,只...

  • uniapp 基础

    uni-app的基本使用 课程介绍: 基础部分: 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件...

  • uni入门文档

    uni-app的基本使用 课程介绍: 基础部分: 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件...

  • UNIAPP入门教程

    uni-app的基本使用 课程介绍: 基础部分: 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件...

  • uni-app基础知识

    uni-app的基本使用 课程介绍: 基础部分: 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件...

  • uniapp基础知识

    uni-app的基本使用 课程介绍: 基础部分: 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件...

  • uni-app入门到实战总结(上)

    第2章 uni-app 基础 2-1 回顾小程序 2-3 uni-app 核心知识点概览 条件编译写法说明#ifd...

  • uni-app 使用微信小程序消息推送

    uni-app 开发小程序时会用到推送 前端基于基础用法做一个封装

  • uni-app基础

    前言:掌握HTML+CSS+JavaScript,了解 Vue.js+原生微信程序更容易上手 一、前言 uni-a...

网友评论

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

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