vue-moment 적용 및 사용 방법

VueMoment는 VueJS 프레임 워크에서 사용하는 날짜 시간과 관련된 라이브러리다. 본래 moment라는 라이브러리가 있고 이를 Vue에서 사용하기 쉽도록 수정 배포된 버전이고 이를 이용하면 날짜와 시간을 매우 편리하게 사용할 수 있기 때문에 많은 이용자들이 있다. 이제부터 Vue 에서 이를 사용하기 위한 매우 쉬운 방법을 이야기 해 보려고 한다.

vue-moment를 설치한다.

$ npm install vue-moment

그리고 require를 사용한다면 이렇게 쉽게 적용할 수가 있다.

Vue.use(require('vue-moment'));

require를 사용하지 않는다면 이렇게 적용하자.

import VueMoment from 'vue-moment'
Vue.use(VueMoment);

vue-moment를 사용해 보자.

위와 같이 적용을 했다면 vue에서는 Vue.$moment 로 호출하여 사용할 수 있다. 스크립트에서는 this.$moment 를 사용하고 template markup 에서는 {{$moment}}를 사용하면 된다.

혹시 따라 했는데 적용되지 않았다면 $moment 대신 moment를 호출해 보자.

가장 기본적인 사용방법은 아래와 같다.

<!-- 현재시간 표현 -->
<span>{{$moment().format('YYYY-MM-DD')}}</span>

<!-- 데이터 시간 표현 -->
<span>{{$moment(item.dateTime).format('YYYY-MM-DD')}}</span>

위와 같은 방법으로 Long, Date 혹은 String 타입의 데이터를 활용할 수 있다.

String 데이터를 파싱하기

String 현태의 데이터를 파싱할 때는 다음과 같은 형식을 사용할 수 있다.

## An ISO 8601 string requires a date part.
2013-02-08  # A calendar date part
2013-W06-5  # A week date part
2013-039    # An ordinal date part

20130208    # Basic (short) full date
2013W065    # Basic (short) week, weekday
2013W06     # Basic (short) week only
2013050     # Basic (short) ordinal date


## A time part can also be included,
## separated from the date part by a space or an uppercase T.
2013-02-08T09            # An hour time part separated by a T
2013-02-08 09            # An hour time part separated by a space
2013-02-08 09:30         # An hour and minute time part
2013-02-08 0926      # An hour, minute, and second time part
2013-02-08 0926.123  # An hour, minute, second, and millisecond time part
2013-02-08 2400.000  # hour 24, minute, second, millisecond equal 0 means next day at midnight

20130208T080910,123      # Short date and time up to ms, separated by comma
20130208T080910.123      # Short date and time up to ms
20130208T080910          # Short date and time up to seconds
20130208T0809            # Short date and time up to minutes
20130208T08              # Short date and time, hours only


## Any of the date parts can have a time part.
2013-02-08 09  # A calendar date part and hour time part
2013-W06-5 09  # A week date part and hour time part
2013-039 09    # An ordinal date part and hour time part


## If a time part is included,
## an offset from UTC can also be included as +-HH:mm, +-HHmm, +-HH or Z.
2013-02-08 09+07:00            # +-HH:mm
2013-02-08 09-0100             # +-HHmm
2013-02-08 09Z                 # Z
2013-02-08 0926.123+07:00  # +-HH:mm
2013-02-08 0926.123+07     # +-HH


## The RFC 2822 date time format
6 Mar 17 21:22 UT
6 Mar 17 2123 UT
6 Mar 2017 2123 GMT
06 Mar 2017 2123 Z
Mon 06 Mar 2017 2123 z
Mon, 06 Mar 2017 2123 +0000

format (포멧하기)

데이터를 표현할 때 인자를 어떻게 주느냐에 따라 내가 원하는 형태로 만들 수 있다.

$moment("12-25-1995", "MM-DD-YYYY");

InputExampleDescription

YYYY	2014	4 자릿수 연도
YY	14	2 자릿수 연도
Y	-25	Year with any number of digits and sign
Q	1..4	연도를 쿼터로 나누어 표현
M MM	1..12	1, 2 자릿수 월
MMM MMMM	Jan..December	3글자 월 이름, 월의 전체 이름
D DD	1..31	Day of month
Do	1st..31st	Day of month with ordinal
DDD DDDD	1..365	Day of year
X	1410715640.579	Unix timestamp
x	1410715640579	Unix ms timestamp

---

더 깊이 들어가기

위와 같은 방식으로 대부분 원하는 대로 사용 가능 할 것이다. 하지만 이외의 더욱 깊이 알고 싶거나 자신이 원하는 방식이 아닐 경우 필요할 때마다 아래의 사이트를 이용하여 정보를 찾아 보고 적용할 수 있다.

https://momentjs.com/docs/