A simple UNIXtime component in Vue.js

Tags
component, javascript, unix, unix-time, unixtime, vue.component, vue.js, web programming

 
Thread Tools Search this Thread
# 1  
Old 11-07-2018
A simple UNIXtime component in Vue.js

A shout out to Scott who gave me a helping hand to turn a simple sample Vue.js app I wrote yesterday into a Vue.js component:

Code:
Vue.component("unix-time", {
  template: `<div class="time">{{unixtime}}</div>`,
  data() {
    return {
      unixtime: ""
    };
  },
  methods: {
    UpdateTime() {
      this.unixtime = Math.round(new Date().getTime() / 1000);
    }
  },
  created() {
    setInterval(() => {
      this.UpdateTime();
    }, 1000);
  }
});

For any Vue'ers who want the complete code, you can add this component to any root Vue.js element as long as the Vue instance is instantiated after the component appears in the script, for example, any root level element (like the one below) that appears after the component.

Code:
new Vue({
    el: '#myunixtime',
})

Then, in the HTML, just do something like this:

Code:
<div id="myunixtime">
      <unix-time></unix-time>
</div>

Thanks again to Scott for learning Vue.js with me and for the helping hand!

Maybe we will add this simple unixtime clock to the forums somewhere or use this component to replace the unixtime on the home page.....
This User Gave Thanks to Neo For This Post:
Scrutinizer (11-07-2018)
# 2  
Old 11-07-2018
OK... decided to add this Vue.js component to each of our forum man pages.

Basically, to do this, just do three steps:
  1. Add the Vue.js JS lib to the page
  2. Add the unixtime.js code to the page
  3. Add the HTML to the page

In our case, we added two lines to our HTML template forum_man-pages right above the closing body tag:

Code:
<body>

....

<script src="/scripts/vue/dist/vue.js"></script>
<script src="/scripts/vue/neo/js/unixtime.js"></script>
     
</body>

Code:
# cat unixtime.js

Vue.component("unix-time", {
  template: `<div class="neo-man-caps" style="font-size:1.2em;">Current Unix Time: {{unixtime}}</div>`,
  data() {
    return {
      unixtime: "initializing ..."
    };
  },
  methods: {
    UpdateTime() {
      this.unixtime = Math.round(new Date().getTime() / 1000);
    }
  },
  created() {
    setInterval(() => {
      this.UpdateTime();
    }, 1000);
  }
});

var app = new Vue({
  el: "#vue"
});

also, added this HTML to the same template:

Code:
<div id="vue" align="center" style="margin:20px 0px 10px 0px;">
      <unix-time></unix-time>
</div>

You can see the results on every man page, for example:

FreeBSD 11.0 - man page for alias (freebsd section 1)
These 3 Users Gave Thanks to Neo For This Post:
jim mcnamara (11-07-2018) Scrutinizer (11-07-2018) vgersh99 (11-08-2018)

|
Thread Tools Search this Thread
Search this Thread:
Advanced Search

More UNIX and Linux Forum Topics You Might Find Helpful
Some Thoughts on Vue.js at UNIX.com Neo Web Programming 0 11-18-2018 05:19 AM
Turning jQuery Code into Vue.js Neo Web Programming 19 11-11-2018 10:34 PM
A Simple Way to Set Meta Tags Using Vue.js Neo Web Programming 0 11-04-2018 12:20 AM
Multiple records need to convert UNIXtime to human readable datatime and all output in one format manishK Shell Programming and Scripting 10 04-07-2013 02:40 PM
unixtime to formatted date time nhatch Shell Programming and Scripting 4 11-24-2010 06:30 AM
Replace date_time to unixtime in csv.file telemi Shell Programming and Scripting 5 05-08-2010 11:35 AM
Subsystem Component Failure Shrek AIX 1 04-13-2008 09:54 PM
converting localtime to unixtime AshishK UNIX for Advanced & Expert Users 2 10-30-2007 11:22 AM
Xclient with xming on MSW to HPUX X11 / VUE 10.20 dlanor HP-UX 1 10-11-2007 01:50 PM
HPUX 10.20 and fx5 which patches for vue dlanor HP-UX 0 10-11-2007 01:33 PM
Fax Component photon Shell Programming and Scripting 1 07-12-2006 01:28 PM
HP VUE Messaginbg system could not be started inquirer HP-UX 2 12-19-2005 10:41 PM
Problems with unixtime! ett UNIX for Dummies Questions & Answers 1 01-12-2005 11:22 AM