prospects

There are many built-in instructions in VUE, such as V-for, V-IF, V-HTML, V-ON, etc. However, there are cases where we still need to perform low-level operations on ordinary DOM elements, and custom directives are used.

Custom instruction

Next, use a custom time conversion instruction to explain, the custom instruction function: convert a time to the distance from the present time, is just, or a minute ago, or an hour ago, etc.

code

Initializes the current time in the VUE instance

data:{
         timeNow:new Date().getTime(),
     },
Copy the code

Provides a time formatting utility class

var Time = {
    // Get the current timestamp
    getUnix: function () {
        var date = new Date(a);return date.getTime();
    },

    // Get the timestamp of today's 0:0:0
    getTodayUnix: function () {
        var date = new Date(a); date.setHours(0);
        date.setMinutes(0);
        date.setSeconds(0);
        date.setMilliseconds(0);
        return date.getTime();
    },

    // Get the timestamp of 0 hour 0 minute 0 second on January 1 this year
    getYearUnix: function(){
        var date = new Date(a); date.setMonth(0);
        date.setDate(1);
        date.setHours(0);
        date.setMinutes(0);
        date.setSeconds(0);
        date.setMilliseconds(0);
        return date.getTime();
    },

    // Get the standard year month day
    getLastDate: function (time) {
        var date = new Date(time);
        var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
        var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
        return date.getFullYear() + The '-' + month + The '-' + day;
    },
    // Convert the time
    getFormatTime: function (timestamp) {
        var now = this.getUnix();
        var today = this.getTodayUnix();
        var year = this.getYearUnix();
        var timer = (now - timestamp) / 1000;
        var tip = ' ';
        if (timer <= 0) {
            tip = 'just';
        } else if (Math.floor(timer / 60) < =0) {
            tip = 'just';
        } else if (timer < 3600) {
            tip = Math.floor(timer / 60) + 'Minutes ago';
        } else if (timer >= 3600 && (timestamp - today >= 0)) {
            tip = Math.floor(timer / 3600) + 'Hours ago';
        } else if (timer / 86400< =31) {
            tip = Math.ceil(timer / 86400) + 'days ago';
        } else {
            tip = this.getLastDate(timestamp);
        }
        returntip; }}Copy the code

Custom instruction code

Vue.directive('time', {
                bind: function (el, binding) {
                    // Preparation, for example, adding an event handler or only needing to run a time-consuming task once
                    el.innerHTML = Time.getFormatTime(binding.value);
                    el.timeOut = setInterval(function(){
                        el.innerHTML = Time.getFormatTime(binding.value);
                    },1000);
                },
                update: function (newValue, oldValue) {
                    // The work when the value is updated is also called once with the initial value as arguments
                    console.log('newValue:' + newValue, 'oldValue:' + oldValue);
                },
                unbind: function (el) {
                    // Clean up, for example, removing the event listener added by bind()
                    clearInterval(el.timeOut);
                    deleteel.timeOut; }});Copy the code

References in templates

<div v-time="timeNow"></div> 
Copy the code