前端：Vue学习-3

- 1. 自定义指令
- 2. 插槽
- - 2.1 插槽 - 后备内容（默认值）
  - 2.2 插槽 - 具名插槽
  - 2.3 插槽 - 作用域插槽
- 3. Vue - 路由
- - 3.1 路由模块封装
  - 3.2 声明式导航 router-link 高亮
  - 3.3 自定义匹配的类名
  - 3.4 声明式导肮 - 跳转传参
  - 3.5 Vue路由 - 重定向
  - 3.6 Vue路由 - 404
  - 3.7 Vue路由 - 模式设置
  - 3.8 编程式导航 - 基本跳转，传参

1. 自定义指令

自己定义的指令，可以封装一些dom操作，扩展额外功能。
全局注册，在main.js添加如下代码，以下代码为输入框自动聚焦。

// focus为指令名
Vue.directive('focus',{inserted(el){el.focus();}
})

<input type="text" v-focus>

运行结果：
请添加图片描述
局部注册，在组件内进行注册，只能在当前组件内使用该指令、

directives:{focus:{inserted(el){el.focus();}}}

inserted提供的是元素被添加到页面时的逻辑，update 指令的值被修改时触发，提供值变化后，dom更新的逻辑。上述指令并没有给值，下述代码为给指令添加值。

<template><div id="app"><p v-color='color1'>北京</p><p v-color='color2'>上海</p></div>
</template>
<script>export default {name: 'App',data(){return{color1:'red',color2:'blue'}},directives:{color:{inserted(el,binding){el.style.color = binding.value;},update(el,binding){el.style.color = binding.value;}}}
}
</script>
<style scoped>#app{width: 100px;height: 100px;margin: 20px auto;}
</style>

运行结果：
在这里插入图片描述

v-指令名=“指令值”，通过等号绑定指令的值；通过binding.value拿到指令的值

封装v-loading指令
本质loading效果就是一个蒙层，盖在盒子上；数据请求中，开启loading状态，添加蒙层；数据请求完毕，关闭loading状态，移除蒙层。

<template><div id="app"><div v-loading="loading"></div><div>哈哈</div></div>
</template>
<script>export default {name: 'App',data(){return{loading:true}},directives:{loading:{inserted(el,binding){binding.value ? el.classList.add('loading'):el.classList.remove('loading');},update(el,binding){binding.value ? el.classList.add('loading'):el.classList.remove('loading');}}},created(){setTimeout(()=>{this.loading = false;},3000);// 等待3秒，只是演示效果}
}
</script>
<style scoped>#app{width: 500px;height: 500px;margin: 20px auto;position: relative;}.loading:before{content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgb(242,94,94) url('./static/1.gif') no-repeat center;}
</style>

运行效果：
请添加图片描述

2. 插槽

作用：让组件内部的一些结构支持自定义，可以定制结构或内容。
在组件内需要定制的结构部分，改动<slot></slot> 占位；使用组件时，在组件内部传入结构替换slot。
注意：只有两种插槽，默认插槽和具名插槽；

MyBase组件：

<template><div><slot></slot></div>
</template>

使用

<MyBase>你好</MyBase>
<MyBase>你好2</MyBase>

这样的效果就是和下述代码一样

<div>你好
</div>
<div>你好2
</div>

2.1 插槽 - 后备内容（默认值）

封装组件时，可以为预留的’<slot>‘插槽提供默认值；直接在==<slot></slot>标签内，放置内容，作为默认显示内容==

子组件：

<template><div><slot>你好</slot></div>
</template><script>
export default {name:'MyBaseSlot'
}
</script><style></style>

父组件：

<template><div id="app"><MyBaseSlot></MyBaseSlot>    <MyBaseSlot>你好2</MyBaseSlot>   </div>
</template>
<script>
import MyBaseSlot from './components/MyBaseSlot.vue'export default {name: 'App',data(){return{loading:true}},components:{MyBaseSlot}
}
</script>
<style scoped>#app{width: 500px;height: 500px;margin: 20px auto;}</style>

运行结果：
在这里插入图片描述

2.2 插槽 - 具名插槽

一个组件内有多处结构，需要外部传入标签，进行定制。
使用，在组件内多个slot使用name属性区分名字，在调用该组件时，在该组件内使用template配合v-slot:属性名来分发对应标签，可以简化为#属性名；

子组件：MyBaseSlot

<template><div><slot name="head">标题</slot><p>什么都不是</p><slot name="content">hello world！</slot></div>
</template><script>
export default {name:'MyBaseSlot'
}
</script><style></style>

父组件：

<template><div id="app"><MyBaseSlot><template v-slot:head><div class="title">我是大标题</div></template><template #content><div class="content"><p>我是内容</p><img src="./static/1.jpg" alt=""></div></template></MyBaseSlot></div>
</template>
<script>
import MyBaseSlot from './components/MyBaseSlot.vue'export default {name: 'App',data(){return{loading:true}},components:{MyBaseSlot}
}
</script>
<style scoped>#app{width: 500px;height: 500px;margin: 20px auto;border: 1px solid black;}.title{width: 100px;height: 40px;line-height: 40px;background-color: red;}.content{width: 200px;height: 240px;}.content img{width: 200px;}
</style>

运行结果：
在这里插入图片描述

2.3 插槽 - 作用域插槽

定义slot插槽时，是可以进行传值的。插槽上可以绑定数据，将来使用组件时可以用。

给slot标签，以添加属性的方式传值；
所有添加的属性，都会被收集到一个对象中；
在template中，通过 ’#插槽名=“obj”‘接收，默认插槽名为default

<template><div><table style="margin-left:10px;margin-top:10px"><tr><th>id</th><th>姓名</th><th>年龄</th><th>操作</th></tr><tr v-for="item in lists" :key="item.id"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.age}}</td><td><slot :id="item.id" name="btn"></slot></td></tr></table></div>
</template><script>
export default {name:'MyBaseSlot',props:{lists:Array}
}
</script><style>tr{height: 40px;}td{width: 40px;text-align: center;line-height: 40px;}table{border: 1px solid black;}
</style>

