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

内容纲要

语法

  • this关键字
  • 模块声明
    import router from '@system.router';   // 从系统导包
  • 代码引用
    impott utils from '../../common/utils.js'; // 从外部导包

对象

  • JS文件包括自定义对象、应用对象、页面对象等
  • 应用对象为$app,其属性包括Object类型的$def,可使用this.$app.$def获取app.js中暴露的对象
    // app.js
    export default
    {
    globalData:
    {
        appData: 'appData',
        appVersion: '2.0',
    },
    };
    // index.js
    export default
    {
    data:
    {
        appData: 'localData',
        appVersion: '1.0',
    },
    onInit()
    {
        this.appData = this.$app.$def.globalData.appData;
        this.appVersion = this.$app.$def.globalData.appVersion;
    },
    };

页面对象

对象类型描述
dataObject/Function类型是对象或函数,如果是函数,返回值必须是对象
$refsObiect持有注册过ref属性的DOM元素或子组件事例的对象
privateObjectprivate下的属性只能由当前页面修改
publicObjectpublic下的属性的行为与data保持一致
propsArray/Objectprops用于组件之间的通信
computedObject用于读取或设置前预先处理,计算属性的结果会被缓存

$refs&computed

<div class="container">
    <image-animator class="image-player"
    ref="animator" images="{{images}}"
    duration="1s"></image-animator>
</div>
computed:
{
    message()
    {
        return this.time + ' ' + this.objTitle;
    },
    notice:
    {
        get()
        {
            return this,time;
        },
        set(newValue)
        {
            this.time = newValue;
        },
    },
},

onClick()
{
    console.info('get click event ' + this.massage);
    this.notice = 'Tomorrow';
    console.info(this.time);
},

handleClick()
{
    const animator = this.$refs.animator;
}

方法

  • 数据方法:setdelete
方法参数描述
$setkey: string, value: any添加新的数据属性或修改已有数据属性
$deletekey: string删除数据属性
export default
{
    data:
    {
        keyMap:
        {
            OS: 'HarmonyOS',
            Version: '2.0',
        },
    },
    getAppVersion()
    {
        this.$set('keyMap.Version', '3.0');
        console.info("keyMap.Version = " + this.keyMap.Version);
        this.$delete('keyMap');
        console.info("keyMap.Version = " + this.keyMap);
    }
}
  • 公共方法:$element
    <div class="container">
    <button onclick="handleClick">clickme</button>
    <image-animator class="image-player" id="animator" images="{{images}}" duration="1s"></image-animator>
    </div>
    handleClick
    {
    const animator = this.$element('animator');
    }

留下评论

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