數(shù)據(jù)綁定
3.1 了解數(shù)據(jù)綁定的原則
-
數(shù)據(jù)綁定的基本原則
在
data中定義數(shù)據(jù)在
wxml中使用數(shù)據(jù)
-
在
data中定義頁面的數(shù)據(jù)在頁面對應(yīng)的
.js文件中即硼，把數(shù)據(jù)定義在data對象中即可：
image.png
-
Mustache語法的格式把
data中的數(shù)據(jù)綁定到頁面中渲染，使用Mustache 語法(雙大括號) 將變量包起來即可。語法格式如下
image.png
- 案例代碼
data: {
name: 'xiaomi'
}
<view>{{ name }}</view>
3.2 動(dòng)態(tài)綁定屬性
-
Mustache語法的應(yīng)用場景綁定內(nèi)容
綁定屬性
運(yùn)算(三元運(yùn)算谷饿、算術(shù)運(yùn)算符)
-
動(dòng)態(tài)綁定內(nèi)容
頁面的數(shù)據(jù)如下：
image.png
頁面的結(jié)構(gòu)如下：
-
動(dòng)態(tài)綁定屬性
頁面的數(shù)據(jù)如下：
image.png
頁面的結(jié)構(gòu)如下：
- 案例代碼
data: {
imgSrc: 'http://www.itcast.cn/2018czgw/images/logo.png'
}
<image src="{{ imgSrc }}" mode="widthFix"></image>
3.3 三元運(yùn)算
頁面的數(shù)據(jù)如下
頁面的結(jié)構(gòu)如下
案例代碼
data: {
randomNum: Math.random() * 10 // 生成 10 以內(nèi)的隨機(jī)數(shù)
}
<view>{{ randomNum >= 5 ? '隨機(jī)數(shù)字大于或等于5' : '隨機(jī)數(shù)小于 5' }}</view>
3.4 算數(shù)運(yùn)算
頁面的數(shù)據(jù)如下
頁面的結(jié)構(gòu)如下
案例代碼
data: {
randomNum1: Math.random().toFixed(2)
}
<view>{{ randomNum1 * 100 }}</view>
4. 事件綁定
4.1 了解什么是事件以及小程序中常用的事件
-
什么是事件
事件是渲染層到邏輯層的通訊方式。通過事件可以將用戶在渲染成產(chǎn)生的行為妈倔，反饋到邏輯層進(jìn)行業(yè)務(wù)的處理
-
小程序中常用的事件
bindtap博投、bindinput、bindchange
bind:tap盯蝴、bind:input毅哗、bind:chage
類型 綁定方式 事件描述 tap bindtap 或 bind:tap 手指觸摸后馬上離開，類似于 HTML 中的 click 事件 input bindinput 或者 bind:input 文本框的輸入事件 change bindchange 或 bind:change 狀態(tài)改變時(shí)觸發(fā)
4.2 事件對象的屬性列表
當(dāng)事件回調(diào)觸發(fā)的時(shí)候捧挺，會(huì)收到一個(gè)事件對象 event虑绵，它的詳細(xì)屬性如下
| 屬性 | 類型 | 說明 |
|---|---|---|
| type | String | 事件類型 |
| timeStamp | Integer | 事件生成時(shí)的時(shí)間戳 |
target |
Object | 觸發(fā)事件的組件的一些屬性值集合 |
| currentTarget | Object | 當(dāng)前組件的一些屬性值集合 |
detail |
Object | 額外的信息 |
| touches | Array | 觸摸事件，當(dāng)前停留在屏幕中的觸摸點(diǎn)信息的數(shù)組 |
| changedTouches | Array | 觸摸事件闽烙，當(dāng)前變化的觸摸點(diǎn)信息的數(shù)組 |
4.3 target 和 currentTarget 的區(qū)別
target是觸發(fā)該事件的源頭組件-
currentTarget則是當(dāng)前事件所綁定的組件
image.png
點(diǎn)擊內(nèi)部的按鈕時(shí)翅睛，點(diǎn)擊事件以 冒泡 的方式向外擴(kuò)散，也會(huì)觸發(fā)外層 view 的 tap 事件處理程序
此時(shí)黑竞，對于外層的 view 來說：
e.target指定的是觸發(fā)事件的源頭組件捕发，因?yàn)?e.target是內(nèi)部的按鈕組件e.currentTarget指向的是當(dāng)前正在觸發(fā)事件的那個(gè)組件，因此e.currentTarget是當(dāng)前的view組件
4.4 bindTap 的語法格式
在小程序中很魂，不存在 HTML 中的 onclick 鼠標(biāo)點(diǎn)擊事件扎酷，而是通過 tap 事件來響應(yīng)用戶的觸摸行為
- 通過 bindtap，可以為組件綁定 tap 觸摸事件
- 在頁面的 .js 文件中定義對應(yīng)的事件處理函數(shù)遏匆，事件參數(shù)通過形參 event(一般簡寫為 e) 來接收
案例代碼
// 按鈕 tap 事件處理函數(shù)
btnTapHandle (e) {
// 事件參數(shù)對象 e
console.log(e)
}
<view>
<button type="primary" bindtap="btnTapHandle">按鈕</button>
</view>
4.5 在事件處理函數(shù)中為 data 中的數(shù)據(jù)賦值
通過調(diào)用 this.setData(dataObject) 方法法挨，可以給頁面 data 中的數(shù)據(jù)重新賦值
案例代碼：
// count 值 + 1 處理
changeCount () {
this.setData({
count: this.data.count + 1
})
}
<view>
<button type="primary" bindtap="changeCount">+ 1</button>
</view>
4.6 事件傳參
-
事件傳參錯(cuò)誤方式
小程序中的事件傳參比較特殊，不能在綁定事件的同時(shí)為事件處理程序傳遞參數(shù)幅聘，例如凡纳，下面的代碼將不能正常工作
因?yàn)樾〕绦驎?huì)把 bindtap 的屬性值，統(tǒng)一當(dāng)作事件名稱來處理喊暖，相當(dāng)于要調(diào)用一個(gè)名稱為 btnHandler(123) 的事件處理函數(shù)
-
事件傳參正確的方式
可以為組件提供
data-*自定義屬性傳參惫企，其中* 代表的是參數(shù)的名字撕瞧，實(shí)例代碼如下：最終：
info會(huì)被解析為參數(shù)的名字數(shù)值
2會(huì)被解析為參數(shù)的值
-
接收事件傳遞的參數(shù)
在事件處理函數(shù)中陵叽，通過
event.target.dataset.參數(shù)名即可獲取到具體參數(shù)的值狞尔，示例代碼如下：
- 案例代碼
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 事件來響應(yīng)文本框的輸入事件巩掺，語法格式如下：
-
通過 bindinput偏序，可以為為文本框綁定輸入事件
image.png
- 在頁面的 .js 文件中定義事件處理函數(shù)
- 案例代碼
// 獲取 input 中的最新輸入的數(shù)據(jù)
inputHandle (e) {
// e.detail.value 是輸入框最新輸入的值
console.log(e.detail.value)
}
<view>
<input type="text" bindinput="inputHandle" />
</view>
4.8 實(shí)現(xiàn)文本框和 data 之間的數(shù)據(jù)同步
- 定義數(shù)據(jù)
-
渲染結(jié)構(gòu)
image.png
- 美化樣式
-
綁定 input
image.png
- 案例代碼
<view>
<input value="{{ msg }}" bindinput="setMsg" />
</view>
data: {
msg: ``
}
// 實(shí)現(xiàn)文本框和 data 之間數(shù)據(jù)的同步
setMsg (e) {
this.setData({
msg: e.detail.value
})
}
input {
border: 1px solid lightcoral;
padding: 5px;
margin: 5px;
border-radius: 3px;
}
