Day5:
1.自定义指令
1.内置指令：v-html、v-model、v-for ……
2.自定义指令：v-focus、v-loading、v-lazy ……
每个指令有着自己各自独立的功能
1.基本语法(全局&局部注册)
1.自定义指令:自己定义的指令，可以封装一些 dom 操作，扩展额外功能
2.需求:当页面加载时，让元素将获得焦点(autofocus 在 safari 浏览器有兼容性)
1.操作dom:dom元素.focus()
mounted(){
this.$refs.inp.focus()
}
这样会比较麻烦，使用下面两种
2.全局注册-语法
vue.directive('指令名',{
"inserted" (el) {
el.focus() // 可以对 el 标签，扩展额外功能
}
})
3.局部注册-语法
directives:{
"指令名":{
inserted(){
el.focus() // 可以对 el 标签，扩展额外功能
}
}
}
2.指令的值
1.需求:实现一个 color指令-传入不同的颜色,给标签设置文字颜色
2.语法:在绑定指令时，可以通过“等号”的形式为指令 绑定 具体的参数值
<div v-color="color">我是内容</div>
3.通过 binding.value 可以拿到指令值，指令值修改会 触发 update 函数
directives:{
color:{
inserted(el,binding){
el.style.color = binding.value
},
update(el,binding){
el.style.color = binding.value
}
}
}
3.小结
1.通过指令的值相关语法，可以应对更复杂指令封装场景
2.指令值的语法
1.v-指令名 ="指令值"，通过 等号 可以绑定指令的值
2.通过 binding.value 可以拿到指令的值
3.通过 update 钩子，可以监听指令值的变化，进行dom更新操作
4.v-loading 指令封装(第63集)
1.场景:实际开发过程中，发送请求需要时间，在请求的数据未回来时，页面会处于空白状态=>用户体验不好
2.需求:封装一个 v-loading 指令，实现加载中的效果
3.分析:
1.本质 loading 效果就是一个蒙层，盖在了盒子上
2.数据请求中，开启loading状态，添加蒙层
3.数据请求完毕，关闭loading状态，移除蒙层
4.实现:
1.准备一个 loading 类，通过伪元素定位，设置宽高，实现蒙层
2.开启关闭 loading 状态(添加移除蒙层)，本质只需要添加移除类即可
3.结合自定义指令的语法进行封装复用
5.小结
1.通过指令相关语法，封装了指令 v-loading 实现了请求的loading效果
2.核心思路:
1.准备类名loading，通过伪元素提供遮罩层
2.添加或移除类名，实现loading蒙层的添加移除
3.利用指令语法，封装 v-loading 通用指令
inserted 钩子中，binding.value 判断指令的值，设置默认状态
update 钩子中，binding.value 判断指令的值，更新类名状态
2.插槽
1.插槽分类:1.默认插槽(组件内定制一处结构)
2.具名插槽(组件内定制多处结构)
2.作用域插槽:是插槽的一个传参语法
1.默认插槽
1.作用:让组件内部的一些 结构 支持 自定义
2.需求:要在页面中显示一个对话框,封装成一个组件
3.问题:组件的内容部分，不希望写死，希望能使用的时候自定义。怎么办?
4.插槽基本语法:
1.组件内需要定制的结构部分，改用<slot></slot>占位
2.使用组件时,<MyDialog></MyDialog>标签内部,传入结构替换slot
5.小结
1.场景:当组件内某一部分结构不确定，想要自定义怎么办?
用插槽 slot 占位封装
2.使用:插槽使用的基本步骤?
1.先在组件内用 slot 占位
2.使用组件时,传入具体标签内容插入
2.后备内容
通过插槽完成了内容的定制，传什么显示什么，但是如果不传，则是空白能否给插槽设置 默认显示内容 呢?
1.插槽后备内容:封装组件时，可以为预留的`<slot>插槽提供后备内容(默认内容)。
2.语法:在<slot>标签内，放置内容，作为默认显示内容
3.效果:
1.外部使用组件时，不传东西，则slot会显示后备内容
<MyDialog></MyDialog>
2.外部使用组件时，传东西了，则slot整体会被换掉
<MyDialog>我是内容</MyDialog>
4.小结
1.如何给插槽设置默认显示内容?
在slot标签内，写好后备内容
2.什么时候插槽后备内容会显示?
当使用组件并未给我们传入具体标签或内容时
3.具名插槽
1.需求:一个组件内有多处结构，需要外部传入标签，进行定制
2.默认插槽:一个的定制位置
3.具名插槽简化语法:
1.多个slot使用name属性区分名字
<div class="dialog-header">
<slot name="head"></slot>
</div>
<div class="dialog-content">
<slot name="content"></slot>
</div>
<div class="dialog-footer">
<slot name="footer"></slot>
</div>
2.template配合v-slot:名字来分发对应标签
<MyDialog>
<template #head>
大标题
</template>
<template #content)
内容文本
</template>
<template #footer>
<button>按钮</button>
</template>
</MyDialog>
3.v-slot:插槽名 可以简化成 #插槽名
4.小结
1.组件内 有多处不确定的结构 怎么办?
具名插槽
1.slot占位,给name属性起名字来区分
2.template配合 v-slot:插槽名 分发内容
2.v-slot:插槽名 可以简化成什么?
#插槽名
4.作用域插槽
1.作用域插槽: 定义 slot 插槽的同时,是可以传值的。给 插槽 上可以 绑定数据，将来 使用组件时可以用。
2.场景:封装表格组件
1.父传子，动态渲染表格内容1.
2.利用默认插槽，定制操作列
3.删除或查看都需要用到 当前项的 id，属于 组件内部的数据,通过 作用域插槽 传值绑定，进而使用
3.基本使用步骤:
1.给 slot 标签,以 添加属性的方式传值
<slot :id="item.id" msg="测试文本"></slot>
2.所有添加的属性,都会被收集到一个对象中
{ id: 3, msg:'测试文本}
3.在template中,通过 `#插槽名="obj"` 接收，默认插槽名为 default
<MyTable :list="list">
<template #default="obj">
<button @click="del(obj.id)">删除</button>
</template>
</MyTable>
4.小结
1.作用域插槽的作用是什么?
可以给插槽上绑定数据，供将来使用组件时使用
2.作用域插槽使用步骤?
1.给 slot 标签,以 添加属性的方式传值
2.所有属性都会被收集到一个对象中
3.template中,通过 `#插槽名="obj"` 接收
3.综合案例:商品列表
MyTag 组件封装/MyTable 组件封装
第68-71集
4.路由入门
1.单页应用程序:SPA-Single Page Application
1.单页面应用(SPA):所有功能在 一个html页面 上实现
2.具体示例:网易云音乐 https://music.163.com/
单页面应用 VS 多页面应用
系统类网站/内部网站/文档类网站 /移动端站点 公司官网/电商类网站
开发分类 实现方式 页面性能 开发效率 用户体验 学习成本 首屏加载 SEO
单页 一个html页面 按需更新性能高 高 非常好 高 慢 差
多页 多个html页面 整页更新性能低 中等 一般 中等 快 优
3.小结
1.什么是单页面应用程序?
所有功能在一个html页面上实现
2.单页面应用优缺点?
1.优点:按需更新性能高，开发效率高，用户体验好
2.缺点:学习成本，首屏加载慢，不利于SEO
3.应用场景?
系统类网站/内部网站/文档类网站 /移动端站点
4.思考
1.单页面应用程序，之所以开发效率高，性能高，用户体验好
2.最大的原因就是:页面按需更新
3.要按需更新，首先就需要明确:访问路径 和 组件的对应关系!
4.访问路径 和 组件的对应关系如何确定呢?
2.路由概念
1.Vue中路由:路径 和组件 的 映射 关系
Home.vue 组件：http://localhost:8080/#/home
Comment.vue组件：http://localhost:8080/#/comment
Search.vue组件：http://localhost:8080/#/search
2.说白了，就是一个组件对应一个路径
3.小结
1.什么是路由?
路由是一种映射关系
2.Vue中的路由是什么?
1.路径 和 组件 的映射关系
2.根据路由就能知道不同路径的，应该匹配渲染哪个组件
3.VueRouter的基本使用
1.VueRouter的介绍
1.目标:认识插件 VueRouter，掌握 VueRouter 的基本使用步骤
2.用:修改地址栏路径时，切换显示匹配的组件
3.说明:Vue 官方的一个路由插件，是一个第三方包
4.官网:https://v3.router.vuejs.org/zh/
2.VueRouter的使用(5+2)
1.5个基础步骤(固定)
1.下载:下载 VueRouter 模块到当前工程，版本3.6.5
yarn add vue-router@3.6.5
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 个核心步骤
1.创建需要的组件(views目录)，配置路由规则
import Find from'./views/Find.vue'
import My from './views/My.vue'
import Friend from './views/Friend.vue'
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>
</div>
3.小结
1.如何实现 路径改变，对应组件 切换?
Vue 官方插件 VueRouter
2.VueRouter的使用基本步骤?(5+2)
1.5个基础步骤
1.下包 2.引入 3.Vue.use 安装注册 4.创建路由对象 5.注入Vue实例
2.个核心步骤
1.创建组件，配置规则(路径组件的匹配关系)
2.配导航，配置路由出日 router-view(组件展示的位置)
4.组件目录存放问题
1.注意:.vue文件 本质无区别。
2.路由相关的组件，为什么放在 views 目录呢?
组件分类:.vue文件分2类; 页面组件&复用组件
3.分类开来 更易维护
1.src/views文件夹
页面组件-页面展示-配合路由用
2.src/components文件夹
复用组件-展示数据-常用于复用
4.小结
1.组件分类有哪两类?分类的目的?
页面组件 和 复用组件，便于维护
2.放在什么文件夹?作用分别是什么?
1.页面组件-views文件夹 =>配合路由，页面展示
2.复用组件-components文件夹 =>封装复用
