小程序的数据绑定以及事件的绑定

一、数据绑定的基本原则

【Mustache 语法的应用场景

  • 绑定内容

  • 绑定属性

  •运算(三元运算、算术运算符)】

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

定义数据

②在页面对应的 .wxml 中使用数据------这里渲染用到了Mustache 语法的运算

运算使用语法 使用数据 结果展示

---

二、事件绑定

1.什么是事件？

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

2.小程序中常用的事件

bind:tap（触摸事件）、bind:input、bind:change（可简写为bindtap、bindinput、bindchange）

常用事件

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

事件对象的属性列表

4. target 和 currentTarget 的区别

①target 是触发该事件的源头组件

②currentTarget 则是当前事件所绑定的组件

点击内部的按钮时，点击事件以 `冒泡` 的方式向外扩散，也会触发外层 `view` 的 `tap` 事件处理程序

5.如何给元素绑定事件？

实现代码

6. 在事件处理函数中为 data 中的数据赋值？

可以为组件提供 data-* 自定义属性传参，其中 * 代表的是参数的名字，num 会被解析为 参数的名字,数值 5 会被解析为 参数的值

定义参数

要通过调用 this.setData(dataObject) 方法，可以给页面 data 中的数据重新赋值，之后在触摸（点击）事件触发时再进行调用即可

在事件处理函数中，通过 event.target.dataset.参数名 即可获取到具体参数的值。

修改data数据

7.如何获取input中输入的值？

通过 e.detail.value 获取输入框的值

输入事件

8.实现文本框和 data 之间的数据同步？

将数据定义在data中，然后通过setData的方法修改data的数据------在用户更改输入框输入内容的同时也就是更改了 e.detail.value的值，将其与data数据进行绑定，就可以利用setData（）修改了data的值

数据的双向绑定