移动应用开发—

一、实验目标
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部分区别

移动应用开发——实验二相关推荐

ouc2022移动软件开发实验二：天气查询小程序
一.实验目标 1.掌握服务器域名配置和临时服务器部署:2.掌握 wx.request 接口的用法. 二.实验步骤 1."和风天气"密钥申请 "和风天气"有着可以 ...
实验二、贪吃蛇的游戏开发
实验二.贪吃蛇的游戏开发 1.实验目的: 开发一个贪吃蛇游戏,吃到食物蛇身增长,蛇头撞到自身和四周墙壁死亡. 2.实验工具通过Java运行输出. 3.实验内容预习: 实验要求:实现贪吃蛇游戏基本功 ...
华软java综合实验二_2018-2019-2 20175311 实验二《Java开发环境的熟悉》实验报告
2018-2019-2 20175303 实验二 <Java开发环境的熟悉>实验报告一.实验准备 1.了解掌握实验所要用到的三种代码伪代码产品代码测试代码 2.IDEA中配置单元测 ...
实验二数据选择器的设计与vivado集成开发环境【Verilog】
实验二数据选择器的设计与vivado集成开发环境[Verilog] 前言实验二数据选择器的设计与vivado集成开发环境一.实验目的二.实验环境三.实验任务四.实验原理五.实验步骤六 ...
基于Python的ArcGIS二次开发实验实习教程
基于Python的ArcGIS二次开发实验实习教程. ISBN编号: 9787307221772 原价(定价): 39元, 武汉大学出版社天猫正版链接: https://detail.tmall.c ...
GIS二次开发：实验二地图数据访问与渲染
实验二地图数据访问与渲染一.实验目的熟悉不同数据类型对应的工作空间及其使用: 掌握矢量文件.栅格文件.个人数据库以及文件夹数据库的加载: 掌握ArcGIS engine 中图层的渲染类型及所用接 ...
周信东c语言实验二实验报告,周信东主编最新版C语言程序设计基础实验一实验报告.doc...
周信东主编最新版C语言程序设计基础实验一实验报告.doc 下载提示(请认真阅读)1.请仔细阅读文档,确保文档完整性,对于不预览.不比对内容而直接下载带来的问题本站不予受理. 2.下载的文档,不会出现我 ...
数据库原理实验二数据库管理实验报告
广州大学学生实验报告实验二:数据库管理此篇分享仅供参考学习,图文禁复制,勿作他用!谢谢配合! 数据库原理实验之实验二:数据库管理软件:Oracle SQL Developer 今天实验才刚开始,花 ...
20155328 《Java程序设计》实验二（Java面向对象程序设计）实验报告
20155328 <Java程序设计> 实验二(Java面向对象程序设计) 实验报告单元测试一.单元测试和TDD 编程时需理清思路,将编程需求等想好,再开始编.此部分可用伪代码实现. ...

移动应用开发——实验二

移动应用开发——实验二相关推荐

最新文章

热门文章