前期学习小程序需要注意的几个点

目录

1、js中获取data中的属性值

在小程序中，在写逻辑时获取data中的数据根我们Vue中类似，不同的是Vue中是this.属性名，而我们小程序需要使用this.data.属性名来获取。若：

Page({
  data: { list: '数据' },
  add() {
    console.log(this.data.list);
  }
})

2、js修改data中的属性值

在小程序中，写逻辑时我们经常需要修改data中属性的值，但我们用修改完后发现数据改变了，但页面没有改变，所以我们在改变data中属性的值时需要使用this.setData()方法。

Page({
  data: { list: '数据',arr:[] },
  btn(){
    this.setData({
      list:'修改后的数据'
    })
    // 这是我们改变简单数据类型的方法。如果想要改变复杂数据类型
    // 如数组 添加的话可以使用
    let arr = this.data.arr;  // 首先获取一下数据
    arr.push("你要添加的数据");
    this.setData({
      arr:arr // 重新赋值就可以了
    })
    // 添加的时候我们还有一种更简单的方法，我们可以使用ES6的展开运算符
    this.setData({
      arr:[...this.data.arr,"要添加的数据"] // 先展开这个数组，然后在结尾添加一条数据
    })
  }
})

3、传参的问题

在页面渲染出数据后，有些数据我们会给他一个事件，但是我们事件无法传参。所以这时我们可以使用自定义属性，data-index=“这里绑定我们要获取的数据”;自定义属性可以定义多个

wxml代码

<block wx:for="{{list}}" wx:key="*this">
  <view data-index="{{index}}" bindtap="del">
  </view>
</block>

js代码

del(e) {
   console.log(e.currentTarget.dataset); //dataset 是一个对象，其中包含了当前节点所有绑定的自定义属性的值
    });

4、input的双向数据绑定

在Vue中我们可以使用v-model来进行双向数据绑定，在小程序中也有一个类似功能的，wx:model。对于低版本的开发者工具可能不支持，那么我们也可以这样写。
具体实现大概就是：给输入框一个input事件，每当他的value发生改变时，就会触发这个input事件，我们在js中使用input的事件对象获取到当前输入框的value值，在赋值给一个变量。然后我们把这个变量绑定给输入框的value
wxml

<input type="text" bindinput="change" value="{{value}}" /> // bindinput 相当于我们的input事件

js

Page({
  data: { value:'' }, 
  change(e) {
    console.log(e); 
    this.setData({
      value: e.detail.value // 这里可以获取到输入框的value值
    })
  },
})

持续更新中…