外食に対する良い評価

はじめに

このプロジェクトでは、Vue.jsとElement-UIライブラリを使って多次元評価コンポーネントを作成する方法を学びます。評価コンポーネントを使うことで、ユーザーは外食注文の様々な側面、例えば配達速度、料理の味、包装の品質などを評価できます。

👀 プレビュー

🎯 タスク

このプロジェクトで学ぶことは以下の通りです。

• my-rate.vue という名前のカスタムVue.jsコンポーネントを作成して、多次元評価機能を処理する方法。
• Element-UIライブラリの el-rate コンポーネントを使って、個々の評価次元を実装する方法。
• 評価が更新されたときに、my-rate コンポーネントから change イベントを発行して親コンポーネントに通知する方法。
• 評価コンポーネントのスタイリングとレイアウトをカスタマイズして、デザイン要件に合わせる方法。

🏆 成果

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

• カスタム機能を備えた再利用可能なVue.jsコンポーネントを作成すること。
• Element-UIライブラリを使って複雑なUIコンポーネントを構築すること。
• Vue.jsアプリケーションにおいて親コンポーネントと子コンポーネント間でデータを管理し、通信すること。
• CSSを使ってVue.jsコンポーネントのスタイリングとレイアウトを行うこと。

Skills Graph

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

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

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

├── element-ui-2.6.2
│   ├── element-icons.ttf
│   ├── element-icons.woff
│   ├── element-ui.min.js
│   └── element-ui.style.css
├── index.html
├── js
│   ├── http-vue-loader.js
│   └── vue.min.js
└──  my-rate.vue

その中で：

• index.html はメインページです。
• element-ui-2.6.2 フォルダには、element-uiライブラリに関連するスクリプトファイル、スタイルファイル、およびフォントが含まれています。
• js フォルダには、vueおよびhttp-vue-loaderライブラリに関連するファイルが含まれています。
• my-rate.vue は、カプセル化された評価コンポーネントのファイルです。

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

次に、VMの上部にある「Web 8080」を開き、手動で更新するとページが表示されます。

マイレートコンポーネントを完成させる

このステップでは、多次元評価機能を実装するために my-rate.vue コンポーネントを完成させます。

1. プロジェクトフォルダ内の my-rate.vue ファイルを開きます。
2. template セクションで、評価コンポーネント用のHTML構造を追加します。

<div class="block">
  <span class="demonstration">Please rate the takeout: </span>
  <ul class="rate-list">
    <li>
      <!-- TODO: Completing the el-rate property -->
      Speed of delivery:
      <el-rate v-model="speed" show-score @change="changeHandler"></el-rate>
    </li>
    <li>
      <!-- TODO: Completing the el-rate property -->
      Takeout flavors:
      <el-rate v-model="flavor" show-score @change="changeHandler"></el-rate>
    </li>
    <li>
      <!-- TODO: Completing the el-rate property -->
      Takeout packaging:<el-rate
        v-model="pack"
        show-score
        @change="changeHandler"
      ></el-rate>
    </li>
  </ul>
</div>

この構造には、速度、味、包装の各評価次元に対応する3つの el-rate コンポーネントが含まれています。

3. <script> セクションで、changeHandler メソッドを追加します。

<script>
module.exports = {
  data() {
    return {
      speed: 0,
      flavor: 0,
      pack: 0
    };
  },
  /* TODO */
  methods: {
    changeHandler() {
      if (this.speed && this.flavor && this.pack) {
        const rate = {
          speed: this.speed,
          flavor: this.flavor,
          pack: this.pack
        };
        this.$emit("change", rate);
      }
    }
  }
};
</script>

data 関数は、各次元の現在の評価値を格納する speed、flavor、pack の3つのプロパティを持つオブジェクトを返します。

changeHandler メソッドは、いずれかの次元の評価が変更されたときに呼び出されます。すべての3つの評価が設定されているかどうかを確認し、その場合は更新された評価値を含むオブジェクトで change イベントを発行します。

4. my-rate.vue ファイルを保存します。
5. ブラウザに戻り、ページを更新します。完成したインターフェイスは以下の図の通りです。

まとめ

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