小程序学习（二）

目录

1、WXML模板语法-数据绑定

1.1、数据绑定的基本原则

1.2、在data中定义页面的数据

1.3、Mustache语法的格式

1.4、Mustache语法的应用场景

1.5、动态绑定内容

 1.6、动态绑定属性

 1.7、三元运算

1.8、算数运算

2、WXML模板语法-事件绑定

2.1、事件概念

 2.2、小程序中常用的事件

2.3、事件对象的属性列表

2.4、target和currentTarget的区别

2.5、bindtap的语法格式

 2.6、在事件处理函数中为data中的数据赋值

 2.7、事件传参

 2.8、bindinput语法格式

 2.9、实现文本框和data之间的数据同步

 3、条件渲染

3.1、wx:if 

3.2、结合使用wx:if，一次性控制多个组件的展示与隐藏

 3.3、hidden=“{{condition}”控制元素的显示与隐藏

 3.4、wx:if与hidden的对比

---

1、WXML模板语法-数据绑定

1.1、数据绑定的基本原则

1. 在data中定义数据
2. 在WXML中使用数据

1.2、在data中定义页面的数据

在页面对于的.js文件中，把数据定义大data对象中即可：

1.3、Mustache语法的格式

把data中的数据绑定到页面中渲染，使用Mustache语法（双大括号）将变量包起来即可。语法格式为：

1.4、Mustache语法的应用场景

应用场景如下：

1. 绑定内容
2. 绑定属性
3. 运算（三元运算、算术运算等）

1.5、动态绑定内容

页面内容：

 显示效果：

 1.6、动态绑定属性

页面数据和页面结构：

 

页面效果：

 1.7、三元运算

页面数据和页面结构：

页面效果：

1.8、算数运算

页面内容：

页面效果：

2、WXML模板语法-事件绑定

2.1、事件概念

事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理

 

 2.2、小程序中常用的事件

2.3、事件对象的属性列表

当事件回调触发的时候，会收到一个事件对象event，它的详细属性如下：

2.4、target和currentTarget的区别

taget是触发该事件的源头组件；

currentTarget是当前事件所绑定的组件；

        点击内部按钮（button）时，点击事件以冒泡的方式向外扩散，也会触发外层view的tap事件处理函数

此时，对于外层的view来说：

• e.target指向的是触发事件的源头组件，因此，e.target是内部的按钮组件
• e.currentTarget指向的是当前正在触发事件的那个组件，因此，e.currentTarget是当前的view组件

2.5、bindtap的语法格式

在小程序中，不存在HTML重点onclick鼠标点击事件，而是通过tap事件来有限用户的触摸行为

①通过bindtap，可以为组件绑定tap触摸事件，语法如下：

<button type="primary" bindtap="btnTapHander">按钮</button>

②在页面的.js文件中定义对应的事件处理函数，事件参数通过形参event(简写成e) 来接收：

 2.6、在事件处理函数中为data中的数据赋值

通过调用this.setData(dataObject)方法，可以给页面data中的数据重新赋值.

<button type="primary" bindtap="countChange">+1</button>

 2.7、事件传参

 2.8、bindinput语法格式

 2.9、实现文本框和data之间的数据同步

 

 

 

 3、条件渲染

3.1、wx:if 

3.2、结合<block>使用wx:if，一次性控制多个组件的展示与隐藏

 3.3、hidden=“{{condition}”控制元素的显示与隐藏

 3.4、wx:if与hidden的对比