Vue は製品詳細の表示を実装します

Vue.js は、ユーザー インターフェイスを構築するための進歩的な JavaScript フレームワークです。その主な利点は、再利用可能なコンポーネント システムと軽量の仮想 DOM レンダリングで、Vue.js を使用したフロントエンド アプリケーションの開発が簡単かつ低コストになることです。この記事では、Vue.jsで商品詳細表示ページを実装する方法を紹介します。

1. 開発ツールの準備

開発を開始する前に、必要な開発ツールがインストールされていることを確認する必要があります。まず、Node.js と npm ツールが必要です。公式 Web サイト (https://nodejs.org/zh-cn/) から対応するインストール パッケージをダウンロードしてインストールできます。インストールが完了したら、ターミナル ツールで次のコマンドを使用して、インストールが成功したかどうかを確認できます:

node -v
npm -v

次に、Vue CLI をインストールする必要があります。Vue CLI は、公式に提供されている高速開発ツールです。開発効率を大幅に向上させる Vue.js。ターミナルで次のコマンドを実行してインストールします。

npm install -g @vue/cli

2. Vue プロジェクトの作成

Vue CLI を使用してプロジェクトを作成するのは非常に簡単です。ターミナルで次のコマンドを実行して、プロジェクト作成インターフェイスに入ります:

vue create my-project

その後、いくつかのオプションを選択するように求められます。必要に応じて、対応するオプションを選択できます。オプションの選択が完了すると、Vue CLI は Vue.js プロジェクトの基本構造を自動的に生成します。

3. 製品詳細コンポーネントの作成

Vue.js では、コンポーネントはアプリケーションの基本的な構成要素です。製品の詳細を表示するには、製品詳細コンポーネントを作成する必要があります。 src ディレクトリに ProductDetail.vue という名前のファイルを作成します。このファイルは、製品詳細コンポーネントの構造とロジックを定義します。コード例:

<template>
  <div class="product-detail">
    <h2>{{ product.name }}</h2>
    <p>{{ product.description }}</p>
    <p>价格：{{ product.price }}</p>
  </div>
</template>

<script>
export default {
  name: 'ProductDetail',
  props: {
    product: {
      type: Object,
      required: true
    }
  }
}
</script>

<style scoped>
.product-detail {
  padding: 20px;
}
</style>

上記のコードでは、製品詳細コンポーネントを定義します。 props 属性を通じて製品オブジェクトを受け取ります。これには、名前、説明、価格など、製品に関するすべての情報が含まれます。テンプレートでは、Vue.js テンプレート構文を使用してデータをビューにレンダリングします。同時に、ローカル スコープの CSS スタイルも定義して、現在のコンポーネントでのみ有効になるようにします。

4. 製品リストとルーティングの実装

製品詳細の表示機能をデモンストレーションするには、リスト内のすべての製品を表示し、ユーザーが動的に製品を表示できるようにする必要があります。詳細 URLを変更します。そのため、商品一覧ページと商品詳細ページを作成する必要があります。

製品リスト ページの構造とロジックを定義する Products.vue という名前のファイルを src ディレクトリに作成します。コード例:

<template>
  <div class="products">
    <h1>产品列表</h1>
    <router-link v-for="(product, index) in products" :key="index" :to="{ name: 'ProductDetail', params: { id: product.id } }">{{ product.name }}</router-link>
  </div>
</template>

<script>
export default {
  name: 'Products',
  data() {
    return {
      products: [
        { id: 1, name: '产品1', description: '产品描述1', price: 100 },
        { id: 2, name: '产品2', description: '产品描述2', price: 200 },
        { id: 3, name: '产品3', description: '产品描述3', price: 300 },
        { id: 4, name: '产品4', description: '产品描述4', price: 400 }
      ]
    }
  }
}
</script>

<style scoped>
.products {
  padding: 20px;
}
</style>

上記のコードでは、製品リストを表示する製品コンポーネントを定義します。 Vue.js テンプレート構文を通じてデータをビューにレンダリングし、ルーターリンク コンポーネントを使用して、ユーザーが製品をクリックしたときに URL を動的に変更できるようにします。

次に、ユーザーが製品詳細ページで製品詳細を表示できるようにルートを定義する必要があります。 src/router/index.js ファイルを開き、次のコードを追加します。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Products from '@/views/Products.vue'
import ProductDetail from '@/views/ProductDetail.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Products',
    component: Products
  },
  {
    path: '/products/:id',
    name: 'ProductDetail',
    component: ProductDetail,
    props: true
  }
]

const router = new VueRouter({ mode: 'history', routes })

export default router

上記のコードでは、/ と /products/:id という 2 つのルートを定義します。これらは、それぞれ製品リストと製品詳細を表します。ルートごとにコンポーネントやパラメータ（props）属性などの構成情報を定義します。最後に、VueRouter を通じてルーティング インスタンスが作成されます。

5. App.vue の変更

App.vue で ProductDetail コンポーネントを表示するには、いくつかの変更を行う必要があります。 App.vue ファイルを開き、元のテンプレート コンテンツを削除し、次のコードを追加します。

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</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>

上記のコードでは、対応する s コンポーネントをレンダリングする Vue.js の router-view コンポーネントを使用します。このようにして、App.vue に製品リストと製品の詳細を表示することができます。

6. Vue アプリケーションの実行

Vue アプリケーションを実行する前に、プロジェクトの依存関係がインストールされていることを確認する必要があります。ターミナルで次のコマンドを実行します:

npm install

依存関係のインストールが成功したら、次のコマンドを使用して Vue アプリケーションを起動できます:

npm run serve

Open http://localhost:8080ブラウザで製品リストを表示します。ユーザーが製品をクリックすると、製品の詳細ページにジャンプします。

この記事では、Vue.jsを使用して商品詳細表示機能を実装する方法を紹介します。製品詳細コンポーネントを作成し、製品リストとルーティングを実装し、App.vue でコンポーネントを表示することで、最終的に製品詳細ビュー ページの開発が完了しました。ご質問やご提案がございましたら、コメントを残してください。

以上がVue は製品詳細の表示を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。