Vue.js のボタンと値の更新

はじめに

このプロジェクトでは、Vue.js の環境をセットアップし、ボタンの機能を実装して Web ページに表示される値を更新する方法を学びます。

👀 プレビュー

🎯 タスク

このプロジェクトでは、以下のことを学びます。

• Vue.js の環境をセットアップする方法
• - と + のボタンの機能を実装して値を更新する方法
• ボタンの機能をテストする方法

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

• 基本的な Vue.js アプリケーションをセットアップする
• 反応型のデータオブジェクトを作成してその値を更新する
• イベントハンドラを使用して関数を呼び出し、UI を更新する

プロジェクト構造をセットアップする

このステップでは、プロジェクトファイルと構造をセットアップします。以下の手順に従ってこのステップを完了してください。

プロジェクトフォルダを開きます。ディレクトリ構造は以下の通りです。

├── css
│   └── style.css
├── index.html
└── js

その中で：

• index.html は修正対象のメインページです。
• css はプロジェクトのスタイルを格納するフォルダです。
• js はプロジェクトが依存する Vue ファイルです。

WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。

次に、VM の上部にある「Web 8080」を開き、手動で更新するとページが表示されます。ページ上の - と + のボタンをクリックすると、中央の値が変更できないことがわかります。ページの表示は以下の通りです。

修正機能

このステップでは、バグを修正して、ページ上の「-」と「+」のボタンをクリックすると、中央の値がそれに応じて変更されるようにします。

1. index.html ファイルで、// TODO セクションを探します。
2. それを以下のコードに変更します。

// TODO
let { value } = toRefs(data);

3. 「-」と「+」のボタンの @click イベントハンドラで、update 関数を呼び出し、更新された値を引数として渡します。
4. update 関数で、引数として渡された新しい値で value プロパティを更新します。

これらの手順を完了した後、ページ上の「-」と「+」のボタンをクリックすると、中央の値がそれに応じて変更されます。

完了後の表示は以下の通りです。

まとめ

おめでとうございます！このプロジェクトを完了しました。実験技術を向上させるために、LabEx でさらに多くの実験を行って練習してください。