一、自定义指令
1、概念：自己定义的指令，可以封装一些dom操作，扩展额外功能
2、语法：
1、全局注册
Vue.directive('指令名',{
"inserted" (el){
el.focus()
}
})
2、局部注册
directives:{
"指令名":{
inserted(el){
//inserted会在元素被添加到页面中的时候触发
el.focus()
}
}
}
3、使用
v-指令名
3、自定义指令——指令的值
3.1、语法：在绑定指令时，可以通过 = 为指令绑定具体的参数值(注：传入的值最好是变量)
3.2、获取：
1、inserted(el, binding){
el.style.color = binding.value
}
4、自定义属性——参数
1、inserted：在元素添加到页面中时触发
2、update：在指令的值变化时触发
5、自定义属性——v-loading指令封装
5.1、实际开发中，发送需要时间，当数据未回来时，页面会处于空白状态，用户体验不好
5.2、需求：封装一个v-loading指令，实现加载中的效果
二、插槽
1、作用：让组件内部的一些结构支持自定义
2、语法：
1、当组件内有需要定制的结构部分时，改用<slot></slot>占位
2、使用组件时，在标签内部，传入结构替换slot如：
//子组件
<div>
<h3>tql</h3>
<span>你的名字是</span>
<slot></slot>
</div>
//父组件
<template>
<SonOne>饶欣</SonOne>
//饶欣会被插入插槽中
</template>
3、后备内容（默认值）
1、在slot中写入内容，便是默认值
如：
<slot>吕乐诚<slot>
4、具名插槽
1、需求：一个组件内有多处结构，需要外部传入标签，进行定制
2、语法：
定义时为多个slot使用name属性区分
<slot name="head"></slot>
<slot name="conteny"></slot>
使用时放在template中，配合v-slot:名字来分发对应标签
<template v-slot:head></template>
//也可以简写
<template #head></template>
5、作用域插槽
5.1、本质上是一个传参的语法
5.2、定义：在定义插槽时，是可以传值的，给插槽上绑定数据，将来使用组件时可以用。
5.3、使用步骤：
1、给slot标签，以添加属性的方式传值
<slot :id="item.id" msg="测试文本"></slot>
//所有属性，都会被收集到一个对象中
2、在template中，通过`#插槽名="obj"`接收，默认插槽名为default
<MyTable :list="list">
<template #default="obj">
<button @click="del(obj.id)">删除</button>
</template>
三、路由
1、单页应用程序（SPA）
(1)概念：所有功能在一个html页面上实现
(2)路由：路径和组件的映射关系
2、VueRouter
(1)作用：修改地址栏路径时，切换显示匹配的组件
(2)使用(5+2)：
1、5个基本步骤
1、下载：下载VueRouter模块到当前工程，版本3.6.5
yarn add [email protected]
2、引入：
import VueRouter from 'vue-router'
3、安装注册：
Vue.use(VueRouter)
4、创建路由对象：
const router = new VueRouter()
5、注入，将路由对象注入到new Vue实例中，建立关联
new Vue({
render: h => h(App),
router
}).$mount('#app')
2、2个核心步骤
1、创建需要的组件(views目录)，配置路由规则
Find.vue My.vue Friend.vue
import Find from './views/Find.vue'
import My from './views/My'
import Friend from './views/Friend'
const router = new VueRouter({
//这里面就是路由规则
routes:[
{ path:'/find', component:Find},
{ path:'/My', component:My},
{ path:'/friend',component:Friend}
//左边是地址栏路径，右边是组件
]
})
2、配置导航，配置路由出口(路径匹配的组件显示的位置)
<div class="footer_wrap">
<a href="#/find">发现音乐</a>
<a href="#/my">我的音乐</a>
<a href="#/friend">朋友</a>
</div>
<div class="top">
<router-view></router-view>
//router-view就是组件显示的位置
</div>
1、扩展：vue框架的规范化要求引入的组件名应该是语义性更强的多单词，若要消除此问题，可以在export default中添加name:'单词'
3、组件存放目录的问题：
(1)组件分类：
1、组件分为两类：页面组件 & 复用组件(但它们本质都是.vue文件，并无区别)
2、分目录的意义就是：更易维护
3、所以我们提出了规范化
src/views：页面组件-页面展示-配合路由用
src/components：复用组件-展示数据-常用于复用