Vuejs ile Moment.js

Aşağıdaki gibi kullanarak tarih saatini yazdırmaya çalışıyorum vue-for

{{ moment().format('MMMM Do YYYY, h:mm:ss a') }}

ama görünmüyor. Bu sadece bir boşluk. Vue'da anı nasıl kullanmayı deneyebilirim?

Kodunuzla vue.js, moment()yönteme kapsamından erişmeye çalışıyor .

Bu nedenle aşağıdaki gibi bir yöntem kullanmalısınız:

methods: {
  moment: function () {
    return moment();
  }
},

Bir tarih geçirmek istiyorsanız moment.js, filtreleri kullanmanızı öneririm:

filters: {
  moment: function (date) {
    return moment(date).format('MMMM Do YYYY, h:mm:ss a');
  }
}

<span>{{ date | moment }}</span>

[Demo]

Projeniz tek sayfalık bir uygulamaysa (örneğin vue init webpack myproject, tarafından oluşturulan proje ), bu yolun en sezgisel ve basit olduğunu buldum:

In main.js

import moment from 'moment'

Vue.prototype.moment = moment

Ardından şablonunuzda şunu kullanın:

<span>{{moment(date).format('YYYY-MM-DD')}}</span>

Senin de package.jsoniçinde "dependencies"bölüm eklenti an:

"dependencies": {
  "moment": "^2.15.2",
  ...
}

Anı kullanmak istediğiniz bileşende içe aktarın:

<script>
import moment from 'moment'
...

Ve aynı bileşende hesaplanmış bir özellik ekleyin:

computed: {
  timestamp: function () {
    return moment(this.<model>.attributes['created-at']).format('YYYY-MM-DD [at] hh:mm')
  }
}

Ve sonra bu bileşenin şablonunda:

<p>{{ timestamp }}</p>

Tek dosya bileşeninde Vue 2.0 ile çalışmasını sağladım.

npm install moment vue'nun kurulu olduğu klasörde

<template>
  <div v-for="meta in order.meta">
    {{ getHumanDate(meta.value.date) }}
  </div>
</template>
<script>
    import moment from 'moment';
    export default {
         methods: {
            getHumanDate : function (date) {
                return moment(date, 'YYYY-MM-DD').format('DD/MM/YYYY');
            }
        }
    }
</script>

İşte Vue için bir 3. taraf sarıcı kitaplığı kullanan bir örnek vue-moment.

Moment örneğini Vue'nun kök kapsamına bağlamanın yanı sıra, bu kitaplık şunları içerir momentve durationfiltreler.

Bu örnek yerelleştirmeyi içerir ve NodeJS'nin CommonJS modül sisteminin gerektirdiği yerine resmi bir standart olan ES6 modül içe aktarımlarını kullanır.

import Vue from 'vue';

import moment from 'moment';
import VueMoment from 'vue-moment';

// Load Locales ('en' comes loaded by default)
require('moment/locale/es');

// Choose Locale
moment.locale('es');

Vue.use(VueMoment, { moment });

Artık Moment örneğini herhangi bir ek işaretleme olmadan doğrudan Vue şablonlarınızda kullanabilirsiniz:

<small>Copyright {{ $moment().year() }}</small>

Veya filtreler:

<span>{{ 3600000 | duration('humanize') }}</span>
<!-- "an hour" -->
<span>{{ [2, 'years'] | duration('add', 1, 'year') | duration('humanize') }}</span>
<!-- "3 years" -->

// plugins/moment.js

import moment from 'moment';

moment.locale('ru');

export default function install (Vue) {
  Object.defineProperties(Vue.prototype, {
    $moment: {
      get () {
        return moment;
      }
    }
  })
}

// main.js

import moment from './plugins/moment.js';
Vue.use(moment);

// use this.$moment in your components

Sadece moment modülünü içe aktarırdım, ardından moment () mantığımı işlemek ve şablonda referans verilen bir değeri döndürmek için hesaplanan bir işlevi kullanırdım.

Bunu kullanmadım ve bu yüzden etkinliği hakkında konuşamasam da, alternatif bir değerlendirme için https://github.com/brockpetrie/vue-moment buldum

vue-an

vue projesi için çok güzel bir eklenti ve bileşenler ve mevcut kodla çok sorunsuz çalışıyor. Anların tadını çıkarın ... 😍

// in your main.js
Vue.use(require('vue-moment'));
// and use in component
{{'2019-10-03 14:02:22' | moment("calendar")}}
// or like this
{{created_at | moment("calendar")}}