一、data

和vue中的data不同的是，直接修改data的数据 不会实时更新
比如：

data: {
    count: 0,
    items: []
},
onLoad: function (){
    vat that = this
    that.data.count = 2 // 毫无卵用
    console.log(that.data.count) // 2 说明改是改对了，但是页面没有更新
}

解决办法： setData

onLoad: function(){
    var that = this
    that.setData({
          count: 2 ,  // 左边参数是data中得参数，右边赋值。复杂的赋值比如操作数组之类的，最好定义变量接收后使用
          key: value,
          ...
     })
}

setData对数组元素操作：

let items = that.data.items // 声明一个变量保存data-items的值
items.push/pop/..(数组操作方法)(value) // 对改变量进行数组操作
that.setData({
    items: items // 将该变量赋值给data中的items
})

二、input双向绑定

小程序里面没有v-model 需要添加绑定事件 bindinput="functionName"
示例：

<input bindinput="bindKeyInput"></input>
<view>{{inputValue}}</view>
data: {
    inputValue: ‘‘
},
bindKeyInput: function(e){
    var that = this
    that.setData({
          inputValue: e.detail.value     // 这里是input输入的值。这样赋值就可以做到inputValue与input框中输入的值实时绑定
     })
}

三、循环:wx.for

语法：wx:for="{{value}}" wx:key="{{index}}"
示例：

<view wx:for="items" wx:key="{{index}}">{{item}} {{index}}</view> // 这里的items是data中声明的数组，index：下标，item：循环后的值。对像操作也一样，item加上对应的key值
data: {
    items: [‘one‘, ‘two‘, ‘three‘]
}

四、条件：wx:if

语法：wx:if="{{条件语句}}"
条件语句都是写在{{}}里面的 else 写法直接： wx:else

五、本地存储： wx.getStorage/wx.setStorage

使用方式:

wx.setStorage({
    key: ‘value‘,
    data: ‘value‘
})
类似于 setStorage(‘key‘, ‘value‘)

wx.getStorage({
    key: ‘value‘, // 与setStorage中的key值对应
    success: (res) => {
          console.log(res.data) // 这里面获取到的便是setStorage中的key值对应的data
     }
})
类似于：getStorage(‘key‘)

六、点击事件绑定: bindtap

使用方法：

<button bindtap="functionName"></button>
functionName: fucntion(){
    console.log(2) // 点击按钮触发functionName方法，在js中写对应的方法
}

初学小程序学习笔记