您现在的位置是:首页 > 正文

Web前端开发技术课程实验报告实验3:Vue路由实验

2024-02-29 02:54:55阅读 7

实验代码:实验3第2题实验参考.rar-互联网文档类资源-CSDN下载

Web前端开发技术课程实验报告

实验3Vue路由实验

姓名:_   __ _   ___   ___   班级:_ _ _   ___ _   __ 

学号:_   ____   ___   ___    成绩:_ _ _   __          

一、实验目的:

  1. 掌握Vue路由相关知识及应用。

二、实验要求:

  1. 了解Vue路由相关知识和相关插件、loader的安装与使用
  2. 编写程序完成以下实验内容并上交实验报告(电子文档,以班级、学号后两位、姓名、实验序号命名,如:计算机18-1班01冯晨月实验3)

三、实验内容:

    (一)实验基础

1、.vue文件

.vue文件又叫"单文件组件",是一种可以把样式、逻辑、模板写在一个文件里,独立发布、便于管理的格式。这种格式需要通过webpack进行处理。

.vue文件包含的三种类型的顶级语言块 <template>, <script> 和 <style>。这三个部分分别代表了 html、js、css。其中 <template> 和 <style> 是支持用预编译语言来写的,假若在项目中用了scss 预编译,则<style>需这样写:<style lang=”scss” >。

.vue文件可能理解成是包含Html、JavaScript、CSS的网页文件,只不过原生网页文件是解释执行,而.vue文件需编译执行。

2、本次实验主要通过模仿教材“5.3.3 代码实现”一节中的实现步骤,初步掌握Vue路由相关知识及应用方法。

(二)实验题

1、请使用Vue路由相关知识手动实现Tab栏切换案例,要求如下。

①创建一个components/Message.vue组件,用来展示页面内容。

②创建3个子路由,分别是“待付款”、“待发货”、“待收货”页面,在每个子路由页面单独写出相应的内容,页面效果如图1、图2所示。

                  

 

 

图1 Tab栏切换显示待付款内容                  图2 Tab栏切换显示待发货内容

2、在第1题的基础上进一步应用嵌套路由实现文字选项卡和内容的切换。页面中有“音乐”、“电影”和“新闻”3 个类别选项卡,单击不同选项卡下的子栏目可以显示对应的内容,结果如图1、图2所示。

                          

 

 

图1 显示流行音乐内容                                 图2 显示喜剧电影内容

四、设计思路:

五、实验过程中遇到的问题及解决手段:

六、本次实验的体会(结论):

网站文章

  • lucene索引文件大小优化小结

    lucene索引文件大小优化小结

    http://www.cnblogs.com/LBSer/p/4068864.html 随着业务快速发展,基于lucene的索引文件zip压缩后也接近了GB量级,而保持索引文件大小为一个可以接受的范围非常有必要,不仅可以提高索引传输、读取速度,还能提高索引cache效率(lucene打开索引文件的时候往往会进行缓存,比如MMapDirectory通过内存映射方式进行缓存)。 ...

    2024-02-29 02:54:06
  • Python爬虫:12306抢票,开源代码!

    Python爬虫:12306抢票,开源代码!

    今天就和大家一起来讨论一下python实现12306余票查询(pycharm+python3.7),一起来感受一下python爬虫的简单实践我们说先在浏览器中打开开发者工具(F12),尝试一次余票的查...

    2024-02-29 02:53:58
  • VS code(C/C++)无法自动生成launch.json的问题解决办法

    VS code(C/C++)无法自动生成launch.json的问题解决办法

    VS code(C/C++)无法自动生成launch.json的问题解决办法

    2024-02-29 02:53:50
  • Kafka(八)生产者如何提高吞吐量,数据可靠性,数据去重,生产者事务,数据有序/乱序

    Kafka(八)生产者如何提高吞吐量,数据可靠性,数据去重,生产者事务,数据有序/乱序

    Kafka 生产者如何提高吞吐量,数据可靠性,数据去重,生产者事务,数据有序/乱序

    2024-02-29 02:53:43
  • Linux命令太长导致无法自动换行,覆盖前面的命令

    由于我更改了.bashrc的配置导致长命令无法自动换行...经过万能的google后找到解决方案,在.bashrc中把需要转义的字符经过\[ \]经过转义即可解决 例如我的PS1=&quot;\[\e[1;32m\][\w\$]\[\e[0m\]&quot; 参考链接如下:http://mywiki.wooledge.org/BashFAQ/053

    2024-02-29 02:52:58
  • es6学习笔记--新数据类型Symbol

    学习了es6语法的symbol类型,整理笔记,闲时复习。 Symbol 是es6新增的第七种原始数据类型(null,string,number,undefined,boolean,object),是为...

    2024-02-29 02:52:50
  • Nginx的负载均衡的那点事-session和文件上传下载问题

    Nginx的负载均衡的那点事-session和文件上传下载问题

    本节就聊聊采用Nginx负载均衡之后碰到的问题:Session问题文件上传下载通常解决服务器负载问题,都会通过多服务器分载来解决。常见的解决方案有:网站入口通过分站链接负载(天空软件站,华军软件园等)DNS轮询 F5物理设备Nginx等轻量级架构那我们看看Nginx是如何实现负载均衡的,Nginx的upstream目前支持以下几种方式的分配1、轮询(默认)每个请求按

    2024-02-29 02:52:42
  • AMOS白天夜晚图片数据集

    http://cs.uky.edu/~jacobs/datasets/amos/

    2024-02-29 02:51:57
  • 如何压缩Json格式数据,减少Json数据的体积?

    如何压缩Json格式数据,减少Json数据的体积?

    一、背景 最近刚刚做完一个中文汉字笔画排序的功能,链接如下: 【我的Android进阶之旅】Android实现中文汉字笔划(笔画)...

    2024-02-29 02:51:50
  • Hadoop集群搭建

    Hadoop集群搭建

    目录一、一、安装部署3台联网的服务器1. 下载VMware Workstation Pro https://www.vmware.com/cn/products/workstation-pro/wor...

    2024-02-29 02:51:43