实验目的：
本实验旨在帮助学生掌握使用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的文件，用于存储品牌
列表数据。
数据格式如下：
```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文件，添加以下代码：
```javascript
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组件用于显示品牌
列表，代码如下：
```vue
<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组件用于添加新的品牌，代码如下：
```vue
<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文件，添加以下代码：
```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组件的使用方法。
4679
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
