鸿蒙OS开发学习教程-凡亿课堂

HML语法

页面结构

和html相同的标签嵌套，最外层是div

数据绑定

export default{
    data:{
        变量名： value
    }}

事件绑定

export default{
    data:{
    },
    clickfunc: function(){
        ......
    }}

列表渲染（for)

tid属性指定数组中每个元素的唯一标识，默认值为id，用于加速for循环的重渲染
写法1（都不指定）：<div for="{{array}}" tid='id'></div> ,$idx代表元素索引，$item代表数组元素
写法2（指定元素名称）：<div for="{{value in array}}" tid='id'></div>,$idx代表元素索引，value代表数组元素
写法3（指定索引和元素名称）：<div for="{{(index,value) in array}}" tid='id'></div> ,index代表元素索引，value代表数组元素

条件渲染(if)

逻辑控制块

使用<block>标签进行循环渲染及条件渲染，bolck标签在构建时不会被当作真实的节点编译，bolck标签只支持if和for属性

模板引用

通过element标签引入自定义的模板文件<element name='comp' src='../../common/component/comp.hml'></element>
name属性为引入的组件名称，默认值为hml文件名，大小写不敏感
使用<comp>标签(comp为element中指定的name属性)使用组件 <comp prop1='xxxx' @child1="bindParentVmMethod"></comp>
使用(on|@)child1语法绑定子组件事件，子组件使用this.$emit('child1', { params: '传递参数' })触发事件并进行传值
子组件中使用驼峰命名法命名的事件，在父组件中绑定时需要使用短横线分隔命名形式，例如：@children-event表示绑定子组件的childrenEvent事件，如 @children-event="bindParentVmMethod"

与html的区别

input

<input>标签必须使用</input>标签进行闭合

text

文本内容放在<text>标签中才能呈现

登录后查看更多