一、數(shù)據(jù)綁定
1、定義數(shù)據(jù)
? ? ? ? 在頁面對應(yīng)的 .js（或 ts）文件中，把數(shù)據(jù)定義到 data 對象中即可：
?2、Mustache 語法的格式（渲染數(shù)據(jù)）
? ? ? ? 把 data 中的數(shù)據(jù)綁定到頁面中渲染，使用 Mustache 語法（雙大括號）將變量名包起來即可。如圖：
?3、Mustache 語法的應(yīng)用場景
Mustache 語法的主要應(yīng)用場景：
- 綁定內(nèi)容
- 綁定屬性
- 運算（三元運算、算術(shù)運算等）
1、動態(tài)綁定內(nèi)容
頁面數(shù)據(jù)如圖：
頁面的結(jié)構(gòu)如圖：
?
?以上演示就是數(shù)據(jù)的動態(tài)綁定，將定義的頁面數(shù)據(jù)綁定到頁面結(jié)構(gòu)進行渲染。
2、動態(tài)綁定屬性
頁面數(shù)據(jù)如圖：
頁面的結(jié)構(gòu)如圖：
?
?最后整體展示如圖：
?一定要注意語法格式?。。?/p>
3、三元運算
頁面的數(shù)據(jù)如下：
頁面的結(jié)構(gòu)如下：
?
?最后整體展示：
4、算術(shù)運算?
頁面數(shù)據(jù)如下：
頁面的結(jié)構(gòu)如下：
?
最后整體展示：
?
最后總結(jié)一下：數(shù)據(jù)的綁定，首先是在頁面的 .js（或 .ts）文件的? page 中的 data 內(nèi)定義數(shù)據(jù)，再在頁面的 .WXML 文件中渲染數(shù)據(jù)。?
二、事件綁定
? ? ? ? 事件是渲染層到邏輯層的通訊方式。通過事件可以將用戶在渲染層產(chǎn)生的行為，反饋到邏輯層進行業(yè)務(wù)的處理。
1、 小程序中常用的事件：
| 類型 | 綁定方式 | 事件描述 |
| tap | bindtap? 或 bind:tap | 手指觸摸后馬上離開 |
| input | bindinput 或 bind:input | 文本框的輸入事件 |
| change | bindchange 或 bing:change | 狀態(tài)改變時觸發(fā) |
2、事件對象 event 的詳細屬性：
| 屬性 | 類型 | 說明 |
| type | String | 事件類型 |
| timeStamp | Integer | 頁面打開到觸發(fā)事件所經(jīng)過的毫秒數(shù) |
| target | Object | 觸發(fā)事件的組件的一些屬性值集合 |
| currentTarget | Object | 當(dāng)前組件的一些屬性值集合 |
| detail | Object | 額外的信息 |
| touches | Array | 觸摸事件，當(dāng)前停留在屏幕中的觸摸點信息的數(shù)組 |
| changedTouches | Array | 觸摸事件，當(dāng)前變化的觸摸點信息的數(shù)組 |
3、target 和 currentTarget 的區(qū)別：
? ? ? ? target 是觸發(fā)該事件的源頭組件，而 currentTarget 則是當(dāng)前事件所綁定的組件。舉例如下：
4、 bandtap 的語法格式
? ? ? ? 在小程序中，不存在 HTML 中的 onclick 鼠標(biāo)點擊事件，而是通過 tap 事件來響應(yīng)用戶的觸摸行為。
1、通過 bindtap，可以為組件綁定 tap 觸摸事件，語法如下：
?2、在頁面的 .ts（或 .js）文件中定義對應(yīng)的事件處理函數(shù)，事件參數(shù)通過形參 event （一般簡寫成 e ）來接收：
?
?
?5、在事件處理函數(shù)中為 data 中的數(shù)據(jù)賦值
? ? ? ? 通過調(diào)用 this.setData(dataObject) 方法，可以給頁面 data 中的數(shù)據(jù)重新賦值，示例如下：
下面看一下整體效果：
?
?6、事件傳參
? ? ? ? 小程序中的事件傳參比較特殊，不能再綁定事件的同時為事件處理函數(shù)傳遞參數(shù)。例如，下面的代碼不能正常工作：
?????????因為小程序會把 bindtap 的屬性值（即單引號內(nèi)的所有內(nèi)容），統(tǒng)一當(dāng)作事件名稱來處理，相當(dāng)于要調(diào)用一個名稱為 btnTapHandler(123) 的事件來處理函數(shù)，不會把括號里面的123當(dāng)作參數(shù)傳遞。
1、小程序的正確傳參方法：
? ? ? ? 可以為組件提供 data-* 自定義屬性傳參，其中 * 代表的是參數(shù)的名字，參數(shù)的值通過 Musatche 語法（雙大括號）傳遞。實例如下：
?
最終：
- info 會被解析為參數(shù)的名字
- 數(shù)值 2 會被解析為參數(shù)的值
2、獲取到具體參數(shù)的值
在事件處理函數(shù)中，通過 event.target.dataset.參數(shù)名 即可獲取到具體參數(shù)的值，示例代碼如下：
注意格式：event.target.dataset.參數(shù)名 其中 event 可以是縮寫 e?
7、bindinput 的語法格式
? ? ? ? 在小程序中，通過 input 事件來響應(yīng)文本框的輸入事件，語法格式如下：
1、通過 bindinput，可以為文本框綁定輸入事件：
?2、在頁面的 .js 文件中定義事件處理函數(shù)：
?最后看一下整體演示：
?8、實現(xiàn)文本框和 data 之間的數(shù)據(jù)同步
1、實現(xiàn)步驟：
- 定義數(shù)據(jù)
- 渲染結(jié)構(gòu)
- 美化樣式
- 綁定 innput 事件處理函數(shù)
2、定義數(shù)據(jù)
?3、渲染結(jié)構(gòu)
4、美化樣式?
?5、綁定 input 事件處理函數(shù)
?最后看一下編譯效果：文章來源：http://www.zghlxwxcb.cn/news/detail-502306.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-502306.html
到了這里，關(guān)于微信小程序開發(fā)的數(shù)據(jù)綁定和事件綁定的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
