小程序学习day05-事件绑定、事件传参（小程序中不能在绑定事件的）、实现文本框和data数据的动态绑定、条件渲染、wx：for

21、事件绑定

（1）事件

1）概念：渲染层到逻辑层的通信方式

2）作用：通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行处理

（2）常见事件

1）tap（手指触摸后马上离开，类似于HTML的click事件）：通过bindtap或bind:tap绑定

①语法：

通过bind:tap绑定点击事件

在js中，书写绑定方法的代码

2）input（文本框输入事件）：通过bindinput或bind:input绑定

①语法：

通过bindInput，绑定事件

在js中书写处理函数

3）change（状态改变时触发）：通过bindchange或bind:change绑定

（3）事件对象的属性（当事件回调触发时，会收到一个事件对象event）（在页面的.js文件中，时间参数的形参event可以简写为e）

        1）type（String）：事件类型

        2）timeStamp（integer）：页面打开到触发事件所经过的秒数

        3）target（Object）：触发事件的组件的一些属性值的集合

        4）currentTarget（Object）：当前组件的一些属性值的集合

        5）detail（Object）：额外的信息

        6）touches（Array）：触摸事件，当前停留在屏幕中的触摸点的信息的数组

        7）changedTouches（Array）：：触摸事件，当前变化的触摸点的信息的数组

（4）target与currentTartget的区别

        1）target是源头组件（最先触发的），而currentTarget是当前事件所绑定的组件。

        2）点击内部的按钮时，点击事件以冒泡的方式向外扩散，也会触发外层的view的tap事件处理函数。此时，对于外层的view来说：

        ①e.target指向的是触发事件的源头组件，因此，e.target是内部的按钮组件

        ②e. currentTartget指向的是当前正在触发事件的组件，即e. currentTartget是当前的view组件

22、事件传参（小程序中不能在绑定事件的同时为事件处理函数传递参数，因为小程序会把bindTap当做事件名称来处理）

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

（2）语法：

1）传参

data-参数名=”参数值”

2）获取

通过（event.target.dataset.参数名）获取

3）示例

23、实现文本框和data数据的动态绑定

（1）步骤：

        1）定义数据

        2）渲染结构

        3）美化样式

        4）绑定input事件处理函数

（2）示例

        1）定义数据

        2）渲染结构

        3）美化样式

        4）绑定input事件处理函数

        5）效果

24、条件渲染

（1）在小程序中，使用wx:if=”{{condition}}”来判断是否需要渲染代码块，也可以使用

Wx:elif和wx:else来添加else进行判断

（2）结合<block>使用wx:if

1)作用：一次性控制多个组件的展示与隐藏

2）注：<block>并不是一个组件，他只是一个包裹性质的容器，不会再页面中做任何渲 染。

比如：不会多包裹一层view

（3）hidden

        1）作用：控制元素的显示与隐藏

        2）语法：在小程序中，直接使用hidden=“{{condition}}”

（4）wx:if与hidden的区别

1）运行方式

①wx:if动态创建和移除元素的方式，控制元素的展示与隐藏

②hidden通过切换样式（display:none/block），控制元素的显示与隐藏

2）切换频率

①hidden：频繁切换（类似于v-show）

②wx:if：控制条件复杂，建议使用wx:if搭配wx:elif、wx:else进行频繁切换（类似于v-if）

25、wx：for

（1）作用：可以更具绑定的数组，循环渲染重复的组件结构

（2）语法：wx:for=”{{数组}}”

（3）示例：

1）提供数据：

2）渲染使用：

（4）注：

1）默认情况下，当前循环的索引用index表示，当前循环用item表示