草庐IT

Vue2-黑马(六)

dengfengling999 2023-04-29 原文

目录:

(1)element-ui  search搜索

(2)element ui Cascader级联选择器

(3)Router-路由配置

(4)Router-动态导入


(1)element-ui  search搜索

我们按姓名搜索,用简单的文本输入框el-input:

性别 、年龄搜索:做一个下拉选择框el-select:

 页面:

自己控制样式:

 

 

执行数据的绑定: 数据的绑定都是给queryDto这个对象,发送请求的时候,都是把这个对象作为参数传递进去的,把数据都是绑定给这个对象

 给这个对象加属性:

然后再给表单项做绑定:使用v-model绑定:

在给按钮el-button加一个点击事件:

 编写方法:

 搜索姓名:

 搜索性别:

 clearable:可清除的

 搜索年龄

 (2)element ui Cascader级联选择器

el-cascader: 

它有多个层级:

比如说我们有多级菜单:

 

 

后台的数据:查询菜单接口:

 在前端页面:在页面加载的时候获取前端数据:

js中也有map集合:

 然后再找到map的值在进行一次遍历:建立对象间的父子关系:

map.values:获取map中所有的值

 修改级联表的数据:给它一个顶层对象:顶层对象也可以有多个

(3)Router-路由配置

vue是单页面程序,说白了你的整个程序,就一个html页面,原来我们写的那么多的组件,那么将来都会用到一个html的页面中嘛?他们都会用到一个html页面中,只不过这个页面的内容会替换成其他组件的内容,内容会变,页面之后一个,学的路由

比如说我们访问的是/路径,就是这个视图组件:主页

 

想替换内容 更换路径404代表另外一个组件,把中间的组件变成另外一个组件

 跟换login路径,代表另外一个组件最外层没变,中间的内容变化啦中间的内容替换成login组件内容

 我们学的路由就是建立 路径跟视图组件的对应关系,把这个关系建立好啦,就可以实现上面之间的对应关系啦

创建:vue页面根组件: Example14View.vue:

需要在mian.js 中进行配置根组件

 在创建几个视图组件:

ContainerView.vue类似主页组件 

 

 

Login.vue组件:作为登录

 NotFoundView.vue:作为404的视图组件

 

只需要给下面几个组件架路由,根组件不需要配路径的:

需要在我们创建项目的时候已经勾选了router,需要在生成的目录下的index.js中配置路径跟组件的对应关系:

 

上面默认配置了两个文件根路径的对应关系 :第一个交静态的引入,第二个交动态的引入

复制一下路由文件:

首先需要引入组件引入的时候原来使用的是相对路径的写法..去找,现在用一下绝对路径,@代表别名src

 

配置路径:配置路径根组件的对应关系

 默认使用的路由文件是inde.js文件,我们自己创建的路由文件需要在main.js中进行配置:main中引入的时候没有跟index.js,默认会找这个

进行更改: 

 

 

然后告诉替换的位置,在根组件中加:router-view:将来根据路径切换视图组件将来显示到哪里呀,显示到router-view这个位置

 

 

切换路径:login

 切换:404

 切换根路径:/  主页

 (4)Router-动态导入

通过import这种导入组件的方式叫做静态导入 

 

 还有一种是动态导入方式:当组件需要引用的时候才动态导入,减少js代码

 

 

 

 此时路由的配置同样生效:

动态导入内部:把这个组件独立出来,用到的时候在进行导入,用不到不加载js到组件页面,提高页面加载速度,这是动态import的好处

验证:每个压面打印一些内容

 动态导入当访问的时候只会显示这个页面的内容,其他页面的内容不会显示:

 更改路由为:静态导入

 显示了所有的打印的内容

 这就验证了他把那三个组件的代码都打包到App.js中了,这就是静态导入和动态导入的区别,一个是全部打包到一起,一个是用到时按需加载.