<template><div id="app"><MyBaseSlot :lists="list1"><template #btn="obj"><button @click="fn(obj.id)">删除</button></template></MyBaseSlot></div>
</template>
<script>
import MyBaseSlot from './components/MyBaseSlot.vue'export default {name: 'App',data(){return{list1:[{id:1,name:'zs',age:12},{id:2,name:'ls',age:22},{id:3,name:'ww',age:32},{id:4,name:'zl',age:19}]}},components:{MyBaseSlot},methods:{fn(id){this.list1 = this.list1.filter((item)=>item.id != id)}}
}
</script>
<style scoped>#app{width: 500px;height: 500px;margin: 20px auto;border: 1px solid black;}.title{width: 100px;height: 40px;line-height: 40px;background-color: red;}
</style>

运行结果：
请添加图片描述

3. Vue - 路由

路径和组件的映射关系。
安装VueRouter

npm install vue-router@3.6.5

import VueRouter from 'vue-router'
// 引入
Vue.use(VueRouter)
// 安装注册
const router = new VueRouter();
// 创建路由对象
注入路由对象到Vue实例中
new Vue({render:h=>h(App),router
}).$mount('#app')

在这里插入图片描述
此时的访问路径出现了“#/”
创建views目录，用来存储组件，配置路由规则。

const router = new VueRouter({routes:[{path:'/find',component:Find}]
})

配置导航，配置路由出口(路径匹配的组件显示的位置)

<a href=’#/find‘>发现</a>
<router-link to="/find">发现</router-link>
<router-view></router-view>

const router = new VueRouter({routes: [{ path: '/find', component: Find },{ path: '/myMusic', component: My },{ path: '/friend', component: Friend }]
});

<template><div id="app"><a href="#/find">发现音乐</a><router-link to="/myMusic">我的音乐</router-link><router-link to="/friend">我的朋友</router-link><router-view></router-view></div>
</template>

运行结果：
请添加图片描述
组件存放目录问题，页面组件放在views目录下，复用组件放在components目录下。

3.1 路由模块封装

