前端（小程序）学习笔记（CLASS 2）：WXML模板语法与WXSS模板样式
1、数据绑定
数据绑定的基本原则
1、在data中定义数据
在页面对应的.js文件中，把数据定义到data对象中即可：
Page({
data: {
//字符串类型的数据
info: 'init data',
//数组类型的数据
msgList: [{msg: 'hello'}, {msg: 'world'}]
}
})
2、在WXML中使用数据(Mustache语法）
把data中的数据绑定到页面中渲染，使用Mustache语法（双大括号）将变量包起来即可。语法格式为：
{{ 要绑定的数据名称 }}
3、Mustache语法的应用场景
Mustache语法的主要应用场景如下：
1、动态绑定内容
如上一条内容所示，
2、动态绑定属性
和动态绑定数据的方式一样，通过使用两个大括号就行，此处与vue有所不同
3、运算（三元运算、算术运算等）
三运运算：
页面的数据如下图：
Page({
data: {
randomNum: Math.random()*10
}
})
页面的结构如下：
{{ randomNum >=5 ? '随机数字大于5' : '随机数字小于5' }}
算术运算：
页面数据如上
页面结构如下图：
{{ randomNum*100 }}
2、事件绑定
概念：事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理
常用的事件：
| 类型 | 绑定方式 | 事件描述 |
| tap | bindtap或bind:tap | 手指触摸后马上离开，类似于HTML中的click事件 |
| input | bindinput或bind:input | 文本框的输入事件 |
| change | bindchange或bind:change | 状态改变时触发 |
事件对象的属性列表：
当事件回调触发时，会收到一个事件对象event，它的详细属性如下表所示：
| 属性 | 类型 | 说明 |
| type | String | 事件类型 |
| timeStamp | Integer | 页面打开到触发事件所经过的毫秒数 |
| target | Object | 触发事件的组件的一些属性值集合 |
| currentTarget | Object | 当前组件的一些属性值集合 |
| detail | Object | 额外的信息 |
| touches | Array | 触摸事件，当前停留在屏幕中的触摸点信息的数组 |
| changedTouches | Array | 触摸事件，当前变化的触摸点信息数组 |
* target和currentTarget的区别
target是触发该事件的源头组件，而currentTarget则是当前事件所绑定的组件
点击内部的按钮时，点击事件以冒泡的方式向外扩散，也会触发外层view的tap事件处理函数
此时，对于外层的view来说：
1、e.target指向的是触发事件的源头组件。因此，e.target是内部的按钮组件
2、e.currentTarget指向的是当前正在触发事件的那个组件，因此，e.currentTarget是当前的view组件
* bindtap的语法格式
在小程序中，不存在HTML中的onclick鼠标点击事件，而是通过tap事件来响应用户的触摸行为
1、通过bindtap，可以为组件绑定tap触摸事件，语法如下：
按钮
2、在页面的.js文件中定义对应的事件处理函数，事件参数通过形参event（一般简写成e）来接收：
Page({
btnTapHandler(e) {
console.log(e)
}
})
* 在事件处理函数中为data中的数据赋值
通过调用this.setData(dataObject)方法，可以给页面data中的数据重新赋值，示例如下：
Page({
data: {
count: 0
},
changeCount() {
this.setData({
count: this.data.count + 1
})
}
})
* 事件传参
小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。
因为小程序会把事件的属性值，统一当作事件名称来处理
可以为组件提供data-*自定义属性传参，其中*代表的是参数的名字，示例代码如下：
