Vue学习记录（五）

自定义指令

• 自定义指令：自己定义指令，用于封装一些 dom 操作，扩展额外功能
• 全局注册
• 
• 局部注册
• 

自定义指令的值

• 需求：实现一个 color 指令，传入不同颜色，给标签设置文字颜色
• 语法：在绑定指令时，可以通过“等号”的形式为指令绑定具体的参数值
• 
• 通过binding.value可以拿到指令值，指令值修改会触发 update 函数
• 

封装 v-loading 指令

• 场景：实际开发过程中，发送请求需要时间，在请求的数据未返回时，页面将处于空白状态 -> 用户体验差
• 需求：封装一个 v-loading 指令，实现加载中的效果
• 
• 分析
  1. loading效果本质是一个蒙层，盖在了盒子上
  2. 数据请求中，开启 oading 态，添加蒙层
  3. 数据请求完毕，关闭 loading 状态，移除蒙层
• 实现
  1. 准备一个 loading 类，通过为元素定位，设置宽高，实现蒙层
     • 
  2. 开启/关闭 loading 状态（添加/移除蒙层），本质为添加或移除类
     • 
  3. 结合自定义指令语法进行封装使用
     • 

插槽 --- 默认插槽

• 作用：
  • 让组件内部的一些结构支持自定义
• 需求：
  • 要在页面中显示一个对话框，封装成一个组件
  • 
• 问题：
  • 组件的内容部分不希望写死，想要实现自定义
• 基本语法：
  1. 组件内需要定制的结构部分，使用 <slot></slot> 占位
  2. 使用组件时，<MyDialog></MyDialog> 标签内部，传入结构替换slot
  • 

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

• 场景：不给插槽传值时，显示空白
• 需求：能否给插槽设置默认显示内容呢
  • 
• 插槽后备内容：
  • 封装组件时，可以为预留的<slot>插槽提供后备内容（默认内容）
• 语法：
  • 在slot标签内放置内容，即可作为默认显示内容
• 效果：
  • 若外部组件不传内容，则slot会显示后备内容
  • 若外部组件传入内容，则slot整体被换掉
  • 

插槽 --- 具名插槽

• 需求：
  • 一个组件内有多处结构， 需要外部传入标签，进行定制；而默认插槽只有一个定制的位置
  • 
• 具名插槽语法：
  1. 多个 slot 使用 name 属性区分名字
     • 
  2. template 配合 v-slot: 名字来分发对应标签
     • 
     • 
  3. v-slot: 可以简写成 #插槽名
  4. 一旦插槽起了名字，就是具名插槽，仅支持定向分发

插槽 --- 作用域插槽

• 作用域插槽：
  • 定义 slot 插槽的同时，是可以传值的。可以给插槽绑定输出数据，将来使用组件时可以使用
• 场景：封装表格组件
• 实现思路：
  1. 父传子，动态渲染表格内容
  2. 利用默认插槽，定制操作列
  3. 删除或查看都需要用到当前项的id，属于组件内部的数据，通过作用域插槽传值绑定，进而使用
• 使用步骤
  1. 给 slot 标签，以添加属性的方式传值
     • 
  2. 所有添加的属性都会被收集到一个对象中
     • 
  3. 在 template 中，通过#插槽名 = 'obj'接收，默认插槽名为 efault
     • 
     • 

综合案例 -- 商品列表

• 最终样式：

• 

• my-tag 标签组件的封装

  1. 创建组件 - 初始化
  2. 实现功能：
  • 
    1. 双击显示并自动聚焦 (v-if、v-else、@dbclick)
    • 
  • 2. 封装 v-focus 指令
    • 
    • 
    4. 失去焦点，隐藏输入框
    • 
    6. 回显标签信息
    • 由父组件传递进来，使用 v-model => :value @input 来实现双向传递，简化代码
    • 组件内部通过 props 接收，:value 设置信息给输入框
    8. 内容修改了，回车 => 修改标签信息
    • @keyup.enter，触发事件 $emit('input', e.target.value)
    • 

• 表格组件的封装

  1. 数据不能写死，动态传递表格渲染的数据 - props
  2. 结构不能写死 - 具名插槽

     • (1) 表头支持自定义

     • (2) 主体支持自定义

     • 

     • 

单页应用程序（SPA）

• 单页面应用：所有功能在一个 html 页面上实现
  • 示例：网易云音乐，music.163.com
• 
• 
• 

路由基本介绍

• 路由就是一种映射关系
• SPA最大的特点是按需更新
• 要明确 访问路径 和 组件 的对应关系
• Vue路由：路径和组件的映射关系
• 

VueRouter 的介绍

• Vue官方提供的路由插件
  • 作用：修改地址栏路径时，切换显示匹配的组件
• 官网：v3.router.vuejs.org/zh/
• VueRouter 的使用（5 + 2）
  • 五个基础步骤（固定）
  • 
    1. 下载：下载VueRouter模块到当前工程，Vue2对应版本3.6.5
    • yarn add vue-router@3.6.5
    2. 引入
    • import VueRouter from 'vue-router'
    3. 安装注册（与Vue有关的插件）
    • Vue.user(VueRouter)
    4. 创建路由对象
    • const router = new VueRouter
    5. 注入
  • 
  • 两个核心步骤
    1. 创建需要的组件（views目录），配置路由规则
    • 
    2. 配置导航，配置路由出口
    • 

组件存放目录问题（组件分类）

• 组件分类
  • 页面组件
  • 复用组件
  • 
• 分类目的：更易维护
  • 页面组件放入views文件夹内 --> 配合路由使用
  • 复用组件放入components文件夹内 --> 封装复用