轻量级JS UI框架 —— HML语法

内容纲要

DOM

文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容。DOM 将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合。简言之,它会将web页面和脚本或程序语言连接起来。

@[toc]

页面结构

  • HML文件采用定义页面元素的方法定义app页面组成,JS UI框架处理时生成页面的对象文档模型(DOM)
  • 通过DOM,JS可动态处理HML文件中的内容结构和样式

数据绑定

  • 可在需要进行数据后续设置变更的地方进行数据绑定操作
    <div>
    <text>{{content[1]}}</text>
    </div>
  • 这里text文本框的数据来自于JS文件
    export default
    {
    data:
    {
        content: ['Hello World!', 'Welcome to my world!']
    }
    }

事件绑定

  • 日常交互方式主要是手指的触摸事件,事件通过'on'或者'@'绑定在组件上,组件触发事件时执行JS文件中对应的事件回调函数
    <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="square" @click="multiply(count)" />
    </div>
    </div>

列表渲染

  • 常应用在需要对同一类相同元素的显示,如联系人、图片库等
    <div class="array-container">
    <div for="{{array}}" tid="id" onclick="changeText">
    <text>{{$idx}}.{{$item.name}}</text>
    </div>
    <div for="{{value in array}}" tid="id" onclick="changeText">
    <text>{{$idx}}.{{value.name}}</text>
    </div>
    <div for="{{(index, value) in array}}" tid="id" onlick="changeText">
    <text>{{index}}.{{value.name}}</text>
    </div>
    </div>

条件渲染

  • 条件渲染分为2种——if/elif/elseshow
  • 区别:
    ① if为false时,组件不会在vdom(virtual dom)中构建和渲染;show为false时同样不会渲染但会在vdom中构建
    ② 使用第一种方式时,节点必须是兄弟节点,否则编译不通过

    <text if="{{showit}}">Hello-TV</text>
    <text elif="{{display}}">Hello-Wearable</text>
    <text else>Hello-World</text>

留下评论

您的电子邮箱地址不会被公开。