把路由相关代码用单独js文件来实现，提高代码的可读性和可维护性。
index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Find from '@/views/Find.vue'
import My from '@/views/My.vue'
import Friend from '@/views/Friend.vue'Vue.use(VueRouter);const router = new VueRouter({routes: [{ path: '/find', component: Find },{ path: '/myMusic', component: My },{ path: '/friend', component: Friend }]
});export default router

main.js

import router from './router/index'

3.2 声明式导航 router-link 高亮

router-link 本质上就是a标签，配置其to属性，表示路由路径。默认会提供高亮类名。
在这里插入图片描述

在这里插入图片描述

请添加图片描述

router-link会自动添加两个高亮类名，为router-link-active和router-link-exact-active，其中 router-link-active 模糊匹配，而router-link-exact-active 为精确匹配。
router-link-active 能够匹配 /find /find/one /find/two
router-link-exact-active 只能匹配 /find

3.3 自定义匹配的类名

router-link的两个高亮类名太长了，如何进行自定义呢？直接在VueRouter中进行配置即可。

const router = new VueRouter({routes: [{ path: '/find', component: Find },{ path: '/myMusic', component: My },{ path: '/friend', component: Friend }],linkActiveClass:'active',linkExactActiveClass:'exact-active'
});

3.4 声明式导肮 - 跳转传参

查询参数传参
to=“/path?参数名=值”
对应页面接收传递的参数值

$route.query.参数名

<template><div>发现音乐<p>{{$route.query.title}}</p></div>
</template>

请添加图片描述
动态路由传参
配置动态路由

{ path: '/find/:参数名', component: Find },

{ path: ‘/find/:参数名?’, component: Find }，这种方式表示在不传参时也可以匹配到对应组件；如果用上述方式，当不传参时，则不会匹配到对应的组件。

导航链接为：

<router-link to='/find/我的梦'></router-link>

对应页面租价接收传递过来的值

$route.params.参数名

请添加图片描述
两种传参方式的区别：
查询参数传参，比较适合多个参数，获取方式通过 $route.query.参数名；动态路由传参，优雅简洁，传递单个参数比较方便，获取方式通过 $route.params.参数名

3.5 Vue路由 - 重定向

在VueRouter配置项添加redirect，如下

const router = new VueRouter({routes: [{ path: '/', redirect: '/find'},{ path: '/find/:title?', component: Find },{ path: '/myMusic', component: My },{ path: '/friend', component: Friend }],linkActiveClass:'active',linkExactActiveClass:'exact-active'
});

运行结果：
请添加图片描述

3.6 Vue路由 - 404

当路径找不到匹配时，给个提示页面；新建页面组件NotFound，然后在VueRouter配置项最后添加=={path:‘*’,component:NotFound}==，表示前面路径都没有匹配到时，跳转到这个NotFound页面。

routes: [{ path: '/', redirect: '/find'},{ path: '/find/:title?', component: Find },{ path: '/myMusic', component: My },{ path: '/friend', component: Friend },{ path: '*', component: NotFound}]

运行结果：
请添加图片描述

3.7 Vue路由 - 模式设置

两种模式：
hash模式(默认)，比如：http://localhost:8080/#/find
history路由，比如：http://localhost:8080/find
直接在VueRouter配置即可，配置如下：

const router = new VueRouter({routes,mode:'history'
})

请添加图片描述

3.8 编程式导航 - 基本跳转，传参

1.path路径跳转

this.$router.push('/find')
// 简写
this.$router.push({path:'/find'
})
// 完整写法

2.name命名路由跳转（适合path路径长的场景）

this.$router.push({name:'路由名'
})// 路由配置为：
{name:'路由名',path:'路径',component:xxx}

路由传参
两种传参方式：查询参数、动态路由传参
1.查询参数

this.$router.push('/find?title=我的梦&page=1&size=10')
// 简写
this.$router.push({path:'/find',query:{title:'我的梦',page:1,size:10}
})
// 详细写法

2.动态路由传参

this.$router.push('/find/我的梦')
//或
this.$router.push({path:'/find/我的梦'
})

上述两种方式参数接收方和声明式导航一样。
使用命名路由进行传参：
查询参数进行传参 query

this.$router.push({name:'路由名',query:{'参数名'：'值',...}
})

动态路由进行传参 params

this.$router.push({name:'路由名',params:{'参数名'：'值',}
})