VUE第四天学习
内容：全局过滤器和组件、组件进阶、路由
一、全局过滤器
在/src/main.js中Vue实例化之前进行定义
Vue.filter('过滤器名称',function(形参){
...
return 结果
})
定义好的全局过滤器，在项目中的任意组件中可以使用
二、全局组件
/src/main.js中Vue实例化之前进行定义
Vue.component('组件名称',组件内容)
定义好的全局组件，在项目中的任意组件中都可以使用
三、组件进阶
1.ref
(1)进行DOM操作（不知道用vue怎么去实现，可以考虑原生js）
(2)可以实现组件传值
<div>
<h3 ref="myh3">{{ msg }}</h3>
<button @click="getMsg">获取</button>
<v-parent ref="vparent"></v-parent>
</div>
<script>
import vParent from './Parent'
export default {
components:{
vParent
}
data(){
return{
msg:'今天是星期四'
}
},
methods:{
getMsg(){
//普通DOM操作
this.$refs.myh3.innerHTML = '离周末不远啦';
//给子组件的变量赋值
this.$refs.vparent.money = 500000
}
}
}
</script>
2.jquery
(1)script引入jquery【不推荐】
(2)npm安装
cnpm i jquery --save
(3)引用
import $ from 'jquery'
(4)使用
$(".smallbox").slideUp(1000)
3.插槽
在父组件使用子组件，需要展示父组件中的内容时，除了可以使用组件传值，也可以使用插槽来实现。
(1)匿名插槽
在子组件中设置一个slot标签，这样的在父组件使用子组件时，就可以在子组件的内部追加新的内容
子组件：
<slot></slot>
父组件：
<子组件名>新的内容</子组件名>
此时，新的内容就会显示在插槽处。
(2)命名插槽
如果需要让不用的内容显示在不同的插槽处，需要给插槽标签设置上name属性。
子组件
<slot name="插槽名1"></slot>
父组件：
<子组件名>
<p slot="插槽名1">
</子组件名>
4.is
(1)改变html标签的默认结构限制
dl dt dd
ul li
table tbody tr td
<ul>
<li is="v-movie">电影</li>
</ul>
(2)动态组件
如果页面中有多个组件要切换去显示，可以使用is来实现组件的动态展示。
<ul>
<li :is="tagName">电影</li>
</ul>
<button @click="tagName='v-music'">
四、路由【重点】
作用：可以根据浏览器地址的变化来展示不同的组件内容
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' }
]
}
]
})
第三步：在首页中设置一个<router-view />标签，用来展示子级页面内容。
第四步：在浏览器地址中先输入一级路由规则地址，然后再输入二级路由规则地址
例如：http://localhost:8080/#/home/movie
6.动态路由
不同的路由规则要指向到同一个页面组件，比如商品详情页、电影详情页等等，这样的情况可以使用动态路由。
第一步：创建一个详情页面组件，用来展示某个内容的详细信息
第二步：在路由配置文件/src/router/index.js中添加一个一级路由规则
{
path:'/movieinfo/:movieid',
component:MovieDetail
}
第三步：在电影列表页面通过点击事件进行页面跳转，跳转到详情页
<ul>
<li v-for="item of movies" :key="item.id" @click="$router.push('/movieinfo/'+item.id)">
<p>电影标题：{{ item.title }}</p>
</li>
</ul>
第四步：在电影详情页中接收路由中携带的参数
<div>
<h3>电影详情页</h3>
<!-- 根据路由地址，获取参数 -->
<p>电影编号：{{ $route.params.movieid }}</p>
</div>
7.
route的区别
$router是路由配置，包含push、replace等操作方法
$rotue是具体的某一个路由规则信息，包含params等路由参数
五、作业
结合路由来实现后台管理系统页面
功能要求：
1.默认访问登录页面
2.在登录页面点击登录后进入到首页
3.进入到首页后，点击左侧菜单来实现右侧页面内容的变化（要使用到路由嵌套）
一级路由：首页、登录页面
二级路由：系统管理、用户管理（具体页面内容自己设置）
