1.数据绑定:在data中定义页面的数据
在页面对应的.js文件中,把数据定义到data对象即可:
2.事件绑定
事件是渲染层到逻辑层的通讯方式,通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理。
小程序中常用的事件:
bindtap的语法格式:在小程序中,不存在HTML中的onclick鼠标点击事件,而是通过tap事件来响应用户的触摸行为,
(1)通过bindtap,可以为组件绑定tap触摸事件语法如下:
(2)在页面的.js文件中定义对应的事件处理函数,事件藏书通过形参event来接收
在事件处理函数中为data中的数据赋值:通过调用this.setData(),可以给页面data中的数据重新赋值。
3.事件传参
小程序中的事件传参比较特殊,不能在绑定事件的同时为事件处理函数传递参数。,因为小程序会把bindtap的属性值,统一当作事件名称来处理,相当于调用一个名称为,如图:
,因此可以为组件提供data-自定义属性传参,其中代表的是参数的名字。
如图:
在TestInfo方法中,绑定infos属性,属性值为info。
怎么读取属性值呢: 如图所示通过:e.target.dataset.infos
4.bindinput的语法格式
在小程序中,通过input事件来响应文本框的输入事件,语法格式如下:
(1)通过bindinput,可以为文本框绑定输入事件
(2)在页面的.js文件中定义事件处理函数,如图所示:
实现文本框和data之间的数据同步:
实现步骤:(1)定义数据(2)渲染结构(3)美化样式(4)绑定input事件处理函数