一、数据绑定
1. 数据绑定的基本原则
- 在
data中定义数据- 在
WXML中使用数据
2. 在data中定义页面的数据
- 在页面对应的
.js文件中，把数据定义到data对象中即可：
3. Mustache 语法的格式
- 把data中的数据绑定到页面中渲染，使用
Mustache 语法（双大括号）将变量包起来即可。语法格式为：
4. Mustache 语法的应用场景
- 绑定内容
- 绑定属性
- 运算（三元运算、算术运算等）
5. 动态绑定内容
- 页面的数据如下：
- 页面的结构如下：
6. 动态绑定属性
-
页面的数据如下：
-
页面的结构如下：
7. 三元运算
- 页面的数据如下：
- 页面的结构如下：
8. 算数运算
-
页面的数据如下：
-
页面的结构如下：
二、事件绑定
1. 什么是事件
- 事件是
渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。
2. 小程序中常用的事件
3. 事件对象的属性列表
- 当事件回调触发的时候，会收到一个事件
对象event，它的详细属性如下表所示：
4. target 和 currentTarget 的区别
5. bindtap 的语法格式
- 在小程序中，不存在 HTML 中的 onclick 鼠标点击事件，而是通过
tap事件来响应用户的触摸行为。
- 通过
bindtap，可以为组件绑定 tap 触摸事件，语法如下：
- 在页面的 .js 文件中定义对应的事件处理函数，事件参数通过形参
event（一般简写成 e） 来接收：
6. 在事件处理函数中为 data 中的数据赋值
- 通过调用
this.setData(dataObject)方法，可以给页面data中的数据重新赋值，示例如下：
7. 事件传参
- 小程序中的事件传参比较特殊，
不能在绑定事件的同时为事件处理函数传递参数。例如，下面的代码将不能正常工作：
因为小程序会把 bindtap 的属性值，统一当作事件名称来处理，相当于要调用一个名称为btnHandler(123)的事件处理函数。
- 可以为组件提供
data-*自定义属性传参，其中 * 代表的是参数的名字，示例代码如下：
info会被解析为参数的名字- 数值
2会被解析为参数的值
- 在事件处理函数中，通过
event.target.dataset.参数名即可获取到具体参数的值，示例代码如下：
8. bindinput 的语法格式
- 在小程序中，通过
input事件来响应文本框的输入事件，语法格式如下：
- 通过
bindinput，可以为文本框绑定输入事件：
- 在页面的 .js 文件中定义事件处理函数：
9. 实现文本框和data之间的数据同步
实现步骤：
- 定义数据
- 渲染结构
- 美化样式
- 绑定 input 事件处理函数
-
定义数据
-
渲染结构
-
美化样式
-
绑定 input 事件处理函数
三、条件渲染
1. wx:if
- 在小程序中，使用
wx:if="{ {condition}}"来判断是否需要渲染该代码块：
- 也可以用
wx:elif和wx:else来添加 else 判断：
2. 结合 <block> 使用 wx:if
- 如果要
一次性控制多个组件的展示与隐藏，可以使用一个<block></block>标签将多个组件包装起来，并在<block> 标签上使用 wx:if 控制属性，示例如下：
注意：<block>并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染。
3. hidden
- 在小程序中，直接使用
hidden="{ { condition }}"也能控制元素的显示与隐藏：
4. wx:if 与 hidden 的对比
四、列表渲染
1. wx:for
- 通过 wx:for 可以根据指定的数组，循环渲染重复的组件结构，语法示例如下：
- 默认情况下，当前循环项的
索引用index表示；当前循环项用item表示。
2. 手动指定索引和当前项的变量名*
- 使用
wx:for-index可以指定当前循环项的索引的变量名 - 使用
wx:for-item可以指定当前项的变量名
3. wx:key 的使用
- 类似于 Vue 列表渲染中的
:key，小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的 key 值，从而提高渲染的效率，示例代码如下：
