はじめに
このプロジェクトでは、店舗の営業状態を「オープン」と「クローズ」の間で切り替えることができるシンプルな Vue.js アプリケーションを構築する方法を学びます。アプリケーションは、店舗の現在の状態とその状態に応じた画像を表示します。ユーザーは、切り替えボタンをクリックして店舗の営業状態を切り替えることができます。
👀 プレビュー
🎯 タスク
このプロジェクトでは、以下を学びます。
- 必要なフォルダとファイルでプロジェクト構造を設定する方法
- Vue.js のセットアップを作成し、反応型の状態と切り替え機能を定義する方法
- 店舗の営業状態と切り替えボタンを表示するための HTML 構造と CSS スタイルを実装する方法
- ユーザーが店舗の営業状態を切り替えることができるように、切り替え機能を統合する方法
🏆 成果
このプロジェクトを完了すると、以下のことができるようになります。
- 基本的な Vue.js プロジェクト構造を設定する
ref関数を使用して反応型の状態変数を作成する- Vue.js のセットアップでカスタム関数を定義して使用する
- HTML テンプレートでデータとイベントハンドラをバインドする
- CSS を使用してアプリケーションをスタイリッシュにして、視覚的に魅力的なインターフェイスを作成する
プロジェクト構造を設定する
このステップでは、プロジェクトファイルと構造を設定します。以下の手順に従ってこのステップを完了します。
プロジェクトフォルダを開きます。ディレクトリ構造は以下の通りです。
├── css
├── images
├── lib
└── index.html
その中で：
cssはプロジェクトのスタイルを保存するフォルダです。imagesはプロジェクトの画像を保存するフォルダです。libはプロジェクトの JS 依存関係を保存するフォルダです。index.htmlはメインページです。
WebIDE の右下隅にあるGo Liveボタンをクリックして、プロジェクトを実行します。
次に、VM の上部にある「Web 8080」を開き、手動で更新してページを表示します。
切り替え機能を実装する
このステップでは、店舗の営業状態を切り替えるための切り替え機能を実装します。
index.htmlファイルを開きます。useToggle関数の中で、// TODOのコメントを以下のコードに置き換えます。function useToggle(state) { // TODO const toggledState = ref(state); function toggle() { toggledState.value = !toggledState.value; } return [toggledState, toggle]; }この実装では、Vue.js の
ref関数を使用して反応型の状態変数toggledStateと状態を更新するtoggle関数を作成しています。切り替えボタンをクリックしてアプリケーションをテストします。店舗の営業状態は「オープン」と「クローズ」の間で切り替わり、対応する画像もそれに応じて変化するはずです。
おめでとうございます！Vue.js を使用した「営業状態切り替え」アプリケーションの実装が完了しました。完了後のエフェクトは以下の通りです。
まとめ
おめでとうございます！このプロジェクトを完了しました。あなたは実験技術を向上させるために LabEx でさらに多くの実験を行うことができます。
