HML语法参考
HML是一套类HTML的标记语言,通过组件,事件构建出页面的内容。页面具备数据绑定、事件绑定、列表渲染、条件渲染和逻辑控制等高级能力。
页面结构
<!-- xxx.hml -->
<div class="item-container">
<text class="item-title">Image Show</text>
<div class="item-content">
<image src="/common/xxx.png" class="image"></image>
</div>
</div>
数据绑定
<!-- xxx.hml -->
<div class="container" onclick="changeText">
<text> {
{content[1]}} </text>
</div>
/*xxx.css*/
.container{
margin: 200px;
}
// xxx.js
export default {
data: {
content: ['Hello World!', 'Welcome to my world!']
},
changeText: function() {
this.content.splice(1, 1, this.content[0]);
}
}
说明
- 针对数组内的数据修改,请使用splice方法生效数据绑定变更。
- hml文件中的js表达式不支持ES6语法。
普通事件绑定
事件通过’on’或者’@'绑定在组件上,当组件触发事件时会执行JS文件中对应的事件处理函数。
事件支持的写法有:
- “funcName”:funcName为事件回调函数名(在JS文件中定义相应的函数实现)。
- “funcName(a,b)”:函数参数例如a,b可以是常量,或者是在JS文件中的data中定义的变量(前面不用写this.)。
- 示例
<!-- xxx.hml -->
<div class="container">
<text class="title">{
{count}}</text>
<div class="box">
<input type="button" class="btn" value="increase" onclick="increase" />
<input type="button" class="btn" value="decrease" @click="decrease" />
<!-- 传递额外参数 -->
<input type="button" class="btn" value="double" @click="multiply(2)" />
<input type="button" class="btn" value="decuple" @click="multiply(10)" />
<input type="button" class="btn" value="square" @click="multiply(count)" />
</div>
</div>
// xxx.js
export default {
data: {
count: 0
},
increase() {
this.count++;
},
decrease() {
this.count--;
},
multiply(multiplier) {
this.count = multiplier * this.count;
}
};
/* xxx.css */
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
left: 0px;
top: 0px;
width: 454px;
height: 454px;
}
.title {
font-size: 30px;
text-align: center;
width: 200px;
height: 100px;
}
.box {
width: 454px;
height: 200px;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.btn {
width: 200px;
border-radius: 0;
margin-top: 10px;
margin-left: 10px;
}