Vue implements viewing product details

Vue.js is a progressive JavaScript framework for building user interfaces. Its main advantages are a reusable component system and lightweight virtual DOM rendering, making it easy and low-cost to develop front-end applications using Vue.js. This article will introduce how to implement a product details view page in Vue.js.

1. Development tool preparation

Before starting development, we need to ensure that the necessary development tools have been installed. First, we need Node.js and npm tools. You can download the corresponding installation package from the official website (https://nodejs.org/zh-cn/) and install it. After the installation is complete, you can use the following command in the terminal tool to verify whether the installation is successful:

node -v
npm -v

Next, we need to install Vue CLI. Vue CLI is a rapid development tool officially provided by Vue.js, which can greatly improve development. efficiency. Run the following command in the terminal to install:

npm install -g @vue/cli

2. Create Vue Project

Creating a project using the Vue CLI is very easy. Execute the following command in the terminal to enter the project creation interface:

vue create my-project

After that, you will be asked to select some options. You can select the corresponding options according to your own needs. After the option selection is completed, Vue CLI will automatically generate the basic structure of a Vue.js project.

3. Create Product Details Component

In Vue.js, components are the basic building blocks of an application. In order to view product details, we need to create a product details component. Create a file named ProductDetail.vue in the src directory, which defines the structure and logic of the product details component. Code example:

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

In the above code, we define a product-detail component. We receive a product object through the props attribute, which contains all information about the product, including name, description, price, etc. In the template, we use Vue.js template syntax to render data into the view. At the same time, we also define local scope CSS styles to ensure that they only take effect in the current component.

4. Implementing product list and routing

In order to demonstrate the viewing function of product details, we need to display all products in the list and allow users to dynamically view product details Modify URL. Therefore, we need to create a product list page and product details page.

Create a file named Products.vue in the src directory, which defines the structure and logic of the product list page. Code example:

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

In the above code, we define a products component, which displays the product list. We render data into the view through Vue.js template syntax, and use the router-link component to allow users to dynamically modify the URL when they click on a product.

Next, we need to define routes so that users can view product details in the product details page. Open the src/router/index.js file and add the following code:

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

In the above code, we define two routes: / and /products/:id, which represent product list and product details respectively. We define configuration information such as components and parameter (props) attributes for each route. Finally, a routing instance is created through VueRouter.

5. Modify App.vue

In order to display the ProductDetail component in App.vue, we need to make some modifications. Open the App.vue file, delete the original template content, and add the following code:

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

In the above code, we use the router-view component of Vue.js, which renders the corresponding s component. In this way, the product list and product details can be displayed in App.vue.

6. Run the Vue application

Before running the Vue application, we need to ensure that the project dependencies have been installed. Execute the following command in the terminal:

npm install

After the dependency installation is successful, we can use the following command to start the Vue application:

npm run serve

Open http://localhost:8080 in the browser to view Product List. When users click on a product, they will jump to the product details page.

This article introduces how to use Vue.js to implement the product details viewing function. By creating the product details component, implementing the product list and routing, and displaying the component in App.vue, we finally completed the development of the product details view page. If you have any questions or suggestions, please leave a comment.

The above is the detailed content of Vue implements viewing product details. For more information, please follow other related articles on the PHP Chinese website!