A simple UNIXtime component in Vue.js


Login or Register to Reply

 
Thread Tools Search this Thread
# 1  
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:
# 2  
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:
Login or Register to Reply

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

More UNIX and Linux Forum Topics You Might Find Helpful
Vue.js component: Beautiful code highlighter
Neo
Sooner than later I will render forum discussions in Vue.js to complement the standard way of showing forum threads. Today, I ran across this component, vue-code-highlight Beautiful code syntax highlighting as Vue.js component. https://www.unix.com/members/1-albums225-picture1199.jpg ...... Web Development
1
Web Development
Vue JS 2 Tutorial by The Net Ninja: A Recommended Vue.js Video Tutorial Series
Neo
A number of people have asked me how to get started with Vue.js and my reply before today was to Google "Vue.js". That has changed and my recommendation to anyone who wants to learn the fastest growing, easiest to learn and use Vue.js web dev framework is to watch this video tutorial series: ...... Web Development
0
Web Development
Simple Vue.js Component to Redirect to External Web Page Using Vue Router
Neo
Vue Router has some quirks and on of the quirks is that it is not reliable when adding external links using the vue-router library. After struggling with many solutions, I have found that creating a simple Vue.js component like this one seems to work the best (so far): Component Example: ...... Web Development
0
Web Development
A Simple Way to Set Meta Tags Using Vue.js
Neo
Did a lot of searching on the net and found a lot of tricky ways and Vue.js libs to set meta tags, but I wanted sometime simpler. So, given this standard HTML: <head> <title>Page Title</title> <meta name="description" content="Page Description"> <meta name="keywords" content="Page...... Web Development
0
Web Development
Problems with unixtime!
ett
Hi, i have wrote a scripts thats connect too some tables in a phpBB community. I have got contact with all of the tables but becouse phpBB uses unixtime, it is showed wrong. 0312011557 (Wednesday, 12. january, 15.57). I ask on this page becouse it is a unixpage, sow I wonder i someone has a script...... UNIX for Dummies Questions & Answers
1
UNIX for Dummies Questions & Answers