小程序学习笔记-5：数据绑定（假数据）

上一篇：小程序学习笔记-4：页面之间跳转

---

本篇内容
* 使用假数据的方式完成数据绑定

小程序中的数据绑定

WXML 中的动态数据均来自对应 Page 的 data。使用 Mustache 语法（双大括号）将变量包起来，{{}}中可以放置变量、运算、组合（生成新的对象或数组）。

 {{ message }} 



 {{item}} 

Page({
  data: {
    message: 'Hello MINA!',
    flag: true,
    zero: 0
  }
}

具体见 小程序官方文档-框架-WXML语法参考-数据绑定。

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

  {{index}}: {{item.message}}

wx:for-item 可以指定数组当前元素的变量名
wx:for-index 可以指定数组当前下标的变量名
wx:key 可以指定列表中项目的唯一的标识符

具体见 小程序官方文档-框架-WXML语法参考-列表渲染。

响应的数据绑定

数据绑定后，在逻辑层修改数据，视图层会响应更新。在逻辑层修改数据需要使用setData。
setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。
只需要设置变化的值即可，无需重复设置其他值，小程序会自动合并更新。

this.setData({
    message: 'Bye, MINA!'
})

注意：
直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
仅支持设置可 JSON 化的数据。
单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。
请不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗留一些潜在问题。

总结:

本篇学习记录了微信小程序中的数据绑定。

参考:

小程序官方文档-框架-WXML语法参考
小程序官方文档-框架-框架-框架接口-页面-Page-setData

---

下一篇：小程序学习笔记-6：数据加载（接口）