# Vue增强

fes.js基于Vue.js，对.vue单文件组件做了一些增强，扩展了一些配置和内置过滤器等。

# 实例

# FesFesx

FesFesx是全局状态容器，独立于组件之外的一个Map对象，在任何组件中可以通过this.FesFesx使用

<template>
    <div class="article">
        {{FesFesx.data}}
    </div>
</template>
<script>
    export default {
        FesReady(){
            this.FesFesx.set("data", 1)
        }
    }
</script>

# FesMap

FesMap是数据字典容器，在任何组件中可以通过this.FesMap使用

<template>
    <div class="article">
        {{data | map(FesMap['xxx'])}}
    </div>
</template>

# FesEnv

FesEnv的引用，具体Api请参考api-FesEnv

# FesStorage

FesStorage的引用，具体Api请参考api-FesStorage

# FesUtil

FesUtil的引用，具体Api请参考api-FesUtil

# FesApi

FesApi的引用，具体Api请参考api-FesApi

# 选项

# FesLeft

控制页面的左侧是否显示，详情可见全局组件

# FesHeader

控制页面的顶部(FesHeader.vue)是否显示，详情可见全局组件

# FesData

参考Vue.js的data (opens new window)，目前两者使用起来几乎一致。假如未来Vue升级不兼容data时，使用FesData会尽可能保证兼容。

export default {
    FesData(){
        return {
            a: 1,
            b: 2
        }
    }
}

# FesSyncData

异步响应数据是指当vue实例初始化时把通过接口查询到的数据挂载在FesData上，响应化。

export default {
    FesSyncData: {
        data: ["/query", {
            max: 100,
            min: 1
        }]
    },
}

给FesData添加一个属性data，值是"/query"查询到的结果。 { max: 100, min: 1} 是查询条件，路由参数transition.to.params 和transition.to.query 也会当作参数跟自定义参数一起传给后台。

# FesCreated

当Vue实例创建完后立即调用，用法类似Vue的created (opens new window)

# FesReady

当Vue实例被挂载后调用立即调用，用法类似Vue的mounted (opens new window)

# FesBeforeDestroy

当Vue实例销毁之前调用。在这一步，实例仍然完全可用。用法类似Vue的beforeDestroy (opens new window)

# FesDestroy

当Vue实例销毁后调用。在这一步，实例仍然完全可用。用法类似Vue的destroyed (opens new window)

# 过滤器

# date

把时间戳转换成日期，日期格式默认为yyyy-MM-dd hh:mm:ss

<template>
    {{date | date}}
</template>
<script>
export default {
    FesData(){
        return {
            date: new Date().getTime()
        }
    }
}
</script>

日期带参数：

{{date | date('yyyy-MM-dd')}}

# money

金额过滤器，把数字100000转换成金额100,000.00

<template>
    {{money | money}}
</template>
<script>
export default {
    FesData: {
        money: 100000,
    }
}
</script>

# card

银行卡过滤器，把数字11122233242323 转换成 1112 2233 2423 23

<template>
    {{card | card}}
</template>
<script>
    export default {
        FesData: {
            card: "11122233242323",
        }
    }
</script>

# safety

给关键信息打码，把身份证号42222991018719191转换成4222***191

<template>
    {{safety | safety(4,3)}}
</template>
<script>
    export default {
        FesData: {
            safety: "42222991018719191",
        }
    }
</script>

参数表示保留几位不加密，第一个参数为前几位不加密，第二个参数为后几位不加密。

# map

数据字典过滤器

首先定义数据字典：

export default {
    map: {
        status: [["1", "成功"], ["2", "失败"]],
    }
};

在页面中使用：

<template>
    {{map | map(FesMap.status)}}
</template>
<script type="text/ecmascript-6">
    export default {
        FesData: {
            map: "1"
        }
    }
</script>

← 国际化单元测试 →