有关Vue2-黑马(六)的更多相关文章

  1. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  2. (附源码)vue3.0+.NET6实现聊天室(实时聊天SignalR) - 2

    参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图:一.整体介绍  介绍SignalR一种通讯模型Hub(中心模型,或者叫集线器模型),调用这个模型写好的方法,去发送消息。  内容有:    ①:Hub模型的方法介绍    ②:服务器端代码介绍    ③:前端vue3安装并调用后端方法    ④:聊天室样例整体流程:1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过,signalR内置方法.invoke()  去请求接口3、监听接受方法(渲染消息)通过new signalR.HubConnectionBuilder().on

  3. vue 实现内容超出两行显示展开更多功能,可依据需求自定义任意行数! - 2

    平时开发中我们经常会遇到这样的需求,在一个不限高度的盒子中会有很多内容,如果全部显示用户体验会非常不好,所以可以先折叠起来,当内容达到一定高度时,显示展开更多按钮,点击即可显示全部内容,先来看看效果图: 这样做用户体验瞬间得到提升,接下来看看具体细节。0">主要操作在内容这里{{item.username}},……展开更多样式大家可依据自己项目需求进行设计,这里就不贴了,主要说几个关键的。1、在data中定义三个属性isShowMore:false, //控制展开更多的显示与隐藏textHeight:null, //框中内容的高度status:false, //内容状态是否打开2.计算内容是否

  4. vue3.0 + vite2.0+如何兼容低版本浏览器 - 2

    这里写自定义目录标题一、问题二、解决三、解决方案四、打包预览一、问题在使用vue3.2和vite2开发一个移动端或者钉钉端H5微服务iosapp内置浏览器打开没问题安卓app内置浏览器打开空白页面vconsole打印出现报错globalthisundefind二、解决内置浏览器版本比较低打印出来是63vue3代码不兼容低版本浏览器三、解决方案步骤一:vite.config.ts里build.target配置项指定构建目标为es2015或者步骤二:安装@vitejs/plugin-legacy安装完报错也还在指定版本可以解决“@vitejs/plugin-legacy”:“1.8.0”,步骤三:

  5. Vue3的新特性 - 2

    Vue3的新特性包括:CompositionAPI:一种新的API风格,可将有关组件功能的代码逻辑封装在单独的函数中,从而更好地管理和重用代码。Teleport:可以让组件在DOM层次结构中的任何位置渲染。Suspense:一种新的异步渲染模式,可以优化应用程序的性能。更快的渲染速度:Vue3使用了新的虚拟DOM算法,并且对渲染过程进行了优化,因此在渲染大型应用时性能更高。更小的包大小:Vue3的打包大小比Vue2更小,因为它不再需要依赖像vue-template-compiler这样的工具。其他改进:Vue3还具有其他一些改进,例如更好的TypeScript支持、更好的错误提示和更好的调试工

  6. 【微服务】ES使用实战·黑马旅游(五) - 2

    🚗Es学习·第五站~🚩Es学习起始站:【微服务】Elasticsearch概述&环境搭建(一)🚩本文已收录至专栏:微服务探索之旅👍希望您能有所收获一.引入综合前几站所学,我们已经对Elasticsearch的使用有了一定的了解,接下来让我们一起通过一个综合实战案例来复习前几站所学内容,体会在实际生产中的作用。我们一起实现如下功能:酒店搜索和分页酒店结果过滤我周边的酒店酒店竞价排名数据聚合筛选选项搜索框自动补全酒店数据的同步二.环境搭建按照第一站的学习部署Elasticsearch并启动运行。按照第二站的学习中的如下步骤,初始化测试项目并在Es导入数据。使用Elasticsearch,肯定离不开

  7. vue2+element-ui,el-aside侧边栏容器收缩与展开 - 2

    一、概览实现效果如下:二、项目环境1、nodejs版本node-vv16.16.02、npm版本npm-vnpmWARNconfigglobal`--global`,`--local`aredeprecated.Use`--location=global`instead.8.15.03、vue脚手架版本vue-V@vue/cli5.0.8三、创建vue项目1、创建名为vuetest的项目vuecreatevuetest选择Default([Vue2]babel,eslint)  2、切换到项目目录,启动项目cdvuetestnpmrunserve 3、使用浏览器预览 http://localh

  8. Vue学习笔记:Vue element-ui中table组件的使用----接入后端数据 - 2

    记个笔记以免遗忘,建议还是查看Element-UI提供的官方文档学习,自己摸索比较难受官方文档:Element-UI组件TableElement-UI官网提供了许多Table格式,这里以一个带有筛选器的表格为例表格的官网显示效果:直接将官方提供的示例代码贴入.vue文件中即可使用显示的数据是通过data()方法提供的假数据。方法见下:data(){return{tableData:[{date:'2016-05-02',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{date:'2016-05-04',name:'王小虎',address:'上海市普陀区金沙江路1

  9. ruoyi-vue 新建模块--若依前后端分离系统代码生成。 - 2

    目录:1.在数据库中创建表2.使用代码生成功能,生成基础代码2.1修改代码生成器中配置文件generator.yml2.2使用系统工具代码生成3.新建子模块,迁移代码3.1创建grayskyax-assetsmanagement模块3.2在RuoYi整个项目下的`pom.xml`中引入刚刚新建的模块:3.3在ruoyi-admin模块的pom.xml中引入新建的模块3.4在新建的assetsManagement模块中引入ruoyi-common模块3.5将之前解压后的文件放如项目的对应目录下;3.6在数据库中执行生成的sql脚本3.7配置扫描路径application.yml,applicat

  10. 项目部署——Vue项目部署到云服务器(linux) - 2

    因为期末了,要检查web大作业,虽然没有要求,但我想把项目部署一下,以免每次都要打开运行了,部署过踩了许多坑,这里总结一一下这次部署的流程吧。项目我个人进行前后端分离的全栈开发,有后台,后台部署的过程由于篇幅原因将在下一篇中讲解准备工作准备一台虚拟机或者云服务器(linux系统)首先,由于真实的项目基本上都部署在linux系统上,因此为了贴近真实,我们需要准备一台带有linux系统的虚拟机或者云服务器,由于虚拟机不能在自己的电脑关机了以后继续运行,因此这里推荐云服务器,目前用过阿里云,腾讯云两款云服务器部署项目,操作基本上都十分简单。新用户可以在腾讯云和阿里云平台都有两周的免费云服务器可以领取

随机推荐