Vue.js 是一種用于構(gòu)建用戶界面的 JavaScript 框架。在 Vue.js 中，我們可以使用組件來組織和管理我們的代碼。以下是一個簡單的 Vue.js 商品列表案例解析：

我們需要創(chuàng)建一個 Vue.js 項目并安裝 Vue CLI。然后，創(chuàng)建一個新的 Vue 組件，該組件將包含一個商品列表。

1. 安裝 Vue CLI：

npm install -g @vue/cli

1. 創(chuàng)建一個新的 Vue 項目：

vue create my-product-list

1. 進(jìn)入項目目錄：

cd my-product-list

1. 在 src 目錄下創(chuàng)建一個名為 components 的文件夾，并在其中創(chuàng)建一個名為 ProductList.vue 的文件。在這個文件中，定義一個商品列表組件。

2. 編輯 ProductList.vue 文件，添加以下代碼：

<template>
  <div class="product-list">
    <h1>商品列表</h1>
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.name }} - {{ product.price }}元
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: '商品1', price: 100 },
        { id: 2, name: '商品2', price: 200 },
        { id: 3, name: '商品3', price: 300 },
      ],
    };
  },
};
</script>

<style scoped>
.product-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
</style>

在這個例子中，我們使用了 Vue 的 v-for 指令來遍歷 products 數(shù)組，并顯示每個商品的名稱和價格。我們還使用了 scoped 樣式來限制樣式的繼承范圍。

1. 在 src 目錄下創(chuàng)建一個名為 App.vue 的文件，并在其中引入剛剛創(chuàng)建的 ProductList.vue 組件。

2. 編輯 App.vue 文件，添加以下代碼：

<template>
  <div id="app">
    <ProductList />
  </div>
</template>

<script>
import ProductList from './components/ProductList.vue';

export default {
  components: {
    ProductList,
  },
};
</script>

1. 運行項目：

npm run serve

你應(yīng)該可以在瀏覽器中看到商品列表組件的效果。你可以根據(jù)需要修改 ProductList.vue 文件以適應(yīng)你的項目需求。