前端（vue）学习笔记（CLASS 5）：自定义指令插槽路由
1、自定义指令
内置指令：内部提供的，每个指令都有自己各自独立的功能
自定义指令：自己定义的指令，可以封装一些dom操作，扩展额外功能
全局注册-语法
例如，当页面加载时，让元素获得焦点
Vue.directive('指令名',{
"insert"(el) {
el.focus()
}
})insert指的是当指令所绑定的元素被添加到页面中时会自动调用
该代码写在main.js文件中
局部组册-语法
directives: {
"指令名": {
inserted() {
else.foucs()
}
}
}局部注册的代码写在组件内的script中
使用的时候，和其他指令一样，v-指令名
* 自定义指令-指令的值
语法：在绑定指令时，可以通过“等号”的形式为指令绑定具体的参数值
通过binding.value可以拿到指令值，指令值修改会触发update函数
Vue.directive('指令名',{
insert(el,binding) {
//el为绑定的元素，binding.value获取等号后的值
},
update(el,binding) {
//同样的逻辑，用于实时更新
}* 自定义指令-v-loading封装
场景：实际开发过程中，发送请求需要时间，在请求的数据未回来时，页面会处于空白状态
需求：封装一个v-loading指令，实现加载中的效果
分析：
1、本质loading效果就是一个蒙层，盖在盒子上
2、数据请求中，开启loading状态，添加蒙层
3、数据请求完毕，关闭loading状态，移除蒙层
实现：
1、准备一个loading类，通过伪元素定位，设置宽高，实现蒙层
2、开启关闭loading状态，本质只需添加移除类即可
3、结合自定义指令的语法进行封装复用
2、插槽
作用：让一些组件内部的一些结构支持自定义
分成后备内容插槽，具名插槽
插槽基本语法：
1、组件内需要定制的结构部分，改用<slot></slot>占位
2、使用组件时，<MyDialog></MyDialog>（自定义的组件）标签内部，传入结构替换slot
* 插槽-后备内容（默认值）
通过插槽完成了内容的定制，传什么就显示什么，但是如果不传，则是空白
插槽后备内容：封装组件时，可以为预留的<slot>插槽提供后备内容（默认内容）
语法：在该标签内，放置内容，作为默认内容
* 插槽-具名插槽
需求：一个组件内有多处结构，需要外部传入标签，进行定制
具名插槽语法：
1、多个slot使用name属性区分名字
2、template配合v-slot:对应属性值 来分发对应标签
其中的v-slot可以直接简写为#属性值
* 插槽-作用域插槽
作用域插槽：定义slot插槽的同时，是可以传值的。给插槽绑定数据，将来使用组件时可以用
基本步骤：
1、给slot标签，以添加属性的方式传值
<slot :id="item.id" msg="测试文本"></slot>2、所有被添加的属性，都会被收集到一个对象里
3、在template中，通过#插槽名=“obj”接收，默认插槽名为default
3、路由入门
单页应用程序：SPA-Single Page Application
单页面应用：所有功能在一个html页面上实现
单页面之所以开发效率高，性能好，用户体验好，最大原因是页面按需更新
要按需更新，首先就要明确：访问路径和组件的对应关系
访问路径和组件的对应关系由路由确定
vue中的路由：路径和组件之间的映射关系
1、VueRouter
作用：修改地址栏路径时，切换显示匹配的组件
说明：Vue官方的一个路由插件，是一个第三方包
VueRouter的使用（5+2）
5个基础步骤（固定）
1、下载：下载VueRouter模块到当前工程
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')以上操作都在main.js中完成
2个核心步骤
1、创建需要的组件（views目录），配置路由规则
例如：
import Find from './views/Find.vue'
import My from './views/My.vue'
const router =new VueRouter({
routes: [
{path:'/find',component: Find},
{path:'/my',component: My}
]
})2、配置导航，配置路由出口（路径匹配的组件显示的位置）
例如：
<a href="#/find"></a>
<a href="#/my"></a>利用<router-view></router-view>进行视图的展示
2、组件存放目录问题
注意：.vue文件本质无区别
路径相关的组件，需要放置在views目录中
组件分类：页面组件与复用组件
一般页面组件放置在views目录中，而复用组件放置在components目录中