小程序中的数据绑定和事件绑定

1.如何定义数据

在小程序的每个页面，由4部分组成，其中.js文件内可以定义页面的数据，生命周期函数，其他的业务逻辑；

如果要在.js内定义页面的数据，只需把数据定义到data节点下

2.Mustache语法格式

把data中的数据绑定到页面中渲染，使用Mustache语法（双大括号）将变量包裹起来

语法格式：

<view> {{ 要绑定的数据名称 }} </view>

Mustache语法的主要应用场景

• 绑定内容
• 绑定属性
• 运算（三元表达式，算数运算，逻辑判断，字符串运算，数据路径运算）

绑定内容，直接将在data中定义好的数据使用大括号进行绑定

<view> {{ message }} </view>

属性绑定：需要在双括号内

<view id="item-{{id}}"> </view>

运算，三元运算

<view> {{ flag ? ‘条件为真’ : ‘条件为假’ }} </view>

事件绑定

什么是事件

• 事件是视图层到逻辑层的通讯方式
• 事件可以将用户的行为反馈到逻辑层进行处理
• 事件可以绑定在组件上，当组件触发事件，就会执行逻辑层中对应的事件处理函数
• 事件对象可以携带额外的信息；如id，dataset，touches

bindtap绑定触摸事件

在小程序中，不存在网页的onclick鼠标点击事件，而是通过tap事件响应触摸行为，通过bindtap，可以为组件绑定触摸事件

<view bindtap=“tapName”> Click me! <view>

 在相应的page定义中写上相应的事件处理函数，事件参数是event

bindinput绑定文本输入框事件

在小程序中，通过input事件响应文本框的输入事件

1.通过bindinput，可以为文本框绑定输入事件

<input bindinput=“inputName”><input>

2.在page中定义相应的逻辑函数进行处理，事件参数为event，要想获得文本框的内容可监听event.detail.value，就能拿到文本框中输入的最新的内容

修改data中的数据

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

inputName: function (event) {
1.先获取文本框中最新的值 event.detail.value
2.调用this.setData（{}）中间参数是一个对象
this.setData({
msg: event.detail.value // 为 data 中的 msg 重新赋值
})
}

事件传参

1.不能在绑定事件的同时传递参数

小程序中传递参数比较特殊，不能在事件的后面直接传递参数，因为小程序会把事件后面的值统一的指定为事件名称进行处理。

2.通过data-参数名='{{参数值}}' 自定义属性传参

如果要在组件触发事件处理函数的时候，传递参数，可以为组件提供data-参数名 自定义属性传参

示例代码：

<button bindtap='btnHandler’ data-info=“{{123}}”>事件传参</button>

其中info是参数名，数值123就是传递的参数值

 

3.获取data-参数名传递的参数值

通过事件event.target.dataset.参数名，获取传递的参数值

示例代码：

btnHandler: function(event){
console.log(event.target.dataset.info)
}