小程序教学六（数据渲染和事件）

数据绑定

就是把js里面的数据显示到.wxml上面
首先要保证.js文件的data里面有对应的键

Page({
    data:{
       key：‘要显示的值’ 
    }
})

在.wxm里面显示的方法

 {{ key }}  

小程序中的{{ }}里面可以存放三目运算符或者基本运算符

条件渲染

wx:if = {{这里可以写表达式，但是最终结果要是bool值}}
{{}}里面结果是true就显示，如果是false就不显示

block wx:if

block wx:if与wx:if使用基本一致只是增加了一个block标签来包裹

注意：wx:if如果为false那么里面的空间就不会渲染，只有当true的时候才会渲染

列表渲染

列表渲染就是通过微信的wx: for来一次渲染多条数据
每一个创建出来的单元里面都存在item这个key 和 index这个下标

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

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

渲染后的结果
0: foo
1: bar

列表渲染可以自己来添加字段
使用 wx:for-item 可以指定数组当前元素的变量名，
使用 wx:for-index 可以指定数组当前下标的变量名,
如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

  {{idx}}: {{itemName.message}}

block wx:for

block wx:for与wx:for使用基本一致只是增加了一个block标签来包裹

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

事件

什么是事件

事件是视图层到逻辑层的通讯方式。
事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
事件对象可以携带额外信息，如 id, dataset, touches。

事件的执行写在.js里面

Page({
    evetHandleName: function(参数1，参数2，...){
       事件执行的代码   
   }
})

事件的绑定写在.xmml里面 如点击事件bindtap

View点击触发evetHandleName事件

事件的冒泡与捕获

事件的绑定与冒泡

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。
点击 inner view 会先后调用handleTap3和handleTap2(因为tap事件会冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父节点传递)，点击 middle view 会触发handleTap2，点击 outer view 会触发handleTap1。

  outer view
  
    middle view
    
      inner view
    
  

事件的捕获

在下面的代码中，点击 inner view 会先后调用handleTap2、handleTap4、handleTap3、handleTap1。

  outer view
  
    inner view
  

如果将上面代码中的第一个capture-bind改为capture-catch，将只触发handleTap2。

  outer view
  
    inner view
  

持续更新中...