vue.2.4.0.js_一个简单的Vue.js 2.0 MomentJS库-CSDN博客

vue.2.4.0.js

Vue-Moment-lib (vue-moment-lib)

A Vue.js 2.0 MomentJS library

一个Vue.js 2.0 MomentJS库

Make momentjs available in your template and Vue instance. Since it just try to map raw js function, api is same asmomentjs.com. Making it easier to use in your Vue.js projects.

使Momentjs在模板和Vue实例中可用。由于它只是尝试映射原始js函数，因此api与asmomentjs.com相同。使其更易于在Vue.js项目中使用。

It added moment and duration as filters and component instance functions ($moment and $duration).

它添加了矩和持续时间作为过滤器和组件实例函数($ moment和$ duration)。

Generated using vue-cli-template-library.

使用vue-cli-template-library生成。

View demo 查看演示 Download Source 下载源

A Vue.js 2.0 MomentJS library

一个Vue.js 2.0 MomentJS库

Make momentjs available in your template and Vue instance. Since it just try to map raw js function, api is same as momentjs.com. Making it easier to use in your Vue.js projects.

使Momentjs在模板和Vue实例中可用。由于它只是尝试映射原始js函数，因此api与momentjs.com相同。使其更易于在Vue.js项目中使用。

It added moment and duration as filters and component instance functions ($moment and $duration).

它添加了矩和持续时间作为过滤器和组件实例函数($ moment和$ duration)。

Generated using vue-cli-template-library.

使用vue-cli-template-library生成。

安装 (Installation)

npm install vue-moment-lib

vue-moment-lib can be used as a module in both CommonJS and ES modular environments.

vue-moment-lib可以在CommonJS和ES模块化环境中用作模块。

When in non-modular environment, vue-moment-lib will register all the components to vue by itself.

在非模块化环境中，vue-moment-lib将自己注册所有组件到vue。

ES6 (ES6)

//
// Register the whole module with vue
//
import VueMomentLib from 'vue-moment-lib';

// Install this library
Vue.use(VueMomentLib);

普通JS (CommonJS)

//
// Register the whole module with vue
//
var Vue = require('vue');
var VueMomentLib = require('vue-moment-lib');

// Install this library
Vue.use(VueMomentLib);

浏览器 (Browser)

<script src="path/to/vue/vue.min.js"></script>
<script src="path/to/moment/moment.min.js"></script>
<script src="path/to/vue-moment-lib/dist/vue-moment-lib.min.js"></script>
<!-- Filter and moment are registered globally -->

之后，您可以在模板中使用持续时间和矩过滤器，由于第一个参数通过管道传递，因此api略有不同： (After that, you can use the duration and moment filters in your templates, api is slightly different as the first argument is passed through pipe:)

<!-- first argument of moment filter is a parameter for parsing to UTC, it is set by default to false so it is optional when you use default parsing -->

<!-- Local format -->
<span>{{ Date.now() | moment().format("YYYY") }}</span>

<!-- isLocal + custom parsing + custom format -->
<span>{{ "11-14-2018" | moment(false, "MM-DD-YYYY").format("YYYY") }}</span>

<!-- isUTC + custom format -->
<span>{{ Date.now() | moment(true).format("YYYY") }}</span>

<!-- Duration is supported -->
<span>{{ 500 | duration("minutes").humanize() }}</span>

<!-- 1500 milliseconds -->
<span>{{ 1500 | duration("milliseconds").milliseconds() }}</span>

而且，在模板中使用$ duration和$ moment组件实例函数可以真正使用与momentjs相同的API： (And also, use the $duration and $moment component instance functions in your templates to really use the same apis as momentjs:)

<!-- Local format -->
<span>{{ $moment(Date.now()).format("YYYY") }}</span>

<!-- isLocal + custom parsing + custom format -->
<span>{{ $moment("11-14-2018", "MM-DD-YYYY").format("YYYY") }}</span>

<!-- isUTC + custom format -->
<span>{{ $moment.utc(Date.now()).format("YYYY") }}</span>

<!-- Duration is supported -->
<span>{{ $duration(500, "minutes").humanize() }}</span>

<!-- 1500 milliseconds -->
<span>{{ $duration(1500, "milliseconds").milliseconds() }}</span>

要么 (or)

// in your components
methods: {
  now () {
    return this.$moment(Date.now()).format()
  },
  humanize () {
    return this.$duration(500).humanize()
  }
}

// it is also registered as a global function in the Vue instance
// so you can do in vuex store or everywhere else to retrieve the same moment instance you initialized
import Vue from 'vue'
const thisYear = Vue.moment(Date.now()).format("YYYY")

自定义时刻实例 (Custom moment instances)

import yourMoment from 'moment'
import VueMomentLib from 'vue-moment-lib';

//
// customize your moment instance here (locales, config, etc)
//

// Install this library with custom moment instance
Vue.use(VueMomentLib, { moment: yourMoment });