目录
自定义指令
自定义指令:自己定义的指令, 可以封装一些 dom 操作, 扩展额外功能
![](https://i-blog.csdnimg.cn/direct/2954d3663302467a967159ea5aa4cc7e.png)
指令的值
需求:实现一个 color 指令 - 传入不同的颜色, 给标签设置文字颜色
语法:在绑定指令时,可以通过“等号”的形式为指令 绑定
具体的参数值
![](https://i-blog.csdnimg.cn/direct/de87a5db669e499c80f48f3d3cebc4fa.png)
通过
binding.value
可以拿到指令值,指令值修改会
触发 update 函数
。
v-loading 指令封装
场景:实际开发过程中,发送
请求需要时间
,在请求的数据未回来时,页面会处于
空白状态
=>
用户体验不好
需求:封装一个 v-loading 指令,实现加载中的效果
分析:
1.
本质 loading 效果就是一个蒙层,盖在了盒子上
2.
数据请求中,开启loading状态,添加蒙层
3.
数据请求完毕,关闭loading状态,移除蒙层
实现:
1.
准备一个 loading 类,通过伪元素定位,设置宽高,实现蒙层
2.
开启关闭 loading 状态(添加移除蒙层),本质只需要添加移除类即可
3.
结合自定义指令的语法进行封装复用
插槽 - 默认插槽
作用:让组件内部的一些
结构
支持
自定义
需求: 将需要多次显示的对话框, 封装成一个组件
问题:组件的内容部分,
不希望写死
,希望能使用的时候
自定义
。怎么办?
插槽基本语法:
1. 组件内需要定制的结构部分,改用<slot></slot>占位
2. 使用组件时, <MyDialog></MyDialog>标签内部, 传入结构替换slot
![](https://i-blog.csdnimg.cn/direct/1e3e80007970486faa719c6a2bc1fe53.png)
插槽 - 后备内容(默认值)
通过插槽完成了内容的定制,传什么显示什么, 但是如果不传,则是空白
能否给插槽设置
默认显示内容
呢?
![](https://i-blog.csdnimg.cn/direct/252a2f2824644cf0b00e093771609bd8.png)
插槽 - 具名插槽
需求:一个组件内有多处结构,需要外部传入标签,进行定制
默认插槽:一个的定制位置
具名插槽语法:
1. 多个slot使用name属性区分名字
2. template配合v-slot:名字来分发对应标签
组件内 有多处不确定的结构 怎么办?具名插槽1. slot占位, 给name属性起名字来区分2. template配合 v-slot:插槽名 分发内容v-slot:插槽名 可以简化成什么?#插槽名
插槽 - 作用域插槽
作用域插槽: 定义 slot 插槽的同时, 是可以
传值
的。给
插槽
上可以
绑定数据
,将来
使用组件时可以用
。
场景:封装表格组件
1.
父传子,动态渲染表格内容
2.
利用默认插槽,定制操作列
3.
删除或查看都需要用到
当前项的 id
,属于
组件内部的数据
通过
作用域插槽
传值绑定,进而使用
作用域插槽的作用是什么?可以给插槽上绑定数据,供将来使用组件时使用作用域插槽使用步骤?(1) 给 slot 标签, 以 添加属性的方式传值(2)所有属性都会被收集到一个对象中(3) template中, 通过 ` #插槽名= "obj" ` 接收
单页应用程序:
SPA - Single Page Application
单页面应用(SPA): 所有功能在
一个html页面
上实现
具体示例: 网易云音乐
https://music.163.com/
路由的介绍
生活中的路由:设备和ip的
映射
关系
Vue中路由:
路径 和 组件
的
映射
关系
![](https://i-blog.csdnimg.cn/direct/015e203744b848729f2cf31e02ea2ce0.png)
VueRouter 的 介绍
目标:认识插件 VueRouter,掌握 VueRouter 的基本使用步骤
作用:
修改
地址栏路径时,
切换显示
匹配的
组件
说明:Vue 官方的一个路由插件,是一个第三方包
官网:
https://v3.router.vuejs.org/zh/
VueRouter 的 使用 (5 + 2)
5个基础步骤 (固定)
完成后出现如下效果
2 个核心步骤
① 创建需要的组件 (views目录),配置路由规则
② 配置导航,配置路由出口(路径匹配的组件显示的位置)
组件存放目录问题
注意:
.vue文件
本质无区别。
路由相关的组件,为什么放在 views 目录呢?
组件分类
![](https://i-blog.csdnimg.cn/direct/f70d2f15de7048829a85d62db4f3cbd6.png)
组件分类: .vue文件分2类; 页面组件 & 复用组件
注意:都是
.vue文件 (本质无区别)
分类开来
更易维护
src/views文件夹
页面组件
- 页面展示 - 配合路由用
src/components文件夹
复用组件
- 展示数据 - 常用于复用