小程序数据绑定与事件绑定

2023-11-01 23:39:52

1.如何定义页面数据。

小程序中每个页面，又四个部分，其中js文件内可以定义页面的数据，生命周期函数，其他业务逻辑。

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

Page({
    data:{
    msg:‘hello word‘
    }
})

2.数据绑定：

把data中的数据绑定到页面中渲染，使用双大括号，将变量包起来即可。

语法格式为：

双大括号语法的主要应用场景：绑定内容，绑定属性，运算（三元表达式，算数运算，逻辑判断，字符串运算，数据路径运算）

3.属性绑定：

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

Page({
    data:{
     id:"23423424" 
  }
})

4.运算：

<view>{{ flag ? "1" :"0" }}</view>

事件绑定：

事件是视图层到逻辑层的通讯方式。

事件可以将用户的行为反馈到逻辑层进行处理。

事件可以绑定在组件上，当组件书法事件，就会执行逻辑层中对应的事件处理函数。

bindtap绑定触摸事件：

bindtap：触摸事件

在小程序中，不存在网页中的click鼠标点击事件，而是通过bindtap事件来响应触摸行为。

1.通过bindtap, 可以为组件绑定触摸事件，语法如下：

<view bindtap="tapName">Click Me!</view>

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

Page({
   tapName: function (event) {
      console.log(event)
  } 
})

bindinput ：文本框输入事件

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

1.通过bindinput,可以为文本框绑定输入事件，语法如下：

<input bindinput="inputName"></input>

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

Page({
   inputName: function (event) {
      console.log(event)
  } 
})

data和文本框之间数据同步：（有点像React的操作方法）

在vue中通过v-model 可以很方便的将数据双向绑定。而在微信中并没有这样的数据双向绑定，要想使数据双向绑定，需要手动的通过文本框的输入事件绑定到data中。

绑定方法：

1.监听文本框的数据变化

在文本框的input事件处理函数中，通过事件参数event，能够访问到文本框的最新值。

语法： event.detail.value

示例代码：

inputName: function (event) {
    //  获取到文本框中的最新数据 
    console.log(event.detail.value)
}

2.修改data中的数据

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

例如：例如监听文本框的数据变化，并把最新的值复制给data中的msg

inputName: function (event) {
    this.setData({
        msg: event.detail.value
    })
}

事件传参：

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

小程序的事件传参比较特殊，不能在为组件绑定事件函数的同时为事件处理函数传递参数。

例如：下面的代码将不能正常工作：

<button bindtap="btnHandler(123)">按钮</button>

因为小程序会把bindtap 后面指定的值，统一当作事件名称来处理。

2.通过data-*自定义属性传参：

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

示例代码：

<button bindtap="btnHandle" data-info ="hello word" >按钮</button>

其中，info 会被当作参数名，数值123 会被当作参数值。

3. 获取data-* 自定义属性中传递的参数

通过事件参数event.target.dataset.参数名，能够获取data-* 自定义属性传递到事件处理函数中的参数。

示例代码：

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

码农公寓