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.进入到首页后，点击左侧菜单来实现右侧页面内容的变化（要使用到路由嵌套）

一级路由：首页、登录页面

二级路由：系统管理、用户管理（具体页面内容自己设置）