前言
最近有乙個說法，如果你看見某個**的某個功能，你就大概能猜出背後的業務邏輯是怎麼樣的，以及你能動手開發乙個一毛一樣的功能，那麼你的前端技能算是高階中高階水平了www.cppcns.com。比如咱們今天要聊的這個話題：如何用vue開發乙個實時性的時間轉換指令？
接下來正文從這開始~
如上圖所示（我是擷取的某技術社群首頁的部分頁面），大家看到用紅色邊框勾選中的時間文字了吧。很多**發布動態的時候，都會有乙個相對本機時間轉換後的相對時間。那你知道這個功能實現的背後原理是什麼嗎？如果有興趣的，請備好瓜子，茶水，繼續往下讀。
一般在伺服器的儲存時間格式是unix時間戳，比如 2018-01-17 06:00:00的時間戳是1516140000。前端在拿到資料後，將它轉換為可持續的時間格式再顯示出來。為了顯示出實時性，在一些社交類產品中，甚至會實時轉換為幾秒前、幾分鐘前、幾小時前等不同的格式，因為這樣比直接轉換為年、月、日、時、分、秒，顯得對使用者更加友好，體驗更人性化。
今天，我們就來實現這樣乙個vue自定義指令v-time，將表示式傳入的時間戳實時轉換為相對時間。為了便於演示效果，我們初始化時定義了兩個時間。
首先來看html結構：
以及初始化乙個vue例項：
var app = new vue(
})timenow是目前的時間，timebefore是乙個寫死的時間：1991-09-30。
先來分析一下時間轉換的邏輯：
這樣羅列出來，邏輯就一目了然了。為了使判斷更簡單，我們這裡統一使用時間戳進行大小判斷。在寫指令v-time之前，需要先寫一系列與時間相關的函式 ，我們宣告乙個物件time，把它們都封裝到裡ndigb面。
var time = ,
//獲取今天0點0分0秒的時間戳
gettodayunix:function(),
//獲取今年1月1日0點0分0秒的時間戳
getyearunix:function(),
//獲取標準年月日
getlastdate:function(time),
//轉換時間
getformattime:function(timestamp)else if(math.floor(timer/60) <= 0)else if(timer < 3600)else if(timer >= 3600 && (timestamp - today >= 0))else if(timer/86400 <= 31)else
return tip;}}
當然，如果你對j**ascript的date型別不太了解，可以先去runoob.com上面了解下。
接著說回來，time.getformattime()方法就是自定義指令v-time所需要的，引數為毫秒級時間戳，返回已經整理好的時間格式的字串。
最後，來看我們如何用vue自定義乙個指令v-time：
vue.directive('time',, 60000)
程式設計客棧 },
unbind:function(el)
})在bind鉤子裡，將指令v-time表示式的值binding.value作為引數傳入time.getformattime()方法中得到格式化時間，在通過el.innerhtml寫入指令所在元素。定時器el.__timeout__每分鐘觸發一次，更新時間，並且在unbind鉤子裡清除掉。
你可能會問，這個binding.value是什麼？
當然，你可以通過console.log(binding)方法在控制台列印一下，就一目了然了。
在這裡，我先補充下，自定義指令的選項是由幾個鉤子函式組成的，有bind、insert、update、componentupdated、unbind。而其中的bind和unbind只呼叫一次。每個鉤子函式都有幾個引數可用ndigb，比如我們上面用到的el和binding。
el指令所繫結的元素可以用來直接操作dom。而binding是乙個物件，包含很多屬性，如上圖所示：
總結在編寫自定義指令時，給dom繫結一次性事件等初始動作，建議在bind鉤子內完成，同時要在unbind內解除相關繫結。
本文標題: 使用vue開發乙個實時性時間轉換指令
本文位址:
使用vue開發乙個專案（一）
在學習了vue基礎之後，為了能夠在vue開發專案上有乙個真正的提公升，所以打算用vue來做乙個完整的專案，將其記錄下來 首先建立乙個工程資料夾，在這個資料夾下開啟命令列工具，在命令列中敲入以下命令安裝上vue的腳手架 cnpm install g vue cli 全域性安裝vue clivue in...
快速搭建乙個vue開發環境
常規的搭建就是從npm到vue到webpack這樣乙個乙個的來，這樣一套下來說不上覆雜但是也不簡單。之前公司的vue後台專案 我還是寫的輕車熟路的，因為前端同事已經把架子搭好了，環境配置的絲般順滑，你只需要vue 基本上沒有去關注基礎架子，這不，某天我也想用vue做個 試下，才發現基礎架子配的東西還...
開發乙個時間小程式
為什麼不自己動手量身打造乙個呢？行動起來。很簡單 需要展示時間的城市初定 加州 紐約，再加北京做對比 需要顯示具體的時分秒，和年月日 需要實時變化 在其他國家也能正確展示時間 這個小程式的核心是時間的處理。如何得到其他地區的時刻資訊？這還不簡單？先獲取本地時刻，然後加上或者減去另外乙個地點與國內 北...