Vue 3構成APIを用いたディジタルクロック

こんにちは読者.
このブログ記事では、Vue 3構成APIを使用してデジタル時計を作成する方法を参照してください.組成APIは、私たちは複数のVUEコンポーネントでコードを再利用することができますVueで追加された新機能です.
コンポジションAPIを使用する方法の詳細については、以前のブログを参照できます.私はリンクを提供-それについての基本的な情報のためにそれを通過します.

What is Composition API in Vue 3

Snehal ・ Dec 23 '21 ・ 3 min read

#javascript #codenewbie #vue #webdev

では、メイントピックから始めましょう.
まず、DigitalClock.vueという名前のコンポーネントを作成する必要があります

<template>
  <div class="flex h-screen">
    <div class="w-full lg:w-1/4 m-auto p-7 shadow-lg shadow-pink-400 border-4 border-t-purple-600 border-r-pink-600 border-b-pink-600 border-l-indigo-600  bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500">
      <!-- <p class="font-bold text-white text-lg">{{ currentTime.toLocaleString() }}</p> -->
      <p class="font-bold text-white pt-3 text-6xl">{{ currentTime.toLocaleTimeString() }}</p>
      <p class="font-bold text-white text-sm mb-1 flex justify-end mr-3">{{ currentTime.toLocaleDateString() }}</p>
    </div>
  </div>
</template>
<script>
import { useCurrentTime } from "../composables/useCurrentTime";
export default {
  name: "CurrentTimeExample",
  setup() {
    const { currentTime } = useCurrentTime();
    console.log(currentTime.value);
    return { currentTime };
  },
};
</script>

上記のコードでは、useCurrentTimeファイルからuseCurrentTime.jsのメソッドを呼び出しています.ここでは、構成APIを使用してメインロジックを記述します.
構成APIを作成するには、composablesという名前のフォルダーを作成します.ここで、すべての構成APIを作ります.
上記の通り、composablesフォルダにsrcという名前のフォルダーを作成し、JSファイルをuseCurrentTime.jsとして作成します.(src/composables/useCurrentTime.js)

import { ref, onBeforeUnmount } from "vue";

export const useCurrentTime = () => {
  const currentTime = ref(new Date());
  const updateCurrentTime = () => {
    currentTime.value = new Date();
  };
  const updateTimeInterval = setInterval(updateCurrentTime, 1000);
  onBeforeUnmount(() => {
    clearInterval(updateTimeInterval);
  });
  return {
    currentTime,
  };
};

上記のコードでは、現在の時刻と時刻を保持するCurrentTimeとしてconst変数を作成し、現在の時刻を更新する方法updateCurrentTimeを作成しました.間隔の与えられたセットの後、時間を更新するupdateTimeIntervalと呼ばれるもう一つの方法があります.
コンポーネントがアンマウントされたときに、現在時刻をクリアするonBeforeUnmount()と呼ばれるフックを見ることができます.
そして最後のことは、現在の時刻を返しているからです.JSに値があります.
このように、日付n時間を必要とする場合は、単にコンポーネントにインポートするだけでこのコードを再利用できます.
また、サンドボックスでライブデモを参照することができます.
ハッピー読書..🦄 🦁