Implement web clock function in Vue3 (display the current time and update it once every second)

In front-end interviews, project practice and practical operational abilities are often the key part of the interviewer's focus. One of the common tasks is to implement a real-time updated web clock, which can well reflect the candidate's programming thinking and the depth of mastering the front-end framework. This article will introduce in detail how to implement a web clock that is automatically updated every second in Vue3.

Preparation

Before you start writing your code, make sure you have installed the Vue CLI tool and created a new Vue3 project. If you haven't installed the Vue CLI, you can use the following command to install it:

npm install -g @vue/cli

Create a new Vue project:

vue create vue-clock

Enter the project directory:

cd vue-clock

Run the project:

npm run serve

At this point, our project environment is ready.

Implement clock function

We need to create a new component to display the clock. First, insrc/componentsCreate a directory calledand write the following code.

Create a Clock component

existIn the file, we need to define a template, script and style.

<template>
  <div class="clock">
    {{ currentTime }}
  </div>
</template>
<script>
export default {
  name: 'Clock',
  data() {
    return {
      currentTime: ''
    };
  },
  created() {
    ();
     = setInterval(, 1000);
  },
  beforeUnmount() {
    clearInterval();
  },
  methods: {
    updateTime() {
      const now = new Date();
       = ();
    }
  }
};
</script>
<style scoped>
.clock {
  font-size: 2em;
  text-align: center;
  margin-top: 20px;
}
</style>

Code parsing

Template section (template):

<template>
  <div class="clock">
    {{ currentTime }}
  </div>
</template>

Here we use{{ currentTime }}Syntax to bindcurrentTimeData, whenevercurrentTimeWhen updated, the interface will automatically re-render and display the new time.

Script part (script):

<script>
export default {
  name: 'Clock',
  data() {
    return {
      currentTime: ''
    };
  },
  created() {
    ();
     = setInterval(, 1000);
  },
  beforeUnmount() {
    clearInterval();
  },
  methods: {
    updateTime() {
      const now = new Date();
       = ();
    }
  }
};
</script>

• dataThe function returns an object containing ourcurrentTimeVariable, used to store the string representation of the current time.
• existcreatedIn the life cycle hook, callupdateTimeMethod assigns the current time tocurrentTime, and usesetIntervalUpdate time every second.
• existbeforeUnmountIn the hook, clear the timer to prevent the component from continuing to run after uninstalling and causing memory leaks.
• updateTimeThe method takes the current time and formats it as a readable string.

Style section (style):

<style scoped>
.clock {
  font-size: 2em;
  text-align: center;
  margin-top: 20px;
}
</style>

Simply add some style to the clock so it is centered on the page, and the font size is slightly larger, making it more beautiful.

Introduce the Clock component into the main application

Next, we need to introduce this clock component into our main application. Opensrc/The file is modified as follows:

<template>
  <div >
    <Clock />
  </div>
</template>
<script>
import Clock from './components/';
export default {
  name: 'App',
  components: {
    Clock
  }
};
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Through the above operations, we willClockComponent introduction toand used in the template<Clock />Label.

Run the project:

npm run serve

Open the browser to access the project's running address and you will see a clock that updates every second and displays the current time.

Complete code

For easy reference, here is the complete code:

<template>
  <div class="clock">
    {{ currentTime }}
  </div>
</template>
<script>
export default {
  name: 'Clock',
  data() {
    return {
      currentTime: ''
    };
  },
  created() {
    ();
     = setInterval(, 1000);
  },
  beforeUnmount() {
    clearInterval();
  },
  methods: {
    updateTime() {
      const now = new Date();
       = ();
    }
  }
};
</script>
<style scoped>
.clock {
  font-size: 2em;
  text-align: center;
  margin-top: 20px;
}
</style>

<template>
  <div >
    <Clock />
  </div>
</template>
<script>
import Clock from './components/';
export default {
  name: 'App',
  components: {
    Clock
  }
};
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

So far, we have successfully implemented a web clock that is automatically updated every second in Vue3.

Summarize

Through this practical small project, we not only understand the basic data binding, life cycle hooks and method definitions of Vue3, but also learn how to deal with timers.

This is the article about how to implement the web clock in Vue3, display the current time and update it once every second. For more related content related to Vue3, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!