结合Vue、node、mongodb讲述Date的应用

结合Vue、node、mongodb讲述时间

作者：LittleLuckLin
介绍： 本文是作者在使用vue页面中使用时间对象后，扩展学习的如何在后台处理时间相关数据，会以循序渐进的方式，讲述时间在vue和mongodb中的使用。希望分享出来加深对知识点的理解。有理解错误的地方欢迎指出！

可能本篇文章的知识点比较基础（作者需要努力努力再努力），可以抱着回忆知识点的心态来看待本文哈哈。

在vue页面上展示时间

简单地将时间输出到页面上

<!--html-->
<template>
  <div id="app">
    <p>现在的时间是: "{
  { t }}"</p>
  </div>
</template>

• 通过浏览器的console，获取时间戳。

+new Date()

1583572995496

<!--script-->
data(){
    return{
      t:1583572995496
      }
}

不过现在页面上输出的是时间戳，需要将它格式化一下输出。

• 利用filter过滤器函数，为时间换上新装，格式化时间。

Tip: 为什么用filter而不是用computed？

因为filter 无法缓存，调用频率高，适合在格式发生变化，类似时间的转换，汇率的转换之类的，数据本身不变的一般就用filter。

而computed 计算属性背后的处理逻辑比较复杂，适合在复杂的数据转换、统计计算等时候使用。

<div id="app">
    现在的时间是 {
  { t | format_date }}  //使用filter，要使用管道的方式为filter传参
</div>

管道，用法和 linux 管道里面的是一样的，上一个的输出是下一个执行的输入

<!--script-->
<!--filters可以有很多个的-->
filters:{
    format_data(value){ //根据原来的date，格式化一下
        const date = new Date(value); //将时间戳交给一个new Date()，它会将
        return `${date.getFullYear()} 年 ${date.getMonth()+1}月 ${date.getDate() }日`
     }
  }

1. const date = new Date(value); 将时间戳交给一个new Date()，它会变成一个日期对象。
2. 通过日期对象的方法，返回年月日。如date.getFullYear()返回年份，注意月份是从0开始的，所以要加上一。

升级一下

• 过滤器还可以全局声明，直接注册在vue上，就不用在每个组件中都声明了。

<!--main.js-->
Vue.filter('format_date',function format_date(value){ //后面是一个过滤器的回调函数
  const date =new Date(value);
  console.log(date);
  return `${date.getFullYear()} 年 ${date.getMonth()+1}月 ${date.getDate() }日 ${date.getHours()} 时 ${date.getMinutes()} 分 ${date.getSeconds()} 秒`;
})

Moment

• 除了用日期对象的方法将日期格式化，还能用