前言
有過開發微信小程序經驗的小伙伴學習鴻蒙應用開發非常容易過渡過來。
HML（HarmonyOS Markup Language）是一套類HTML的標記語言，通過組件，事件構建出頁面的內容。頁面具備數據綁定、事件綁定、列表渲染、條件渲染和邏輯控制等高級能力。
一個頁面（pages）對應着一個 hml 文件、一個 js 文件、一個 css 文件。
- pages.index
-- index.css
-- index.hml
-- index.js
index.js 使用來寫業務代碼的地方，存放數據、函數。index.css 和 index.hml 用來定義頁面中數據顯示的結構和布局以及樣式。
首先，頁面要顯示一些 動態 內容，就需要 數據綁定 ，就是將頁面中的數據和 index.js 中的變量綁定起來，在后期有業務需求時改變某個頁面節點中的數據。
起步
變量/函數
打開 index.js 文件，data 是我們需要聲明變量的位置；函數聲明在 data 之后。
export default {
// 變量
data: {
array: [ { id: 1, name: 'jack', age: 18 }, { id: 2, name: 'nick', age: 19 }, { id: 3, name: 'tom', age: 20 } ]
},
// 函數
handleClick(obj) { obj.name = 'changed!' }
}
構建頁面
打開 index.hml，定義數據在頁面渲染的結構：
<div class="todo-list" for="{{ (index, value) in array }}" tid="id">
<div onclick="handleClick(value)">
<div class="name">
<text>name: {{ value.name }}</text>
</div>
<div class="age">
<text>age: {{ value.age }}</text>
</div>
</div>
</div>
！注意：字符串必須要包裹在 text 標簽內，否則不會渲染到頁面中。
事件處理
onclick 用於綁定一個點擊事件，它可以縮寫成 @click ，這與 Vue 一樣。
列表渲染
for 用來循環數組，每一個數組的索引值和元素包裹在 () 內，第一個值為索引值，第二個值為數組元素。tid 類似於 Vue 中的 :key，旨在列表中的數據有變更時，提高重新渲染的效率。每一項節點必須保證它的 tid 是唯一的。
如果不使用 in 來自定義元素名稱和索引值，就不需要小括號包裹：
<div for="{{array}}"></div>
默認使用 $item 代表元素，$idx 代表索引值，是 index 的縮寫。
效果演示
最后點擊項，改變其中一個元素的 name 值：
