HML语法

页面结构

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

数据绑定与vue用法类似

hml:{{ 变量名 }}

js:变量放在data中export default{

data:{

变量名: value

}}

事件绑定类似v-on(在js中绑定的函数和data同级)

hml:

js:放在data后:export default{

data:{

},

clickfunc: function(){

......

}}

列表渲染(for)tid属性指定数组中每个元素的唯一标识,默认值为id,用于加速for循环的重渲染

写法1(都不指定):

写法2(指定元素名称):

写法3(指定索引和元素名称):

条件渲染(if)同基本v-if

if / elif / else及show两种方式,区别同v-if和v-show,if不在vdom中构建,show则构建但不显示

不能同时在一个元素上设置for和if属性

逻辑控制块

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

模板引用通过element标签引入自定义的模板文件

name属性为引入的组件名称,默认值为hml文件名,大小写不敏感

使用标签(comp为element中指定的name属性)使用组件 

使用(on|@)child1语法绑定子组件事件,子组件使用this.$emit('child1', { params: '传递参数' })触发事件并进行传值

子组件中使用驼峰命名法命名的事件,在父组件中绑定时需要使用短横线分隔命名形式,例如:@children-event表示绑定子组件的childrenEvent事件,如 @children-event="bindParentVmMethod"

与html的区别

input

标签必须使用标签进行闭合

text

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

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