Develop a real-time time conversion instruction using VUE


There is a saying recently, if you see a feature of a website, you can probably guess how the business logic behind, and you can Hand developed a hair like a hair, then your front-end skill is advanced in advance. For example, let’s talk about this topic today: How to develop a real-time time conversion instruction with VUE?

Next, the text starts from this ~

As shown in the figure (I am a part of the page of a technical community home page), everyone can see Red border checks the time text. When many websites are dynamically, there will be a relative time after conversion of this machine. Then do you know what the principle behind this feature is? If you are interested, please prepare your melon, tea, continue to read.

使用Vue开发一个实时性时间转换指令 Generally in the storage time format of the server is a UNIX timestamp, such as 2018-01-17 06:00:00 timestamp is 1516140000. After the front end is got, convert it to a sustainable time format again. In order to show real-time, in some social products, it will even be converted to a few seconds ago, a few minutes ago, a few hours ago, because this is more than the direct conversion to the year, month, day, time, minute, Seconds, it seems more user-friendly to users.

Today, let’s implement such a Vue custom instruction V-Time, which transforms the timestamp incoming in the expression to a relative time. In order to facilitate the demo, we will define two times when we initialize.

and initialize an Vue instance:
VAR App = New Vue ({EL: ‘# app’, data: {timeout: (New Date)). getTime (), TimeBefore: 686219755822}})

TimeNow is current time, TimeBefore is a write time: 1991-09-30.

First analyze the logic of time conversion:
 1 minute ago, it shows "just".  1 minute ~ 1 hour, display "XX minutes".  The "XX Hour Front" is displayed between 1 hour to 1 day. 
A 1 day to 1 month (31 days) shows “XX days”.
greater than 1 month, show “XX Year XX Yue XX Day”.

Such Russen, logic is at a glance. In order to make the judgment simpler, we uniformly use the timestamp to determine the size. Before writing the command V-Time, you need to write a series of time-related functions, we declare an object Time, and package them into it.

    VAR TIME = {// Gets the current timestamp getUnix: function () {var Date = new date (); returnate.getime ();}, // Get today 0:05 seconds of timestamp gettoDayunix: function () {var Date = new Date (); Date.sethours (0); Date.setSeconds (0); Date.setSeconds (0); Date.SETMILLISECONDS 0); Return Date.GetTime ();}, // Get January 1 0:05 0 seconds this year, 0:0:0:0:01 () {var Date = new Date (); Date.SetMonth (0); Date.SetDate (1) Date.sethours (0); Date.SetMinutes (0); Date.setSeconds (0); Date.SetMilliseConds (0); returnate.gettime ();}, // Get Standard Annual Moon GetlastDate: Function (Time ) {var Date (time); var month = Date.getMonth () + 1
  • = 3600 && (TimeStamp – Today> = 0)) {TIP = Math.Floor (TIMER / 3600) + ‘Hour Former ‘;} else if (Timer / 86400
  • If you don’t know how to know the Date type of JavaScript, you can go to to understand.
  • Next, the time.getformattime () method is required to customize the command V-Time, the parameter is a millisecond timestamp, returns a character that has been organized. Strings.
  • Finally, how do we use Vue to customize a command V-time:

Vue.directive (‘Time’, {Bind: Function (EL, BINDING) {El.innerHtml = Time.GetFormattime (Binding.Value); EL .__ Timeout__ = setInterval (Function () {El.innerHtml = Time.GetFormattime Binding.Value);}, 60000)}, unbind: function (el) {ClearInterval (EL .__ Timeout__); delete el .__ timeout__;}})
  < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
        var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
        return date.getFullYear() + '-' + month + '-' + day;
        var now = this.getUnix(); // 当前时间戳
        var today = this.getTodayUnix(); // 今天0点的时间戳
        var year = this.getYearUnix(); // 今年0点的时间戳
        var timer = (now - timestamp) / 1000; // 转换为秒级时间戳
        var tip = '';

        if(timer <= 0){
          tip = '刚刚';
        }else if(Math.floor(timer/60) <= 0){
          tip = '刚刚';
        }else if(timer  <= 31){
          tip = Math.ceil(timer/86400) + '天前';
          tip = this.getLastDate(timestamp);
        return tip;
in Bind In the hook, the value BINDING.VALUE of the command V-Time expression is incorporated into the Time.GetFormattime () method to get the formatted time, and write the instruction in the EL.INNNERHTML. Timer EL .__ Timeout__ Trigger once, update time, and cleared in the UNBIND hook.
You may ask, what is this binding.value?

Of course, you can print at the console through the console.log (binding) method, it is clear.

使用Vue开发一个实时性时间转换指令 Here, I will supplement that the options for custom instructions are made up of several hook functions, with bind, insert, update, componentupdated, unbind. The bind and unbind only call once. Each hook function has several parameters available, such as the EL and Binding used above.

The element binding the EL instruction can be used to directly operate the DOM. Binding is an object that contains many properties, as shown above.:

NAME: Directive Name

Rawname: Custom Instruction
Value: The binding value of the instruction
  Expression: binding value String form  
modifiers: A object containing the modifier

When writing a custom instruction, the DOM binds Initial actions such as one-time events, it is recommended to complete in the Bind hook, and to unbind the associated binding within Unbind.

The above is the use of VUE to develop a real-time time conversion function, I hope that if you have any questions, please reply to everyone in a timely manner if you have any questions. . Thank you very much for your support of Tumi Cloud Website!

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment