第一模块，在模拟器上显示出来hello world，但是程序开发中，很多的数据都是从服务器去获取或者显示的数据会根据用户的操作来变化的，所以我们需要用到数据绑定。
数据绑定：
1.首先我们找到pages\home\home.js文件，在此文件中添加一部分数据，用于动态绑定到view上。
Page({
data :{
//单数据绑定
color:"红色",
//多数据绑定
stars:[
{name:'kobe',age:40},
{name:'mcgrady',age:35},
{name:'tompson',age:27}
]
}
})
我们需要在跟节点上写上Page标签，然后在下面的data标签中，我们可以自定义我们需要展示的数据。Page标签和data标签是小程序规定好的标签，每个页面对应的js文件是用来做逻辑处理的。
color和stars都是自己定义的，color为单数据，stars为多数据
2.页面上我们增加view来显示data中的数据，如果是需要引用js中data下的数据，则需要用{{ }}双大括号来引用。多数据绑定时，需要循环数据，我们用到wx:for方法，告诉他循环data中的哪个数据，同样也需要用双大括号表示引用，item代表每一行数据的对象，例如{name:'kobe',age:40}，item下面的属性代表对象中的属性：
监听按钮事件变化，通过按钮改变data中的值
1.pages\home\home.wxml我们增加一个view来显示当前数字，增加两个按钮+和-，点击+号显示的数字增加，点击-显示的数字减少
2.在ages/home/home.js中，添加一个counter来计数，按钮添加两个方法counterAdd（）和counterMinus（）。
// pages/home/home.js
Page({
data :{
//单数据绑定
color:"红色",
//多数据绑定
stars:[
{name:'kobe',age:40},
{name:'mcgrady',age:35},
{name:'tompson',age:27}
],
//按钮事件
counter:0
},
counterAdd() {
this.setData({
counter:this.data.counter+1
})
},
counterMinus() {
this.setData({
counter:this.data.counter-1
})
}
})
3.当需要改变counter的值，需要调用setData方法来改变data标签中counter的值并切界面同步显示，如果不调用setData方法，counter的值可以变化，但是界面上的数值不会变化
评论