一、 实验目标
1、熟悉Vue开发工具,学会安装Vue-CLI脚手架工具。
2、学会使用Vue-CLI脚手架工具在自己的电脑上建立项目,并运行调试。
3、品牌列表网页编程。
二、 实验内容:
1、Vue-CLI脚手架工具搭建一个Web项目。
2、使用Vue技术编写一个简单的品牌列表网页,内容及格式可自己定,效果可参照网址:https://blog.csdn.net/zerobaek/article/details/86567977
截图展示:
主要代码及实现方法简介:
操作区:
<div class="panel panel-primary">
<div class="panel-heading"><h3 class="panel-title">添加品牌名</h3></div>
<div class="panel-body form-inline">
<label>
序号:
<input type="text" class="form-control" v-model="id">
</label>
<label>
品牌名:
<input type="text" class="form-control" v-model="name">
</label>
<input type="button" value="添加" class="btn btn-primary" @click="add()">
<label>
搜索关键字:
<input type="text" class="form-control" v-model="keywords">
</label>
</div>
</div>
展示区:
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>序号</th>
<th>品牌名</th>
<th>时间</th>
<th>选项</th>
</tr>
</thead>
<tbody>
<tr v-for="item in search(keywords)" :key="item.id">
<td>{{ item.id }}</td>
<td v-text="item.name"></td>
<td>{{ item.ctime }}</td>
<td>
<a href="" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
调度:
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
data(){
return{
id: '',
name: '',
keywords: '',
list: [
{ id: 1, name: '奥迪', ctime: new Date() },
{ id: 2, name: '宝马', ctime: new Date() },
{ id: 3, name: '大众', ctime: new Date() }
]
}
},
methods: {
add() {
var car = { id: this.id, name: this.name, ctime: new Date() }
this.list.push(car);
this.id = this.name = '';
},
del(id) {
var index = this.list.findIndex(item => {
if (item.id == id) {
return true;
}
})
this.list.splice(index, 1);
},
search(keywords) {
return this.list.filter(item => {
if (item.name.includes(keywords)) {
return item;
}
});
}
}
}
</script>
三、 心得体会:
1、 进一步锻炼了vue代码书写能力
2、 熟悉了vue-cli脚手架
3、能够区分vue2和vue3部分区别