73 })
三.界面层–数据绑定
在程序的开发过程中,界面层提供一种模板机制,可以借助一种特殊的语法来完成数据的绑定,将动态的数据绑定到模板当中,最近将嵌入过后的数据显示到界面中,小程序中使用的是Mustache 语法(双大括号)语法:
1
2
3
7
8
9
10
1 // pages/demo/demo.js
2
3 Page({
4 //为页面提供数据,界面和逻辑之间的桥梁
5 data:{
6 message:“hello world”,
7 person:{
8 name: “张三”,
9 age:25
10 }
11 }
12 })
–数据绑定语法补充,除了在页面标签的内部我们会使用Mustache语法进行输出,在标签的内部,我们也可以使用Mustache语法:
1
2
3
7
8
9
10
14
15
16
17
18
19
20
21
24 复选框1
25 复选框2
26
四.列表渲染
在逻辑层中,很多的情况下都会是一个数组类型的数据(列表数据),那么此时在我们的界面层中就需要使用到列表渲染:
1
4 复选框1
5 复选框2
6
7
8
20
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
五.事件处理
1
3 点击
1 buttonTapHandle: function(e){
2 console.log(“点击按钮打印此条.”);
3 // console.dir()将一个对象以树状的形式打印到控制台,便于我们调试复杂对象
4 console.dir(e);
5 }
六.事件冒泡
1
4
5
6
1 innerHandler: function(){
2 console.log(“触发内部事件”);
3 },
4 outerHandler: fun