前言
最近有一个说法，如果你看见某个网站的某个功能，你就大概能猜出背后的业务逻辑是怎么样的，以及你能动手开发一个一毛一样的功能，那么你的前端技能算是进阶中高级水平了。比如咱们今天要聊的这个话题：如何用Vue开发一个实时性的时间转换指令？
接下来正文从这开始~
如上图所示（我是截取的某技术社区首页的部分页面），大家看到用红色边框勾选中的时间文字了吧。很多网站发布动态的时候，都会有一个相对本机时间转换后的相对时间。那你知道这个功能实现的背后原理是什么吗？如果有兴趣的，请备好瓜子，茶水，继续往下读。
一般在服务器的存储时间格式是Unix时间戳，比如 2018-01-17 06:00:00的时间戳是1516140000。前端在拿到数据后，将它转换为可持续的时间格式再显示出来。为了显示出实时性，在一些社交类产品中，甚至会实时转换为几秒前、几分钟前、几小时前等不同的格式，因为这样比直接转换为年、月、日、时、分、秒，显得对用户更加友好，体验更人性化。
今天，我们就来实现这样一个Vue自定义指令v-time，将表达式传入的时间戳实时转换为相对时间。为了便于演示效果，我们初始化时定义了两个时间。
首先来看html结构：
<div id="app" v-cloak>
<div v-time="timeNow"></div>
<div v-time="timeBefore"></div>
</div>以及初始化一个Vue实例：
var app = new Vue({
el:'#app',
data:{
timeNow:(new Date()).getTime(),
timeBefore:686219755822
}
})timeNow是目前的时间，timeBefore是一个写死的时间：1991-09-30。
先来分析一下时间转换的逻辑：
1分钟以前，显示“刚刚”。
1分钟~1小时之间，显示“xx分钟前”。
1小时~1天之间，显示“xx小时前”。
1天~1个月（31天）之间，显示“xx天前”。
大于1个月，显示“xx年xx月xx日”。
这样罗列出来，逻辑就一目了然了。为了使判断更简单，我们这里统一使用时间戳进行大小判断。在写指令v-time之前，需要先写一系列与时间相关的函数 ，我们声明一个对象Time，把它们都封装到里面。
var Time = {
//获取当前时间戳
getUnix:function(){
var date = new Date();
return date.getTime();
},
//获取今天0点0分0秒的时间戳
getTodayUnix:function(){
var date = new Date();
