Vue implémente l'affichage des détails du produit

Vue.js est un framework JavaScript progressif pour créer des interfaces utilisateur. Ses principaux avantages sont un système de composants réutilisables et un rendu DOM virtuel léger, ce qui rend le développement d'applications frontales facile et peu coûteux à l'aide de Vue.js. Cet article explique comment implémenter une page d'affichage des détails du produit dans Vue.js.

1. Préparation des outils de développement

Avant de commencer le développement, nous devons nous assurer que les outils de développement nécessaires ont été installés. Tout d’abord, nous avons besoin des outils Node.js et npm. Vous pouvez télécharger le package d'installation correspondant sur le site officiel (https://nodejs.org/zh-cn/) et l'installer. Une fois l'installation terminée, vous pouvez utiliser la commande suivante dans l'outil terminal pour vérifier si l'installation a réussi :

node -v
npm -v

Ensuite, nous devons installer Vue CLI Vue CLI est un outil de développement rapide officiellement fourni par Vue.js, ce qui peut grandement améliorer l’efficacité du développement. Exécutez la commande suivante dans le terminal pour installer :

npm install -g @vue/cli

2. Create Vue Project

Créer un projet à l'aide de Vue CLI est très simple. Exécutez la commande suivante dans le terminal pour accéder à l'interface de création de projet :

vue create my-project

Il vous sera ensuite demandé de sélectionner certaines options, et vous pourrez sélectionner les options correspondantes en fonction de vos besoins. Une fois la sélection des options terminée, Vue CLI générera automatiquement la structure de base d'un projet Vue.js.

3. Créer un composant de détails sur le produit

Dans Vue.js, les composants sont les éléments de base d'une application. Afin d'afficher les détails du produit, nous devons créer un composant de détails du produit. Créez un fichier nommé ProductDetail.vue dans le répertoire src, qui définit la structure et la logique du composant de détails du produit. Exemple de code :

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

Dans le code ci-dessus, nous définissons un composant détail de produit. Nous recevons un objet produit via l'attribut props, qui contient toutes les informations sur le produit, y compris le nom, la description, le prix, etc. Dans le modèle, nous utilisons la syntaxe du modèle Vue.js pour restituer les données dans la vue. Dans le même temps, nous définissons également des styles CSS à portée locale pour garantir qu'ils ne prennent effet que dans le composant actuel.

4. Implémenter la liste de produits et le routage

Afin de démontrer la fonction d'affichage des détails du produit, nous devons afficher tous les produits de la liste et permettre aux utilisateurs de modifier dynamiquement l'URL lors de l'affichage des détails du produit. Par conséquent, nous devons créer une page de liste de produits et une page de détails du produit.

Créez un fichier nommé Products.vue dans le répertoire src, qui définit la structure et la logique de la page de liste de produits. Exemple de code :

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

Dans le code ci-dessus, nous définissons un composant products qui affiche une liste de produits. Nous restituons les données dans la vue via la syntaxe du modèle Vue.js et utilisons le composant router-link pour permettre aux utilisateurs de modifier dynamiquement l'URL lorsqu'ils cliquent sur un produit.

Ensuite, nous devons définir des itinéraires afin que les utilisateurs puissent afficher les détails du produit sur la page de détails du produit. Ouvrez le fichier src/router/index.js et ajoutez le code suivant :

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

Dans le code ci-dessus, nous définissons deux routes : / et /products/:id, qui représentent respectivement la liste des produits et les détails du produit. Nous définissons les informations de configuration telles que les composants et les attributs de paramètres (accessoires) pour chaque route. Enfin, une instance de routage est créée via VueRouter.

5. Modifier App.vue

Afin d'afficher le composant ProductDetail dans App.vue, nous devons apporter quelques modifications. Ouvrez le fichier App.vue, supprimez le contenu du modèle d'origine et ajoutez le code suivant :

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

Dans le code ci-dessus, nous utilisons le composant router-view de Vue.js, qui restitue le composant correspondant en fonction de l'URL actuelle. De cette façon, la liste des produits et les détails du produit peuvent être affichés dans App.vue.

6. Exécutez l'application Vue

Avant d'exécuter l'application Vue, nous devons nous assurer que les dépendances du projet ont été installées. Exécutez la commande suivante dans le terminal :

npm install

Une fois l'installation de la dépendance réussie, nous pouvons utiliser la commande suivante pour démarrer l'application Vue :

npm run serve

Ouvrez http://localhost:8080 dans le navigateur pour afficher la liste des produits. Lorsque les utilisateurs cliquent sur un produit, ils accèdent à la page de détails du produit.

Cet article explique comment utiliser Vue.js pour implémenter la fonction d'affichage des détails du produit. En créant le composant de détails du produit, en implémentant la liste et le routage des produits, et en affichant le composant dans App.vue, nous avons finalement terminé le développement de la page d'affichage des détails du produit. Si vous avez des questions ou des suggestions, veuillez laisser un commentaire.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!