目錄

WXML 模板語法 - 數據綁定：

1.數據綁定的基本原則

2. 在 data 中定義頁面的數據

3. Mustache 語法的格式

4. Mustache 語法的應用場景?

5. 動態綁定內容

6. 動態綁定屬性?

7. 三元運算?

8. 算數運算

WXML 模板語法 - 事件綁定?：

1. 什么是事件

2. 小程序中常用的事件?

3. 事件對象的屬性列表

4. target 和 currentTarget 的區別?

5. bindtap 的語法格式?

6. 在事件處理函數中為 data 中的數據賦值?

7. 事件傳參?

8. bindinput 的語法格式?

9. 實現文本框和 data 之間的數據同步?

WXML 模板語法 - 條件渲染?：

1. wx:if

2. 結合 使用 wx:if?

3. hidden?

4. wx:if 與 hidden 的對比?

WXML 模板語法 - 列表渲染?：

1. wx:for

2. 手動指定索引和當前項的變量名*?

3. wx:key 的使用?

---

WXML 模板語法 - 數據綁定

1.數據綁定的基本原則

①在 data 中定義數據 ②在 WXML 中使用數據

2. 在 data 中定義頁面的數據

在頁面對應的 .js 文件中，把數據定義到 data 對象中即可：

3. Mustache 語法的格式

????????把data中的數據綁定到頁面中渲染，使用 Mustache 語法（雙大括號）將變量包起來即可。類似于vue中的插值表達式，語法格式為：

4. Mustache 語法的應用場景?

綁定內容

綁定屬性

運算（三元運算、算術運算等）

?5. 動態綁定內容

????????頁面的數據如下：

????????????????

????????頁面的結構如下：

?????????????????

6. 動態綁定屬性?

?????????頁面的數據如下：

????????????????

????????頁面的結構如下：

????????????????

7. 三元運算?

????????頁面的數據如下：

????????????????

????????頁面的結構如下：

?????????????????

8. 算數運算

????????

WXML 模板語法 - 事件綁定?：

1. 什么是事件

????????事件是渲染層到邏輯層的通訊方式。通過事件可以將用戶在渲染層產生的行為，反饋到邏輯層進行業務的處理。

2. 小程序中常用的事件?

????????

類型	綁定方式	事件描述
tap	bindtap 或 bind:tap	手指觸摸后馬上離開，類似于 HTML 中的 click 事件
input	bindinput 或 bind:input	文本框的輸入事件
change	bindchange 或 bind:change	狀態改變時觸發

?3. 事件對象的屬性列表

???????當事件回調觸發的時候，會收到一個事件對象 event，它的詳細屬性如下表所示：?

屬性	類型	說明
type	String	事件類型
timeStamp	Integer	頁面打開到觸發事件所經過的毫秒數
target	Object	觸發事件的組件的一些屬性值集合
currentTarget	Object	當前組件的一些屬性值集合
detail	Object	額外的信息
touches	Array	觸摸事件，當前停留在屏幕中的觸摸點信息的數組
changedTouches	Array	觸摸事件，當前變化的觸摸點信息的數組

4. target 和 currentTarget 的區別?

????????target 是觸發該事件的源頭組件，而 currentTarget 則是當前事件所綁定的組件。舉例如下：

點擊內部的按鈕時，點擊事件以冒泡的方式向外擴散，也會觸發外層 view 的 tap 事件處理函數。

此時，對于外層的 view 來說：

1.target 指向的是觸發事件的源頭組件，因此，e.target 是內部的按鈕組件 2.currentTarget 指向的是當前正在觸發事件的那個組件，因此，e.currentTarget 是當前的 view 組件

5. bindtap 的語法格式?

????????

在小程序中，不存在 HTML 中的 onclick 鼠標點擊事件，而是通過 tap 事件來響應用戶的觸摸行為。

①通過 bindtap，可以為組件綁定 tap 觸摸事件，語法如下：

????????②在頁面的 .js 文件中定義對應的事件處理函數，事件參數通過形參 event（一般簡寫成 e） 來接收：

?????????

6. 在事件處理函數中為 data 中的數據賦值?

????????通過調用 this.setData(dataObject) 方法，可以給頁面 data 中的數據重新賦值，示例如下：

????????

7. 事件傳參?

????????小程序中的事件傳參比較特殊，不能在綁定事件的同時為事件處理函數傳遞參數。例如，下面的代碼將不能正常工作：

????????

因為小程序會把 bindtap 的屬性值，統一當作事件名稱來處理，相當于要調用一個名稱為 btnHandler(123) 的事件處理函數。

????????可以為組件提供 data-* 自定義屬性傳參，其中 * 代表的是參數的名字，示例代碼如下：

最終：

1?info 會被解析為參數的名字 2 數值 2 會被解析為參數的值

在事件處理函數中，通過 event.target.dataset.參數名 即可獲取到具體參數的值，示例代碼如下：

?? ??

8. bindinput 的語法格式?

?????????在小程序中，通過 input 事件來響應文本框的輸入事件，語法格式如下：

①通過 bindinput，可以為文本框綁定輸入事件：

? ??

????????②在頁面的 .js 文件中定義事件處理函數：?

? ???

9. 實現文本框和 data 之間的數據同步?

????????實現步驟：

①定義數據 ②渲染結構 ③美化樣式 ④綁定 input 事件處理函數

定義數據：

?????????

渲染結構：

?????????

美化樣式：

?????????

綁定 input 事件處理函數：

?????????

WXML 模板語法 - 條件渲染?：

?????1. wx:if

????????在小程序中，使用 wx:if="{{condition}}" 來判斷是否需要渲染該代碼塊：

? ? ?

????????也可以用 wx:elif 和 wx:else 來添加 else 判斷：

????????

2. 結合 <block> 使用 wx:if?

????????如果要一次性控制多個組件的展示與隱藏，可以使用一個 <block></block> 標簽將多個組件包裝起來，并在<block> 標簽上使用 wx:if 控制屬性，示例如下：

????????

注意： <block> 并不是一個組件，它只是一個包裹性質的容器，不會在頁面中做任何渲染。

3. hidden?

????????在小程序中，直接使用 hidden="{{ condition }}" 也能控制元素的顯示與隱藏：

????????

4. wx:if 與 hidden 的對比?

????????①運行方式不同

1 wx:if 以動態創建和移除元素的方式，控制元素的展示與隱藏 2 hidden 以切換樣式的方式（display: none/block;），控制元素的顯示與隱藏 ②使用建議 1?頻繁切換時，建議使用 hidden 2?控制條件復雜時，建議使用 wx:if 搭配 wx:elif、wx:else 進行展示與隱藏的切換

?

WXML 模板語法 - 列表渲染?

????????

??1. wx:for

????????通過 wx:for 可以根據指定的數組，循環渲染重復的組件結構，語法示例如下：

????????

????????默認情況下，當前循環項的索引用 index 表示；當前循環項用 item 表示。

2. 手動指定索引和當前項的變量名*?

? ? 1?使用 wx:for-index 可以指定當前循環項的索引的變量名

2 使用 wx:for-item 可以指定當前項的變量名

示例代碼如下：

????????

3. wx:key 的使用?

????????類似于 Vue 列表渲染中的 :key，小程序在實現列表渲染時，也建議為渲染出來的列表項指定唯一的 key 值，從而提高渲染的效率，示例代碼如下：

????????

????????

總結

以上是生活随笔為你收集整理的微信小程序学习day01-WXML 模板语法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。