数据绑定
3.1 了解数据绑定的原则
-
数据绑定的基本原则
-
在
data中定义数据 -
在
wxml中使用数据
-
-
在
data中定义页面的数据在页面对应的
.js文件中，把数据定义在data对象中即可：
image.png
-
Mustache语法的格式把
data中的数据绑定到页面中渲染，使用Mustache 语法(双大括号) 将变量包起来即可。语法格式如下
image.png
- 案例代码
data: {
name: 'xiaomi'
}
<view>{{ name }}</view>
3.2 动态绑定属性
-
Mustache语法的应用场景-
绑定内容
-
绑定属性
-
运算(三元运算、算术运算符)
-
-
动态绑定内容
页面的数据如下：
image.png
页面的结构如下：
image.png
-
动态绑定属性
页面的数据如下：
image.png
页面的结构如下：
image.png
- 案例代码
data: {
imgSrc: 'http://www.itcast.cn/2018czgw/images/logo.png'
}
<image src="{{ imgSrc }}" mode="widthFix"></image>
3.3 三元运算
页面的数据如下
image.png
页面的结构如下
image.png
案例代码
data: {
randomNum: Math.random() * 10 // 生成 10 以内的随机数
}
<view>{{ randomNum >= 5 ? '随机数字大于或等于5' : '随机数小于 5' }}</view>
3.4 算数运算
页面的数据如下
image.png
页面的结构如下
image.png
案例代码
data: {
randomNum1: Math.random().toFixed(2)
}
<view>{{ randomNum1 * 100 }}</view>
4. 事件绑定
4.1 了解什么是事件以及小程序中常用的事件
-
什么是事件
事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染成产生的行为，反馈到逻辑层进行业务的处理
image.png
-
小程序中常用的事件
-
bindtap、bindinput、bindchange
-
bind:tap、bind:input、bind:chage
类型 绑定方式 事件描述 tap bindtap 或 bind:tap 手指触摸后马上离开，类似于 HTML 中的 click 事件 input bindinput 或者 bind:input 文本框的输入事件 change bindchange 或 bind:change 状态改变时触发 -
4.2 事件对象的属性列表
当事件回调触发的时候，会收到一个事件对象 event，它的详细属性如下
| 属性 | 类型 | 说明 |
|---|---|---|
| type | String | 事件类型 |
| timeStamp | Integer | 事件生成时的时间戳 |
target |
Object | 触发事件的组件的一些属性值集合 |
| currentTarget | Object | 当前组件的一些属性值集合 |
detail |
Object | 额外的信息 |
| touches | Array | 触摸事件，当前停留在屏幕中的触摸点信息的数组 |
| changedTouches | Array | 触摸事件，当前变化的触摸点信息的数组 |
4.3 target 和 currentTarget 的区别
-
target是触发该事件的源头组件 -
currentTarget则是当前事件所绑定的组件
image.png
点击内部的按钮时，点击事件以 冒泡 的方式向外扩散，也会触发外层 view 的 tap 事件处理程序
此时，对于外层的 view 来说：
-
e.target指定的是触发事件的源头组件，因为e.target是内部的按钮组件 -
e.currentTarget指向的是当前正在触发事件的那个组件，因此e.currentTarget是当前的view组件
4.4 bindTap 的语法格式
在小程序中，不存在 HTML 中的 onclick 鼠标点击事件，而是通过 tap 事件来响应用户的触摸行为
- 通过 bindtap，可以为组件绑定 tap 触摸事件
image.png
- 在页面的 .js 文件中定义对应的事件处理函数，事件参数通过形参 event(一般简写为 e) 来接收
image.png
案例代码
// 按钮 tap 事件处理函数
btnTapHandle (e) {
// 事件参数对象 e
console.log(e)
}
<view>
<button type="primary" bindtap="btnTapHandle">按钮</button>
</view>
4.5 在事件处理函数中为 data 中的数据赋值
通过调用 this.setData(dataObject) 方法，可以给页面 data 中的数据重新赋值
image.png
案例代码：
// count 值 + 1 处理
changeCount () {
this.setData({
count: this.data.count + 1
})
}
<view>
<button type="primary" bindtap="changeCount">+ 1</button>
</view>
4.6 事件传参
-
事件传参错误方式
小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理程序传递参数，例如，下面的代码将不能正常工作
因为小程序会把 bindtap 的属性值，统一当作事件名称来处理，相当于要调用一个名称为 btnHandler(123) 的事件处理函数
image.png
-
事件传参正确的方式
可以为组件提供
data-*自定义属性传参，其中* 代表的是参数的名字，实例代码如下：最终：
-
info会被解析为参数的名字 -
数值
2会被解析为参数的值
-
image.png
-
接收事件传递的参数
在事件处理函数中，通过
event.target.dataset.参数名即可获取到具体参数的值，示例代码如下：
image.png
- 案例代码
data: {
count: 0
}
// count 值 + 2 处理
bindTap2 (e) {
this.setData({
count: this.data.count + e.target.dataset.num
})
}
<view>
<button type="primary" bindtap="bindTap2" data-num="{{ 2 }}">+ 2</button>
</view>
4.7 bindinput 的语法格式
在小程序中，通过 input 事件来响应文本框的输入事件，语法格式如下：
-
通过 bindinput，可以为为文本框绑定输入事件
image.png
- 在页面的 .js 文件中定义事件处理函数
image.png
- 案例代码
// 获取 input 中的最新输入的数据
inputHandle (e) {
// e.detail.value 是输入框最新输入的值
console.log(e.detail.value)
}
<view>
<input type="text" bindinput="inputHandle" />
</view>
4.8 实现文本框和 data 之间的数据同步
- 定义数据
image.png
-
渲染结构
image.png
- 美化样式
image.png
-
绑定 input
image.png
- 案例代码
<view>
<input value="{{ msg }}" bindinput="setMsg" />
</view>
data: {
msg: ``
}
// 实现文本框和 data 之间数据的同步
setMsg (e) {
this.setData({
msg: e.detail.value
})
}
input {
border: 1px solid lightcoral;
padding: 5px;
margin: 5px;
border-radius: 3px;
}
网友评论