VUE第四天学习

内容：全局过滤器和组件、组件进阶、路由 一、全局过滤器 在/src/main.js中Vue实例化之前进行定义 Vue.filter('过滤器名称',function(形参){ ... return 结果 }) 定义好的全局过滤器，在项目中的任意组件中可以使用 二、全局组件 /src/main.js中Vue实例化之前进行定义 Vue.component('组件名称',组件内容) 定义好的全局组件，在项目中的任意组件中都可以使用 三、组件进阶 1.ref (1)进行DOM操作（不知道用vue怎么去实现，可以考虑原生js） (2)可以实现组件传值 2.jquery (1)script引入jquery【不推荐】 (2)npm安装 cnpm i jquery --save (3)引用 import $ from 'jquery' (4)使用 $(".smallbox").slideUp(1000) 3.插槽 在父组件使用子组件，需要展示父组件中的内容时，除了可以使用组件传值，也可以使用插槽来实现。 (1)匿名插槽 在子组件中设置一个slot标签，这样的在父组件使用子组件时，就可以在子组件的内部追加新的内容 子组件： 父组件： <子组件名>新的内容 此时，新的内容就会显示在插槽处。 (2)命名插槽 如果需要让不用的内容显示在不同的插槽处，需要给插槽标签设置上name属性。 子组件 父组件： <子组件名>

4.is (1)改变html标签的默认结构限制 dl dt dd ul li table tbody tr td

• 电影

(2)动态组件 如果页面中有多个组件要切换去显示，可以使用is来实现组件的动态展示。

• 电影

四、路由【重点】 作用：可以根据浏览器地址的变化来展示不同的组件内容 Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有： 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式，在 IE9 中自动降级 自定义的滚动条行为 1.安装 (1)初始化项目时，选择使用路由 [图片上传失败...(image-23b7fa-1581596754112)] (2)手动下载 npm i vue-router 然后手动的在项目中使用vue-router import vue-router from 'vue-router' Vue.use(vue-router) 在/src/目录下创建一个router文件夹，创建一个index.js来进行路由的配置 项目运行流程： index.html > src/main.js > App.vue > router/index.js > 具体的某个组件 2.基本使用 vue-router中有两个内置组件： router-view 路由出口（可视区/可变区） router-link 路由导航入口组件，生成a标签 第一步：先定义几个页面组件 第二步：在路由配置文件/src/router/index.js中进行页面组件的引入，并配置路由规则 import Vue from 'vue' import Router from 'vue-router' // 引入页面组件 // @ 相当于 src import Home from '@/components/Home'; import Order from '../components/Order.vue' import My from '../components/My.vue' Vue.use(Router) export default new Router({ routes: [ { path:'/home',//浏览器链接地址规则 component:Home//规则对应的组件 }, { path:'/order',component:Order }, { path:'/my',component:My } ] }) 第三步：在浏览器中只要输入指定的链接地址，就可以看到不用的组件内容 注意：路由规则中path属性是浏览器的链接规则，是一个必填项 3.路由重定向 如果用户访问域名，没有输入指定的链接规则，可以设置一个重定向作为默认访问的页面 { path:'*', redirect:'/home' } path的值为*，表示当前路由配置文件中的path属性都没有匹配到，则会进行重定向。 redirect:重定向，会进行浏览器地址的变化 4.路由导航 (1)内置组件router-link to 必填项，告知导航按钮要跳转的链接地址 active-class，可以当前选中的导航按钮样式 路由导航按钮的个数和路由规则无关 (2)编程式导航 this.$router中内置的方法来进行页面的跳转 push 把当前访问的链接地址进行记录，并进行跳转 replace 把当前访问的链接地址进行替换，并进行跳转 go 回退到指定层级的页面，一般写-1 5.路由嵌套 如果在某一个页面中还有子级页面要根据浏览器地址的变化来展示，就需要使用到路由的嵌套。路由嵌套主要是用children属性。 第一步：创建几个二级页面组件 第二步：在路由配置文件/src/router/index.js中引入子级页面组件，并增加二级路由规则配置信息 在首页路由规则信息中增加一个children属性 import Vue from 'vue' import Router from 'vue-router' // 引入页面组件 // @ 相当于 src import Home from '@/components/Home'; import Order from '../components/Order.vue' import My from '../components/My.vue' import Movie from '../components/Movie.vue' import Music from '../components/Music.vue' import MovieDetail from '../components/MovieDetail.vue' Vue.use(Router) export default new Router({ routes: [ { path:'/home',//浏览器链接地址规则 component:Home,//规则对应的组件 //二级路由规则 children:[ { path:'movie',component:Movie }, { path:'music',component:Music }, { path:'',redirect:'movie' } ] } ] }) 第三步：在首页中设置一个标签，用来展示子级页面内容。 第四步：在浏览器地址中先输入一级路由规则地址，然后再输入二级路由规则地址 例如：http://localhost:8080/#/home/movie 6.动态路由 不同的路由规则要指向到同一个页面组件，比如商品详情页、电影详情页等等，这样的情况可以使用动态路由。 第一步：创建一个详情页面组件，用来展示某个内容的详细信息 第二步：在路由配置文件/src/router/index.js中添加一个一级路由规则 { path:'/movieinfo/:movieid', component:MovieDetail } 第三步：在电影列表页面通过点击事件进行页面跳转，跳转到详情页

• 电影标题：{{ item.title }}

第四步：在电影详情页中接收路由中携带的参数

电影详情页

电影编号：{{ $route.params.movieid }}

7.route的区别 $router是路由配置，包含push、replace等操作方法 $rotue是具体的某一个路由规则信息，包含params等路由参数 五、作业 结合路由来实现后台管理系统页面 功能要求： 1.默认访问登录页面 2.在登录页面点击登录后进入到首页 3.进入到首页后，点击左侧菜单来实现右侧页面内容的变化（要使用到路由嵌套） 一级路由：首页、登录页面 二级路由：系统管理、用户管理（具体页面内容自己设置）

本文章由javascript技术分享原创和收集