ArkUI 数据绑定、列表渲染、事件处理

前言

有过开发微信小程序经验的小伙伴学习鸿蒙应用开发非常容易过渡过来。

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 值：