微信小程序开发之三

界面层的列表渲染：

在js页面添加要渲染的数据

wx.for={{}} 基本循环

wx.for-item={{}} 给遍历的对象定义名字

wx.for-iindex={{}} 给遍历的下标（索引）定义名字

  在wxml渲染数据：

输出： 

使用wx:for进行数据渲染

界面层的事件处理：

在wxml绑定              

bindtap:事件名 （通过给组件添加一个bind+事件名的属性，属性的值指向一个定义在当前页面对象中的j方法）

在js页面定义一个事件：

界面层的事件冒泡：

在一个view绑定一个点击事件，当前view下还有一个子view和一个父view，

当点击祖view上绑定的事件时 因为3个view存在父子辈的关系 会触发子辈已经父辈的view 这就是事件冒泡

如下：

1. <view>  
3. view11  

   <view    bindtap = 'view1click' >   

  view22  

     <view   >   

      view33  

     </view>   

   </view>   

</view>   

在js定义事件：

1. view1click: function(event) {  

    console.log("view1click");  

    console.log(event);  

  } 

绑定事件可以通过bind之外还可以使用catch来绑定，他们的区别是catch不会触发冒泡事件；

把bindtap改为catchtap绑定事件即可阻止事件冒泡

界面层的事件传参：

1. <view  bindtap='buttonclick' data-name='{{张三}}'> 点击我</view>

js页面定义事件

1. buttonclick：function（e）{
2.        console.log(e.target.dateset);//当前点击的元素对象 （Object）
3. //e.target拿到当前点击的元素 dataset指的是元素上上所有以data开头的属性的集合       
4.        console.log(this);//this指向页面对象  与html不一样
5. }

单项数据流 在wxml页面先定义好模板，在js页面在单项绑定好要展示的数据到模板

1. <view class='container'>
2.          <input value='{{mag}}' bindtap='inptand'/>
3.        <text>{{mag}}</text>
4. </view>

js页面定义事件：

1. var app = getApp()  

Page({  

  data:{  

     mag :" 数据流 "

  }, 

把改变的数据同步到后台中：

1. inptand：function(){
2.          console.log(e.datail.value);//获取改变的值
3.   this.setData(){ //把改变后的数据展示到页面以及同步到后台 this.setData是用来改变data中的数据的 她是通知界面做出变化
4.   mag：e.datail.value
5.        }

}

输出：

当改变input数据后text中输出的后台数据给跟着改变