《移动应用开发》实验报告——简单的品牌列表
2024-05-11 12:07:21
实验目标
- 熟悉Vue开发工具，学会安装Vue-CLI脚手架工具。
- 学会使用Vue-CLI脚手架工具在自己的电脑上建立项目，并运行调试。
- 品牌列表网页编程。
实验内容
- Vue-CLI脚手架工具搭建一个Web项目。
- 使用Vue技术编写一个简单的品牌列表网页，内容及格式可自己定，效果可参照网址：
https://blog.csdn.net/zerobaek/article/details/86567977
实验详细过程和步骤
截图展示
主要代码及实现方法简介
<div class="s_content"><div class="s_content_c inner_c"><div class="s_info"><div class="s_title"><a href="#">首页</a>><span>所有商品</span></div><div class="screen"><table><tr class = "t1"><th>品牌</th><td><a href="#">无印</a><a href="#">博朗</a><a href="#">花印</a></td></tr><tr class = "t2"><th>类别</th><td><a href="#">不锈钢</a><a href="#">原料水泥</a><a href="#">塑料</a><a href="#">木质</a></td></tr></table></div><div class="fun"><div class="sort"><span>排序：</span><a href="#" class="s1"><i></i>销量</a><a href="#" class="s2"><i></i>价格</a><a href="#" class="s3"><i></i>上架时间</a></div><div class="swi"><span>仅显示有货：</span><a href="#"><i></i></a></div><div class="total">共<span>20</span>个商品</div></div><div class="s_prod"><ul class = "pub_pro"><li><img src="data:images/img47.png" alt=""><div class="cont"><h3>不锈钢汤勺</h3><span>￥300</span></div><div class="mask"><a href="#" class="btn">查看详情</a></div></li><li><img src="data:images/img41.png" alt=""><div class="cont"><h3>不锈钢汤勺</h3><span>￥300</span></div><div class="mask"><a href="#" class="btn">查看详情</a></div></li><li><img src="data:images/img42.png" alt=""><div class="cont"><h3>不锈钢汤勺</h3><span>￥300</span></div><div class="mask"><a href="#" class="btn">查看详情</a></div></li><li><img src="data:images/img43.png" alt=""><div class="cont"><h3>不锈钢汤勺</h3><span>￥300</span></div><div class="mask"><a href="#" class="btn">查看详情</a></div></li><li><img src="data:images/img44.png" alt=""><div class="cont"><h3>不锈钢汤勺</h3><span>￥300</span></div><div class="mask"><a href="#" class="btn">查看详情</a></div></li><li><img src="data:images/img46.png" alt=""><div class="cont"><h3>不锈钢汤勺</h3><span>￥300</span></div><div class="mask"><a href="#" class="btn">查看详情</a></div></li><li><img src="data:images/img48.png" alt=""><div class="cont"><h3>不锈钢汤勺</h3><span>￥300</span></div><div class="mask"><a href="#" class="btn">查看详情</a></div></li><li><img src="data:images/img49.png" alt=""><div class="cont"><h3>不锈钢汤勺</h3><span>￥300</span></div><div class="mask"><a href="#" class="btn">查看详情</a></div></li><li><img src="data:images/img49.png" alt=""><div class="cont"><h3>不锈钢汤勺</h3><span>￥300</span></div><div class="mask"><a href="#" class="btn">查看详情</a></div></li><li><img src="data:images/img47.png" alt=""><div class="cont"><h3>不锈钢汤勺</h3><span>￥300</span></div><div class="mask"><a href="#" class="btn">查看详情</a></div></li><li><img src="data:images/img47.png" alt=""><div class="cont"><h3>不锈钢汤勺</h3><span>￥300</span></div><div class="mask"><a href="#" class="btn">查看详情</a></div></li><li><img src="data:images/img47.png" alt=""><div class="cont"><h3>不锈钢汤勺</h3><span>￥300</span></div><div class="mask"><a href="#" class="btn">查看详情</a></div></li></ul></div><div class="pages"><a href="#"><</a><a href="#" class = "tol cur">1</a><a href="#" class = "tol ">2</a><a href="#">></a></div></div></div></div>心得体会：
- 熟悉Vue开发工具，学会安装Vue-CLI脚手架工具。
- 学会使用Vue-CLI脚手架工具在自己的电脑上建立项目，并运行调试。
- 品牌列表网页编程。
参考文章
vue学习小案例（一）：品牌列表案例
《移动应用开发》实验报告——简单的品牌列表相关推荐
- android实现电话功能实验报告,安卓开发实验报告-20210407005833.docx-原创力文档
文档编制序号:[KKIDT-LLE0828-LLETD298-POI08] 文档编制序号:[KKIDT-LLE0828-LLETD298-POI08] 安卓开发实验报告 安卓开发实验报告 目录 页面跳 ...
- Java图形编程实验总结_JAVA实验报告简单绘图程序
<JAVA实验报告简单绘图程序>由会员分享,可在线阅读,更多相关<JAVA实验报告简单绘图程序(8页珍藏版)>请在人人文库网上搜索. 1.实验三绘制图形一.实验目的学会JBut ...
- 网页设计与开发-实验报告-4
网页设计与开发-实验报告-4 网页设计与开发-实验报告-4 学生实验2 学生实验3 学生实验4 学生实验5 网页设计与开发-实验报告-4 学生实验2 利用list-style-image:url(图像 ...
- 网页设计与开发-实验报告-2
网页设计与开发-实验报告-2 网页设计与开发-实验报告-2 总结 学生实验 网页设计与开发-实验报告-2 总结 DOCTYPE声明代码是 <!DOCTYPE html> 该声明必须放在ht ...
- 网页设计与开发-实验报告-6和8
网页设计与开发-实验报告-6和8 网页设计与开发-实验报告-6和8 学生实验3 网页设计与开发-实验报告-6和8 学生实验3 设计图书类网站 <!DOCTYPE html> <htm ...
- 网页设计与开发-实验报告-3
网页设计与开发-实验报告-3 网页设计与开发-实验报告-3 文字相关的CSS属性 矩形框标记`<div>`的CSS属性 学生实验 网页设计与开发-实验报告-3 文字相关的CSS属性 属性名 ...
- linux系统下的程序开发报告册,linux系统及其应用（应用开发)实验报告册.doc
word格式精心整理版 范文范例 学习指导 合肥师范学院 实 验 报 告 册 2013-2014第二学期 系 别 计算机科学与技术 实验课程 linux系统及应用 专 业 11级计算机科学与技术 班 ...
- Android五子棋开发实验报告,Android五子棋游戏实验报告.doc
Android开发总结报告 _____扫雷小游戏 2011年1月 一.背景 扫雷是一个简单的单人游戏.游戏的目的是在没有触碰任何一个地雷的情形下清空一个雷区.扫雷不仅有Windows版本,也有其他平台 ...
- 基于Android的聊天网络应用（安卓开发实验报告）
** 安卓开发实验及其报告(基于Android的聊天网络应用) ** 实验一 手机联系人管理 教学目标 了解安卓手机联系人的数据库:掌握安卓手机联系人信息的读取.添加.删除. 教学内容 手机通讯录管理 ...
最新文章
- 【java】兴唐第十节课知识点总结
- 关于 OneAPM Cloud Test DNS 监控的几个重要问题
- 好用的wordpress主题
- Unit05： window 常用子对象-2 、 event 对象 、 Cookie
- WAP自助建站 我编程之路的启蒙
- js 利用事件委托解决mousedown中的click
- Java注释：类、方法和字段注释
- java nio 强制关闭_Java NIO服务器：远程主机强迫关闭了一个现有的连接
- java lambda 画蛇添足_什么时候使用Lambda函数？
- Android设置Spinner控件的文字居中显示
- Perl 学习笔记－目标操作
- Eclipse 字体选择
- 阿里云ECS服务器Linux环境下配置php服务器(二)－－phpMyAdmin篇
- django——三种方式实现文件下载
- Form表单 jQuery 文件上传
- [渝粤教育] 山东工商学院 电机与拖动基础 参考 资料
- fastlane php,fastlane 自动化打包不同的target，以及手动传版本号参数
- JS下载PDF、图片时直接下载而不是预览
- 传输层 SACK与选择性重传算法
- MATLAB之多项式计算
热门文章
- [转]多级配方处理的简洁方式
- 模拟器上安装不能被卸载的apk
- 判断checkbox是否被选中，判定选中的个数！
- 企业远程接入配置 不宜贪小失大
- java的数组查找算法_java数组、排序算法、查找算法详解
- 计算机面试数据库基本知识,面试基础知识集合(python、计算机网络、操作系统、数据结构、数据库等杂记)...
- linux下运行hadoop,Linux环境下hadoop运行平台的搭建
- java象棋人机代码_中国象棋人机对弈Java版源码
- html焦点图自动播放纯代码,jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)...
- mysql 5.6 5.7 并存_centos同时运行mysql5.6和mysql5.7