鸿蒙新手入门教程,鸿蒙OS开发学习教程
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
文本内容放在标签中才能呈现
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 文本内容放在标签中才能呈现