目录:
(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中了,这就是静态导入和动态导入的区别,一个是全部打包到一起,一个是用到时按需加载.