05.变量和函数的定义与访问

小程序中定义变量和函数和vue很类似，但有一点区别

定义变量

Page({

  data: {
    number : 0 
  }

});

在data中，定义了一个属性number，值为0

在wxml中使用这个number

<view>
  {{number}}
</view>

现在增加一个功能，当点击view层时，number的值不断的累加。

<view bindtap='myClick'>
  {{number}}
</view>

给view增加一个点击事件，事件名是myClick。然后我们在js部分增加一个myClick的函数 ：

Page({

  data: {
    number : 0
  },

  myClick(){
    this.data.number++;
    console.log(this.data.number);
  }

});

这里和vue也很类似，不同的是不能直接this.number，需要this.data.number

运行后发现，控制台打印的number一直在累加，但是视图层并没有变化。这是因为小程序中，还需要调用一个setDate方法，把更改的值发送到视图层 ：

Page({

  data: {
    number : 0
  },

  myClick(){
    this.data.number++;
    console.log(this.data.number);

    //将计数后的值传递到视图层
    this.setData({
      "number": this.data.number
    });
  }

});

setDate方法接受的是一个json，里面是键值对。