# 数据事件

小程序的数据与事件和Web H5 开发中不一样，小程序没有 DOM 和 BOM ，因此我们不能通过 getElementByID 获取元素或者 addEventListener 来监听事件。小程序有自己的数据处理逻辑，相对于之前的 jQuery 操作DOM，小程序更趋向于类似 Vue 和 React 的数据驱动试图。

# 数据绑定

WXML 中的动态数据均来自对应 Page 的 data。

<view> {{ message }} </view>

Page({
  data: {
    message: 'Hello MINA!'
  }
})

# 列表渲染

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

# 条件渲染

在框架中，使用 wx:if="" 来判断是否需要渲染该代码块：

<view wx:if="{{condition}}"> True </view>

# 事件绑定

如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

Page({
    data: {},
    tapName: function(event){
        console.log(event)
    }
})

# 参考

• 更多数据绑请参考文档