🐳简介
数据绑定
数据绑定是一种将小程序中的数据与页面元素关联起来的技术，使得当数据变化时，页面元素能够自动更新。这通常使用特定的语法（如双大括号 {{ }}）来实现，以便在页面上展示动态数据。
事件绑定
事件绑定是将用户操作（如点击、滑动等）与特定的处理函数关联起来的过程。当用户执行这些操作时，会触发相应的处理函数并执行特定的代码逻辑。事件绑定通常使用特定的语法（如 bindtap）来实现。
🐳数据绑定Mustache语法
🐤内容绑定
在xml中我们可以通过下面方式，使用双大括号将变量包起来，进行数据绑定
<view>{{要绑定的数据名称}}</view>
在页面的js文件中的data对象里面，我们可以在这里定义数据初始化数据
如下图中的data中定义了一个motto：'Hello World'
我们就可以在xml中通过<view>{{motto}}</view>对这个数据进行绑定
🐤绑定属性
在data中继续加入属性，一个图片的URL地址
data: {motto: 'Hello World',img:'https://c-ssl.duitang.com/uploads/item/201408/02/20140802211120_t34dW.jpeg'
}然后我们就可以在xml中通过<image src="{{img}}"></image>对图片进行绑定
🐳事件绑定
在小程序中，常用的事件用于处理用户与界面元素的交互。以下是一些常见的事件类型：
- 点击事件（tap）
- 当用户点击某个组件时触发。例如，
bindtap或catchtap用于按钮、图片、文本等组件。
- 当用户点击某个组件时触发。例如，
- 触摸事件：
touchstart：触摸开始touchmove：触摸移动touchend：触摸结束touchcancel：触摸取消（如来电等导致触摸中断）
- 长按事件（longpress）：
- 当用户长按某个组件时触发。常用于实现长按预览、长按删除等功能。
- 滑动事件（scroll）：
- 在可滚动视图区域滚动时触发。常用于滚动视图、列表等组件。
- 输入事件：
input：常用于输入框（<input>或<textarea>）中，当内容改变时触发。confirm：在<input type="text" confirm-type="..."/>中，用户点击键盘的完成按钮时触发。
- 表单事件：
formsubmit：表单提交时触发。formreset：表单重置时触发。
🐤点击事件绑定
以tap事件为例，我们通过tap事件来相应用户的点击行为，如下定义一个按钮
<button type="primary" bindtap="btnTapHandler">按钮</button>
在js文件中定义事件的处理函数，但按钮被点击时就会触发函数
🐤点击事件绑定传参
假设你有一个按钮，你想在用户点击它时触发一个事件，并传递一个参数：
<button bindtap="handleClick" data-param="{{yourParam}}">点击我</button>在对应的JS文件中，你需要定义handleClick函数，并接收传递的参数：
Page({ data: { yourParam: 'Hello, World!' }, handleClick: function(e) { // 通过e.currentTarget.dataset获取传递的参数 var param = e.currentTarget.dataset.param; console.log(param); // 输出：Hello, World! // ... 在这里处理你的逻辑 ... }
})这样当点击按钮时，函数中就会接受到对应参数，并打印到控制台！
<input type="text" bindinput="handleInput" placeholder="请输入内容" />🐤输入事件
bindinput用于监听输入框（<input>）的输入内容变化事件。当用户在输入框中输入内容时，bindinput绑定的事件处理函数会被触发。
在输入框上使用bindinput属性，并指定一个事件处理函数名。例如：
<input type="text" bindinput="handleInput" placeholder="请输入内容" />在对应的JS文件中，你需要定义handleInput函数，并接收一个事件对象参数e。这个事件对象包含了关于触发事件的详细信息，例如输入的内容。你可以通过e.detail.value获取输入框的当前值。
Page({ handleInput: function(e) { // e.detail.value 就是输入框的当前值 var inputValue = e.detail.value; console.log(inputValue); // 打印输入内容 // ... 在这里处理你的逻辑 ... }
})当每次在输入框输入值时就会触发一次handleInput函数！
