Vue melaksanakan melihat butiran produk

Vue.js ialah rangka kerja JavaScript progresif untuk membina antara muka pengguna. Kelebihan utamanya ialah sistem komponen boleh guna semula dan pemaparan DOM maya yang ringan, menjadikannya mudah dan kos rendah untuk membangunkan aplikasi bahagian hadapan menggunakan Vue.js. Artikel ini akan memperkenalkan cara melaksanakan halaman paparan butiran produk dalam Vue.js.

1. Penyediaan alatan pembangunan

Sebelum memulakan pembangunan, kita perlu memastikan bahawa alatan pembangunan yang diperlukan telah dipasang. Pertama, kita memerlukan alat Node.js dan npm. Anda boleh memuat turun pakej pemasangan yang sepadan dari tapak web rasmi (https://nodejs.org/zh-cn/) dan memasangnya. Selepas pemasangan selesai, anda boleh menggunakan arahan berikut dalam alat terminal untuk mengesahkan sama ada pemasangan berjaya:

node -v
npm -v

Seterusnya, kita perlu memasang Vue CLI ialah alat pembangunan pesat yang disediakan secara rasmi oleh Vue.js, yang boleh meningkatkan kecekapan pembangunan. Jalankan arahan berikut dalam terminal untuk memasang:

npm install -g @vue/cli

2. Buat Projek Vue

Mencipta projek menggunakan Vue CLI adalah sangat mudah. Jalankan arahan berikut dalam terminal untuk memasuki antara muka penciptaan projek:

vue create my-project

kemudian akan membenarkan anda memilih beberapa pilihan Anda boleh memilih pilihan yang sepadan mengikut keperluan anda. Selepas pemilihan pilihan selesai, Vue CLI akan menjana struktur asas projek Vue.js secara automatik.

3. Buat Komponen Butiran Produk

Dalam Vue.js, komponen ialah blok binaan asas aplikasi. Untuk melihat butiran produk, kita perlu mencipta komponen butiran produk. Cipta fail bernama ProductDetail.vue dalam direktori src, yang mentakrifkan struktur dan logik komponen butiran produk. Contoh kod:

<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>

Dalam kod di atas, kami mentakrifkan komponen butiran produk. Kami menerima objek produk melalui atribut props, yang mengandungi semua maklumat tentang produk, termasuk nama, perihalan, harga, dsb. Dalam templat, kami menggunakan sintaks templat Vue.js untuk memaparkan data ke dalam paparan. Pada masa yang sama, kami juga mentakrifkan gaya CSS skop setempat untuk memastikan gaya tersebut hanya berkuat kuasa dalam komponen semasa.

4. Laksanakan senarai produk dan penghalaan

Untuk menunjukkan fungsi tontonan butiran produk, kami perlu memaparkan semua produk dalam senarai dan membenarkan pengguna melihat produk secara dinamik butiran Ubah suai URL. Oleh itu, kita perlu membuat halaman senarai produk dan halaman butiran produk.

Buat fail bernama Products.vue dalam direktori src, yang mentakrifkan struktur dan logik halaman senarai produk. Contoh kod:

<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>

Dalam kod di atas, kami mentakrifkan komponen produk yang memaparkan senarai produk. Kami memberikan data ke dalam paparan melalui sintaks templat Vue.js dan menggunakan komponen pautan penghala untuk membolehkan pengguna mengubah suai URL secara dinamik apabila mereka mengklik pada produk.

Seterusnya, kita perlu menentukan laluan supaya pengguna boleh melihat butiran produk dalam halaman butiran produk. Buka fail src/router/index.js dan tambahkan kod berikut:

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

Dalam kod di atas, kami mentakrifkan dua laluan: / dan /products/:id, yang mewakili senarai produk dan butiran produk masing-masing. Kami mentakrifkan maklumat konfigurasi seperti komponen dan atribut parameter (props) untuk setiap laluan. Akhirnya, contoh penghalaan dibuat melalui VueRouter.

5. Ubah suai App.vue

Untuk memaparkan komponen ProductDetail dalam App.vue, kami perlu membuat beberapa pengubahsuaian. Buka fail App.vue, padamkan kandungan templat asal dan tambahkan kod berikut:

<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>

Dalam kod di atas, kami menggunakan komponen paparan penghala Vue.js, yang memaparkan komponen yang sepadan. Dengan cara ini, senarai produk dan butiran produk boleh dipaparkan dalam App.vue.

6. Jalankan aplikasi Vue

Sebelum menjalankan aplikasi Vue, kita perlu memastikan bahawa kebergantungan projek telah dipasang. Jalankan arahan berikut dalam terminal:

npm install

Selepas pemasangan kebergantungan berjaya, kita boleh menggunakan arahan berikut untuk memulakan aplikasi Vue:

npm run serve

Buka http://localhost:8080 dalam pelayar untuk melihat Senarai Produk. Apabila pengguna mengklik pada produk, mereka akan melompat ke halaman butiran produk.

Artikel ini memperkenalkan cara menggunakan Vue.js untuk melaksanakan fungsi melihat butiran produk. Dengan mencipta komponen butiran produk, melaksanakan senarai produk dan penghalaan, dan memaparkan komponen dalam App.vue, kami akhirnya menyelesaikan pembangunan halaman paparan butiran produk. Jika anda mempunyai sebarang soalan atau cadangan, sila tinggalkan komen.

Atas ialah kandungan terperinci Vue melaksanakan melihat butiran produk. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!