1.WXML語法參考

1.1資料系結

WXML 中的動態資料均來自對應 Page 的 data，資料系結，js檔案里的data屬性,在wxml中直接使用{{ }}進行系結，與vue的寫法十分相似，
特別注意：bool型別不要直接寫 checked=“false”，其計算結果是一個字串，轉成 boolean 型別后代表真值，
注意：花括號和引號之間如果有空格，將最終被決議成為字串
在這里插入圖片描述

1.2運算

{{}}資料系結可以是簡單的運算運算式，包括數字的加減，字串拼接，三元運算式，
在這里插入圖片描述

1.3串列渲染

wx:for （與vue的v-for類似）
在組件上使用 wx:for控制屬性系結一個陣列，即可使用陣列中各項的資料重復渲染該組件，默認陣列的當前項的下標變數名默認為 index，陣列當前項的變數名默認為 item，

使用 wx:for-item可以指定陣列當前元素的變數名，
使用 wx:for-index可以指定陣列當前下標的變數名：

wx:key
如果串列中專案的位置會動態改變或者有新的專案添加到串列中，并且希望串列中的專案保持自己的特征和狀態（如 input 中的輸入內容，switch 的選中狀態），需要使用 wx:key來指定串列中專案的唯一的識別符號，
wx:key的值以兩種形式提供
1. 字串，代表在 for 回圈的 array 中 item 的某個 property，該 property 的值需要是串列中唯一的字串或數字，且不能動態改變，
2. 保留關鍵字 *this
代表在 for 回圈中的 item 本身，這種表示需要 item 本身是一個唯一的字串或者數字，

當資料改變觸發渲染層重新渲染的時候，會校正帶有 key 的組件，框架會確保他們被重新排序，而不是重新創建，以確保使組件保持自身的狀態，并且提高串列渲染時的效率，
在這里插入圖片描述

在這里插入圖片描述

1.4 block標簽占位

渲染?個包含多節點的結構塊 block最終不會變成真正的dom元素,只是占位符的一個標簽，不代表實際含義，
在這里插入圖片描述

1.5條件渲染

類似vue的v-if,v-else-if,v-else，
wx:if在框架中，使用 wx:if="" 來判斷是否需要渲染該代碼塊：

<view wx:if="{{condition}}"> True </view>

也可以用 wx:elif 和 wx:else來添加一個 else 塊：

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

block wx:if
因為 wx:if是一個控制屬性，需要將它添加到一個標簽上，如果要一次性判斷多個組件標簽，可以使用一個 block標簽將多個組件包裝起來，并在上邊使用 wx:if控制屬性，

<block wx:if="{{true}}">
 <view> view1 </view> 
 <view> view2 </view> 
 </block>

注意：
并不是一個組件，它僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性，

wx:if vs hidden 控制顯示

頻繁切換用hidden，不常使用時用wx:if
wx:if是直接把標簽從結構中移除，而hidden是通過display:none；樣式來控制顯示，

在這里插入圖片描述

1.6模板

WXML提供模板（template），可以在模板中定義代碼片段，然后在不同的地方呼叫，

定義模板

在這里插入圖片描述

使用模板

在這里插入圖片描述

參考

WXML 提供兩種檔案參考方式import和include，

在這里插入圖片描述

示例
注意參考路徑,data傳值時是單引號

在這里插入圖片描述

2.事件的系結

?程式中系結事件，通過bind關鍵字來實作，如bindtap,bindinput,bindchange等
不同的組件?持不同的事件，具體看組件的說明即可，
js中賦值使用setData({ }),與vue的用法不同，事件傳值要用標簽自定義屬性 data-xxx=""
獲取輸入框的值為e.detail.value
獲取傳入的值為e.currentTarget.dataset
handleInput:function(e)里的e為事件源，是一個物件，通常會console.log(e)來查看我們所需要的值的具體位置，

在這里插入圖片描述

系結點擊事件，使用的是bindtap