小程序开发之【前端开发】【学习第二节】【四】

承接上面的来说，WXML具有数据绑定，列表渲染，条件渲染，模板和事件等能力。
1.数据绑定
小程序页面渲染时，框架会将WXML文件同对应Page的data进行绑定。绑定使用Mustache语法（就是两个大括号）
（1）简单绑定

<!--内容--> <view>{{content}}</view> <!--组件属性--> <view id="item-{{id}}" style="border:{{border}}">作为属性渲染</view> <!--控制属性--> <view wx:if="{{showContent}}">作为属性渲染</view> <!-- 关键字--> <view>{{2}}</view> <checkbox checked="{{false}}"></checkbox>border:'solid 1px #000', id:1, content:'内容', showContent:false,


（2）运算
在{{}}可以做一些简单的运算，三元运算、算术运算、逻辑判断、字符串运算，这些运算符合JavaScript运算规则。
举个例子

<view>{{showContent?'显示文本':'不显示文本'}}</view> <view>{{n1+n2}}+1+{{n3}}=?</view> <!--字符串运算--> <view>{{"name: "+name}}</view> <view>{{n3>0}}</view> <view>{{myobject.age}}{{myarray[1]}}</view>
showContent:true, n1:1, n2:2, n3:3, name:'weixin', object:{ myobject:{ age:21 } }, myarray:['arr1','arr2'],


（3）组合
data中的数据可以在模板中再次组合成新的数据结构，这种组合常常在数组或对象中使用。数组组合很简单。直接将值放在数组某个下标下：（这里由于比较简单，就手打了）
<view>{{[myvalue,2,3,'stringtype']}}</view>
Page({
data:{
myvalue:0
}
})
最终组合成的对象[0,2,3,'stringtype']
对象组合有3种组合方式
<template is="testTemp" data="{{name:myvalue1,age:myvalue2}}"></template>
myvalue1:'xyb',myvalue2:'21',
最终组合出的对象为{name:'value1',age:'value2'}
第二种通过"..."将一个对象展开，把key-value值拷贝到新的结构中
<template is="tesetTemp" data="{{...myobj1,k5:5,...myobj2,k6:6}}">
data:{
myobj1:{
k1:1,
k2:2
}
myobj2:{
k3:3,
k4:4
}
}
最终组合成：{k1:1,k2:2,k5:5,k3:3,k4:4,k6:6}
第三种
<template is="testTemp" data="{{k1,k2}}"></template>
data:{
k1:1,
k2:2
}
结果：{k1:1,k2:2}
如果一个组合中有相同的属性名，后面的属性将会覆盖前面的属性，例如
<template is="testTemp" data="{{...myobj,k1:3}}"></template>
data:{
k1:1,
k2:2
}
结果{k1:3,k2:2}
（2）条件渲染
之前的示例中，写到过wx:if，这就是一个条件渲染。
这个很简单。true则渲染，false则不渲染
也支持wx:elif和wx:else，这个不多说了，举个例子就能明白了

<view wx:if="{{false}}">1</view> <view wx:elif="{{false}}">2</view> <view wx:else>3</view>


ex:elif和wx.else必须配合wx.if使用！！！
wx:if是一个控制属性，可以添置在任何组件标签上，但如果我们需要包装多个组件，又不想影响全局，这时候就需要使用<block/>标签，将需要包装的组件放置在里面，通过wx:if作判断。<block/>不是一个组件，仅仅是一个包装元素，渲染过程不做任何渲染
<block wx:if="{{true}}">
<view>显示内容</view>
<image/>
</block>
除了wx:if，也可以通过hidden属性控制组件是否显示，区别在于：
wx:if控制渲染条件块内的模板，当其条件值切换时，会触发局部渲染以确保条件快在切换时销毁或重新渲染。wx:if是惰性的。
hidden控制组件是否显示，也就是说，组件始终会被渲染，只是简单控制显示与隐藏。
所以，简单来说，两者的差别在于不同环境下的效率问题。当频繁切换条件值时，wx:if比hidden时效要差一些。
（3）列表渲染
wx:for，用于遍历数组，重复渲染该组件
<view wx:for="{{myarray}}">
{{index}}:{{item}}
</view>
Page({
data:{
myarray:['value1','value2']
}
})



wx:for-index和wx:for-item
index，item变量名可以通过wx:for-index，wx:for-item属性修改
<view wx:for="{{myarray}}" wx:for-index="myindex" wx:for-item="myitem">
{{myindex}}:{{myitem}}
</view>
普通遍历，我们没必要修改index和item变量名，但是当wx:for循环嵌套使用时，为了避免冲突，就需要使用了。
（4）模块
在项目过程中，常常会有某些相同的结构在不同的地方反复出现。这时就可以将相同的布局代码片段放置到一个模块中，在不同的地方传入对应数据进行渲染，这样能避免重复开发，提高效率。
定义模板
在<template/>内定义代码片段，设置其name属性即可。
<template name="mytemplate">
<view>内容</view>
<view>{{content}}</view>
</template>
接下来得使用模板，设置is属性指向需要使用的模板，设置data属性，将模板所需的变量传入。模板拥有自己的
作用域，只能使用data属性传入的数据。而不是直接使用Page中的data.渲染时，<template/>标签将被模板
中的代码块完全替代。
举个例子：

<template name="mytemplate"> <view>内容</view> <view>{{content}}</view> <view>{{name}}</view> </template> <template is="mytemplate" data="{{content:'我爱',name:'地球'}}"> </template>这样就很容易懂了。而且模板也可以嵌套使用。而且，模板is属性支持数据绑定，意思就是说我们可以通过
属性绑定动态决定使用哪个模板。
例如
<template name="mytemplate"> <view>内容</view> <view>{{content}}</view> <view>{{name}}</view> </template> <template name="mytemplate2"> <view>内容</view> <view>{{content2}}</view> <view>{{name2}}</view> </template> <template is="mytemplate2" data="{{content2:'我爱',name2:'地球'}}"> </template>结果是一样的。
（5）事件

和DOM类似，在组件上设置“bind（或catch）+事件名”属性进行事件绑定，当触发事件时，框架会调用逻辑
层中对应的事件处理
函数
事件分为冒泡事件和非冒泡事件，冒泡事件是指当一个组件上的事件被触发后，该事件会向父节点传递，非冒
泡则不会。当一个事
件被触发后，该事件会沿该组件向其父级对象传播，从里到外依次执行，直到节点最顶层，这个通常用于实现
事件代理。
WXML冒泡事件有：touchstart手指触摸开始
touchmove手指触摸后移动
touchcancel手指触摸动作没打断，如来电提醒、弹窗
touchend手指触摸动作结束
tap手指触摸后马上离开
longtap手指离开后超过350ms再离开
对于冒泡事件，每个组件都是默认支持的，除上述事件之外的其他组件自定义事件如无特殊声明都是非冒泡事
件，如<form/>的
submit事件，<scroll-view/>的srcoll事件。
事件绑定就不说了，绑定时bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定则会阻止。