vue 개발의moment 소개 및 사용

앞말

일상적인 개발에서 우리는 종종 다음과 같은 몇 가지 장면을 만날 수 있다.
.2021년 5월 11일 화요일 오후 6시 42분

24시간 전의 시간을 취하는 등 날짜를 처리해야 한다.

이때 js의 원래 new Date () 로 처리하는 것은 좀 번거롭기 때문에 우리는 모멘트라는 라이브러리를 찾았다

1. 모멘트가 뭐예요?

moment는 JavaScript 날짜 처리 라이브러리입니다.
설치 moment
이전에 설치했다면 더 이상 설치할 필요가 없다.

npm install moment -- save

주: 다음 모든 시간 현재 시간: 2021/05/11/18:42 화요일
1. 날짜 포맷:

moment().format('MMMM Do YYYY, h:mm:ss a'); //   11  2021, 6:42:31  
moment().format('dddd'); //  
moment().format("MMM Do YY"); // 5  11  21
moment().format('YYYY [escaped] YYYY'); // 2021 escaped 2021
moment().format(); //2021-05-11T18:06:42+08:00

2. 상대 시간:

moment("20111031", "YYYYMMDD").fromNow(); // 2011/10/31 ： 10  
moment("20120620", "YYYYMMDD").fromNow(); // 2012/06/20 ： 9  
moment().startOf('day').fromNow(); // ：2021/05/11/00:00:00 ： 19  
moment().endOf('day').fromNow(); // ：2021/05/11/24:00:00 ： 5  
moment().startOf('hour').fromNow(); // ：2021/05/11/18:00:00 ： 42 

3. 달력 시간:

moment().subtract(10, 'days').calendar(); //  10 ： 2021/05/01
moment().subtract(6, 'days').calendar(); //  6 ：  18:42
moment().subtract(3, 'days').calendar(); //  3 ：  18:42
moment().subtract(1, 'days').calendar(); //  1 ：  18:42
moment().calendar(); //  18:42
moment().add(1, 'days').calendar(); //  1 ：  18:42
moment().add(3, 'days').calendar(); //  3 ：  18:42
moment().add(10, 'days').calendar(); //  10 ： 2021/05/21

4. 다국어 지원:

moment.locale(); // zh-cn
moment().format('LT'); // 18:42
moment().format('LTS'); // 18:42:31
moment().format('L'); // 2021/05/11
moment().format('l'); // 2021/5/11
moment().format('LL'); // 2021 5 11 
moment().format('ll'); // 2021 5 11 
moment().format('LLL'); // 2021 5 11 6 42 
moment().format('lll'); // 2021 5 11  18:42
moment().format('LLLL'); // 2021 5 11 6 42 
moment().format('llll'); // 2021 5 11  18:42

2. 사용 단계(예: 기본 조회 시간 24시간 전~현재 시간)

1. 라이브러리 도입

$ npm install moment --save

2. 메인에서js에서 전역 도입 (사용하는 파일에 단독으로 도입할 수도 있고 구체적으로 수요를 볼 수도 있음)

import moment from "moment"
Vue.prototype.$moment = moment;

3. 사용 날짜가 필요한 곳에 사용
HTML에서:

 <el-date-picker
    	v-model="timeRange"
        type="datetimerange"
        range-separator=" "
        start-placeholder=" "
        end-placeholder=" ">
 </el-date-picker>

JS:

 data() {
      return {
         timeRange:[],
      }
   },
  mounted(){
        let start = this.$moment()
            .subtract('1', 'd')
            .format('YYYY-MM-DD HH:mm:ss') // 1 （24 ）：2021-05-10 18:42:53
        let end = this.$moment().format('YYYY-MM-DD HH:mm:ss') // ：2021-05-11 18:42:53
        this.timeRange=[start,end]
   },  

3. 날짜 형식

형식
함의
예를 들다
비고
yyyy
연중
2021
YYY
M
달.
일
보충하지 않다
MM
달.
01
d
하루
이
보충하지 않다
dd
하루
02
dddd
요일
화요일
H
시간
삼
24시간제;보충하지 않다
HH
시간
십팔
24시간제
h
시간
삼
12시간제, A 또는 a와 사용해야 한다.보충하지 않다
hh
시간
03
12시간제
m
분
사
보충하지 않다
mm
분
04
s
초.
오
보충하지 않다
ss
초.
05
A
AM/PM
AM
format만 사용 가능, 대문자
a
am/pm
am
format만 사용 가능, 소문자
구체적인 방법과 파라미터는 상세하게 볼 수 있다moment 공식 문서

4. new Date() 관련

날짜를 이렇게 많이 썼으니 new Date () 도 함께 정리하자

	let time = new Date();  //   Tue May 11 2021 18:42:51 GMT+0800 ( )

    let year = time.getFullYear();  //  2021
    let month = time.getMonth() + 1;  //   5
    let day = time.getDate();    //   11

    let h = time.getHours();   //   18
    let m = time.getMinutes();  //   42
    let s = time.getSeconds();    //   51

    let weekDay = time.getDay();  //   2

총결산

이 vue 개발의moment에 대한 소개와 사용에 관한 글은 여기까지 소개되었습니다. 더 많은 vue moment 사용 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!