Vue 核心技术与实战day05

目录

自定义指令

指令的值

v-loading 指令封装

插槽 - 默认插槽

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

插槽 - 具名插槽

插槽 - 作用域插槽

单页应用程序:

路由的介绍

组件存放目录问题

---

自定义指令

自定义指令：自己定义的指令, 可以封装一些 dom 操作， 扩展额外功能

指令的值

需求：实现一个 color 指令 - 传入不同的颜色, 给标签设置文字颜色

语法：在绑定指令时，可以通过“等号”的形式为指令 绑定 具体的参数值

通过 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

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

通过插槽完成了内容的定制，传什么显示什么, 但是如果不传，则是空白

能否给插槽设置 默认显示内容 呢？

插槽 - 具名插槽

需求：一个组件内有多处结构，需要外部传入标签，进行定制

默认插槽：一个的定制位置

具名插槽语法:

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中路由： 路径 和 组件 的 映射 关系

VueRouter 的 介绍

目标：认识插件 VueRouter，掌握 VueRouter 的基本使用步骤

作用： 修改 地址栏路径时， 切换显示 匹配的 组件

说明：Vue 官方的一个路由插件，是一个第三方包

官网： https://v3.router.vuejs.org/zh/

VueRouter 的 使用 (5 + 2)

5个基础步骤 (固定)

完成后出现如下效果

2 个核心步骤

① 创建需要的组件 (views目录)，配置路由规则

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

组件存放目录问题

注意： .vue文件 本质无区别。

路由相关的组件，为什么放在 views 目录呢？         组件分类

组件分类： .vue文件分2类； 页面组件 & 复用组件

注意：都是 .vue文件 (本质无区别)

分类开来 更易维护

src/views文件夹

        页面组件 - 页面展示 - 配合路由用

src/components文件夹

        复用组件 - 展示数据 - 常用于复用