vue自定义指令

介绍：文章、博文发布网站对文章发布时间的tip

index.html->body

<div id="app">
  <div v-time="nowTime">
    </div>
  <div v-time="beforeTime"></div>
</div>

index.html->script

<script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script>
    var Time = {
      // 获取当前天0时点0分0秒0毫秒时间戳，后面没用到（不合习惯）
      getTodayUnix() {
        let date = new Date()
        date.setHours(0)
        date.setMinutes(0)
        date.setSeconds(0)
        date.setMilliseconds(0)
        return date.getTime()
      },
      //获取当前时间戳
      _getUnix(){
        var date = new Date();
        return date.getTime();
      },
      //获取当年1月1日0时0分0秒0毫秒时间戳，后面没用到（不合习惯）
      getYearUnix(){
        let date = new Date()
        date.setMonth(0)
        date.setDate(1)
        date.setHours(0)
        date.setMinutes(0)
        date.setSeconds(0)
        date.setMilliseconds(0)
        return date.getTime()
      },
      // 获取标准年月日
      getListUnix(time){
        let date = new Date(time)
        let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
        let day = date.getDate() < 10 ? '0' + date.getDate() :date.getDate()
        return date.getFullYear() + '-' + month + '-' + day
      },
      // 转换时间
      getFormatTime(timestamp){
        let now = this._getUnix()
        let timer = (now - timestamp)/1000
        let tip = ''
        if (timer <= 0) {
          tip = '刚刚'
        } else if (timer < 60 && timer > 0) {
          tip = '刚刚'
        } else if (timer >= 60 && timer < 3600) {
          tip = Math.floor(timer/60) + '分钟前'
        } else if (timer >= 3600 && timer < 86400 ) {
          tip = Math.floor(timer/3600) + '小时前'
        } else if (timer > 86400 && Math.floor(timer/86400) < 31) {
          tip = Math.floor(timer/86400) + '天前'
        } else {
          tip = this.getListUnix(timestamp)
        }
        return tip
      }
    }
    Vue.directive('time',{                                       //自定义全局指令，名称：time
      bind(el, binding) {                                        //bind钩子函数,第一次绑定到元素上时调用，只调用一次;el:将要挂载的元素，
        el.innerHTML = Time.getFormatTime(binding.value)           binding:一个JavaScript对象，包含了一些属性
        el.__timeout__ = setInterval(function(){
          el.innerHTML = Time.getFormatTime(binding.value)
        }, 60000)                                                //设置每分钟更新一次
      },
      unbind(el) {                                               //解绑时调用，只调用一次
        clearInterval(el.__timeout__)
        delete el.__timeout__
      }
     })
    new Vue({
      el: '#app',
      data: {
        nowTime: (new Date()).getTime(),                         //获取当前时间的时间戳
        beforeTime: 1522000000000                                //随便一个时间戳
      }
    })
  </script>

结果：

一分钟后