写一个关于使用Vue简化品牌列表数据查询和添加功能实验的实验内容

实验目的：

本实验旨在帮助学生掌握使用Vue框架简化品牌列表数据查询和添加功能的方法。

实验环境：

- Vue.js 2.x
- Vue CLI 3.x
- WebStorm或其他代码编辑器
- 品牌列表数据（JSON格式）

实验步骤：

1. 安装Vue CLI并创建项目

首先，需要安装Vue CLI和Node.js。打开终端或命令行界面，输入以下命令安装Vue CLI：

npm install -g @vue/cli

安装完成后，可以使用Vue CLI创建项目。在终端或命令行界面中，进入你想要创建项目的文件夹，然后输入以下命令：

vue create my-project

其中，my-project是你想要创建的项目名称。创建成功后，进入项目文件夹。

2. 导入品牌列表数据

在项目文件夹中，创建一个名为data的文件夹，在该文件夹下创建一个名为brands.json的文件，用于存储品牌列表数据。数据格式如下：

[
  {"id": 1, "name": "Apple", "country": "美国"},
  {"id": 2, "name": "Samsung", "country": "韩国"},
  {"id": 3, "name": "Huawei", "country": "中国"},
  {"id": 4, "name": "Xiaomi", "country": "中国"},
  {"id": 5, "name": "OPPO", "country": "中国"},
  {"id": 6, "name": "Vivo", "country": "中国"}
]

在项目文件夹中，打开src/main.js文件，添加以下代码：

import Vue from 'vue'
import App from './App.vue'
import brands from './data/brands.json'

Vue.config.productionTip = false

Vue.prototype.$brands = brands

new Vue({
  render: h => h(App),
}).$mount('#app')

该代码将品牌列表数据导入Vue实例中，使得组件可以直接访问该数据。

3. 创建组件

在项目文件夹中，创建一个名为components的文件夹，在该文件夹下创建两个组件：BrandList和BrandForm。

BrandList组件用于显示品牌列表，代码如下：

<template>
  <div>
    <h2>品牌列表</h2>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>名称</th>
          <th>国家</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="brand in filteredBrands" :key="brand.id">
          <td>{{ brand.id }}</td>
          <td>{{ brand.name }}</td>
          <td>{{ brand.country }}</td>
        </tr>
      </tbody>
    </table>
    <label>
      关键字：
      <input type="text" v-model="keyword">
    </label>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        keyword: ''
      }
    },
    computed: {
      filteredBrands() {
        return this.$brands.filter(brand => {
          return brand.name.indexOf(this.keyword) !== -1 || brand.country.indexOf(this.keyword) !== -1
        })
      }
    }
  }
</script>

该代码使用了Vue的计算属性computed，根据用户输入的关键字动态过滤品牌列表数据。

BrandForm组件用于添加新的品牌，代码如下：

<template>
  <div>
    <h2>添加品牌</h2>
    <form @submit.prevent="addBrand">
      <div>
        <label>
          名称：
          <input type="text" v-model="newBrand.name" required>
        </label>
      </div>
      <div>
        <label>
          国家：
          <input type="text" v-model="newBrand.country" required>
        </label>
      </div>
      <div>
        <button type="submit">添加</button>
      </div>
    </form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        newBrand: {
          name: '',
          country: ''
        }
      }
    },
    methods: {
      addBrand() {
        const id = this.$brands[this.$brands.length - 1].id + 1
        this.$brands.push({
          id,
          name: this.newBrand.name,
          country: this.newBrand.country
        })
        this.newBrand.name = ''
        this.newBrand.country = ''
      }
    }
  }
</script>

该代码使用了Vue的methods，根据用户填写的信息添加新的品牌。

4. 创建App组件

在项目文件夹中，打开src/App.vue文件，添加以下代码：

<template>
  <div>
    <BrandList/>
    <hr>
    <BrandForm/>
  </div>
</template>

<script>
  import BrandList from './components/BrandList.vue'
  import BrandForm from './components/BrandForm.vue'

  export default {
    components: {
      BrandList,
      BrandForm
    }
  }
</script>

该代码将BrandList和BrandForm组件添加到App组件中，实现品牌列表数据查询和添加功能。

5. 运行项目

在终端或命令行界面中，进入项目文件夹，输入以下命令运行项目：

npm run serve

运行成功后，打开浏览器，在地址栏输入http://localhost:8080，即可看到品牌列表和添加品牌的表单。

实验总结：

本实验通过使用Vue框架，实现了品牌列表数据查询和添加功能。学生通过本实验，可以掌握Vue的基本使用方法，并了解Vue如何简化数据查询和添加功能的实现。同时，本实验也让学生了解了Vue的计算属性computed和methods的用法，以及Vue组件的使用方法。