vue组件学习复习笔记(二)，包括（vue组件、vue生命周期、axios使用、组件进阶、自定义指令等）

---

前言

本文包含 vue组件 等内容，参考于 黑马PPT 通过自己理解整理，所以这是一篇用于小白新手入门，或者复习使用的笔记，主要包括（vue组件、vue生命周期、axios使用、组件进阶、自定义指令等）
如有做的不好的地方，敬请谅解，欢迎指出，持续更新改正

---

一 Vue组件概念, 创建和使用

1. 折叠面板-重复标签实现多个

$$总结$$

1. 遇到重复标签想复用?
   封装成组件
2. 组件好处?
   各自独立, 便于复用

---

2. 组件概念

• 组件是可复用的 Vue 实例, 封装标签, 样式和JS代码
• 组件化 ：封装的思想，把页面上 可重用的部分 封装为 组件，从而方便项目的 开发 和 维护
• 一个页面， 可以拆分成一个个组件，一个组件就是一个整体, 每个组件可以有自己独立的 结构 样式 和 行为(html, css和js)

$$小结$$

1. 组件是什么?
   可复用的vue实例, 封装标签, 样式, JS
2. 什么时候封装组件?
   遇到重复标签, 可复用的时候
3. 组件好处?
   各自独立, 互不影响

---

3. 组件的基础使用

每个组件都是一个独立的个体, 代码里体现为一个独立的.vue文件

1. 创建组件, 封装要复用的标签, 样式, JS代码

2. 注册组件

   • 全局注册 – main.js中 – 语法如图
     

   • 局部注册 – 某.vue文件内 – 语法如图
     

3. 使用组件
   
   $$小结$$

• 创建和使用组件步骤?
  创建.vue文件 – 标签 – 样式 – JS进去
  注册组件 (全局 / 局部)
  使用组件 (组件名用作标签)
• 组件运行结果?
  把组件标签最终替换成, 封装的组件内标签

---

4. 组件-scoped作用

• 准备: 当前组件内标签都被添加 data-v-hash值 的属性
• 获取: css选择器都被添加 [data-v-hash值] 的属性选择器
  

1. Vue组件内样式, 只针对当前组件内标签生效如何做?
   给style上添加scoped
2. 原理和过程是什么?
   会自动给标签添加data-v-hash值属性, 所有选择都带属性选择

---

二 Vue组件通信

1. 父传子_props

父组件 -> 子组件 传值

• 首先明确父和子是谁, 在父引入子 (被引入的是子)
  • 父: App.vue
  • 子: MyProduct.vue
• 创建MyProduct.vue如下图所示
  

$步骤$

1. 子组件内, 定义变量, 准备接收, 然后使用变量
   
2. 父组件(App.vue)内, 要展示封装的子组件(MyProduct.vue)
   引入组件, 注册组件, 使用组件, 传值进去

$$总结$$

1. 什么时候需要父传子技术?
   从一个vue组件里把值传给另一个vue组件(父->子)
2. 父传子口诀(步骤)是什么?
   子组件内, props 定义变量, 在子组件使用变量
   父组件内, 使用子组件, 属性方式给props变量传值
3. props有哪2种定义方式, 区别是?
   props: [] - 只声明变量, 不能类型校验
   props: {} - 声明变量和校验类型规则 - 不对则报错

---

2. 父向子-配合循环

---

3. 单向数据流

从父到子的数据流向, 叫单向数据流

原因: 子组件修改, 不通知父级, 造成数据不一致性

Vue规定props里的变量, 本身是只读的

$$总结$$

1. 为何不建议, 子组件修改父组件传过来的值?
   父子数据不一致, 而且子组件是依赖父传入的值
2. 什么是单向数据流?
   从父到子的数据流向, 叫单向数据流
3. props里定义的变量能修改吗?
   不能, props里的变量本身是只读的

---

4. 子向父_自定义事件

$$子组件触发父自定义事件方法$$

$$小结$$

1. 什么时候使用子传父技术?
   当子想要去改变父里的数据
2. 子传父如何实现?
   父组件内, 给组件@自定义事件=“父methods函数”
   子组件内, 恰当时机this.$emit(‘自定义事件名’, 值)

---

5. 阶段总结

---

6. 跨组件通信-EventBus

App.vue里引入MyProduct.vue和List.vue

语法

• src/EventBus/index.js – 创建空白Vue对象并导出
  

• 在要接收值的组件(List.vue) eventBus.$on(‘事件名’, 函数体)
  

• 在要传递值的组件(MyProduct.vue) eventBus.$emit(‘事件名’, 值)
  

$$小结$$

1. 什么时候使用eventBus技术?
   当2个没有引用关系的组件之间要通信传值
2. eventBus技术本质是什么?
   空白Vue对象, 只负责$on和$emit

---

三 vue 生命周期

1. 生命周期

人

一个人从出生到逝去的过程

Vue

从创建 到 销毁 的整个过程就是 – Vue实例的 - 生命周期

---

2. 钩子函数

Vue 框架内置函数，随着组件的生命周期阶段，自动执行

• 作用: 特定的时间点，执行特定的操作
• 场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据
• 分类: 4大阶段8个方法
  

$$小结$$

1. 如何知道Vue生命周期到达了什么阶段?
   使用钩子函数
2. 钩子函数有哪些?
   初始化 / 挂载 / 更新 / 销毁

---

3. 初始化

1. new Vue() – Vue实例化(组件也是一个小的Vue实例)
2. Init Events & Lifecycle – 初始化事件和生命周期函数
3. beforeCreate – 生命周期钩子函数被执行
4. Init injections&reactivity – Vue内部添加data和methods等
5. created – 生命周期钩子函数被执行, 实例创建
6. 接下来是编译模板阶段 –开始分析
7. Has el option? – 是否有el选项 – 检查要挂到哪里
   没有. 调用$mount()方法
   有, 继续检查template选项

1. Vue实例从创建到编译模板执行了哪些钩子函数?
   beforeCreate / created
2. created函数触发能获取data?
   能获取data, 不能获取真实DOM

---

4. 挂载

1. template选项检查
   有 - 编译template返回render渲染函数
   无 – 编译el选项对应标签作为template(要渲染的模板)
2. 虚拟DOM挂载成真实DOM之前
3. beforeMount – 生命周期钩子函数被执行
4. Create … – 把虚拟DOM和渲染的数据一并挂到真实DOM上
5. 真实DOM挂载完毕
6. mounted – 生命周期钩子函数被执行

$$小结$$

1. Vue实例从创建到显示都经历了哪些钩子函数?
   beforeCreate / created / beforeMount / mounted
2. created函数里, 能获取真实DOM吗?
   不能获取真实DOM
3. 在什么钩子函数里可以获取真实DOM?
   mounted

---

5. 更新

1. 当data里数据改变, 更新DOM之前
2. beforeUpdate – 生命周期钩子函数被执行
3. Virtual DOM…… – 虚拟DOM重新渲染, 打补丁到真实DOM
4. updated – 生命周期钩子函数被执行
5. 当有data数据改变 – 重复这个循环

$$小结$$

1. 什么时候执行updated钩子函数
   当数据发生变化并更新页面后
2. 在哪可以获取更新后的DOM
   在updated钩子函数里

---

6. 销毁

一般在beforeDestroy/destroyed里做什么?
手动消除计时器/定时器/全局事件

1. 当$destroy()被调用 – 比如组件DOM被移除(例v-if)
2. beforeDestroy – 生命周期钩子函数被执行
3. 拆卸数据监视器、子组件和事件侦听器
4. 实例销毁后, 最后触发一个钩子函数
5. destroyed – 生命周期钩子函数被执行

---

四 axios使用

1. axios基本使用

axios 是一个专门用于发送ajax请求的库
官网: http://www.axios-js.com/
axios 底层还是原生js实现, 内部通过Promise封装的

特点

• 支持客户端发送Ajax请求
• 支持服务端Node.js发送请求
• 支持Promise相关用法
• 支持请求和响应的拦截器功能\
• 自动转换JSON数据

1. 什么是ajax?
   一种前端异步请求后端的技术
2. ajax原理?
   浏览器window接口的XMLHttpRequest
3. axios是什么?
   基于原生ajax+Promise技术封装通用于前后端的请求库

---

2. axios 获取数据

获取所有图书信息

• 功能: 点击调用后台接口, 拿到所有数据 – 打印到控制台

• 引入: 下载axios, 引入后才能使用

$$小结$$

1. axios如何发起一次get请求?
   在method选项配置为true / 也可以默认不写
2. axios函数调用原地结果是什么?
   是一个Promise对象
3. 如何拿到Promise里ajax的成功或失败的结果?
   then() / catch()

---

3. axios 传参

查询图书信息

• 功能: 点击调用后台接口, 查询用户想要的书籍信息 – 打印到控制台
  

$$小结$$

1. ajax如何给后台传参?
   在url?拼接 – 查询字符串
   在url路径上 – 需要后端特殊处理
   在请求体 / 请求头 传参给后台
2. axios哪个配置项会把参数自动写到url?后面
   params

---

4. axios 发布书籍

新增图书信息

• 点击新增按钮, 把用户输入的书籍信息, 传递给后台 – 把结果打印在控制台

$$小结$$

1. post请求方式, 一般在哪里传递数据给后台?
   请求体中
2. axios哪个选项, 可以把参数自动装入到请求体中?
   data选项
3. axios默认发给后台请求体数据格式是?
   json字符串格式

---

5. axios全局配置

配置基础地址, 统一管理

• 可以在官网看到axios的很多默认配置
  

• 修改请求url / 以后的请求都不用带前缀基地址了 – 运行时, axios的baseURL会自动拼在前
  

---

五 $refs 和 $nextTick 使用

1. 获取DOM

通过id或ref属性获取原生DOM

• 在mounted生命周期 – 2种方式获取原生DOM标签

  1. 目标标签 – 添加id / ref
     

  2. 恰当时机, 通过id / 通过ref属性 获取目标标签
     

---

2. 获取组件对象

通过ref属性获取组件对象

1. 创建Demo组件, 写一个方法

2. App.vue使用Demo组件, 给ref属性-名字随意
   

3. 恰当时机, 通过ref属性 获取组件对象, 可调用组件对象里方法等
   

$$小结$$

1. 如何获取组件对象呢?
   目标组件添加ref属性
   this.$refs.名字 获取组件对象
2. 拿到组件对象能做什么?
   调用组件里的属性/方法

---

3.Vue是异步更新DOM

vue更新DOM是异步的

$$打印出的结果是0$$

---

4. $nextTick使用

等DOM更新后, 触发此方法里函数体执行

• 语法: this.$nextTick(函数体)

1. data改变更新DOM是同步还是异步的?
   异步
2. 我们可以在哪里访问到更新后的DOM呢?
   this.$nextTick里的函数体
   updated生命周期钩子函数

---

5. 组件name属性使用

组件name可用作注册组件名字

1. 组件定义name属性和值
   

2. 注册组件可用上面name的值
   

---

六 vue组件进阶

1. 动态组件

多个组件使用同一个挂载点，并动态切换

$$步骤$$

1. 准备被切换的 - UserName.vue / UserInfo.vue 2个组件

2. 引入到UseDynamic.vue注册

3. 准备变量来承载要显示的"组件名"
   

4. 设置挂载点\, 使用 is 属性来设置要显示哪个组件
   

5. 点击按钮 – 修改comName变量里的"组件名"
   
   $$小结$$

• 什么是动态组件?
  在同一个挂载点, 可以切换显示不同组件
• 如何使用动态组件?
  vue内置的component组件, 配合is属性
• 如何切换?
  改变is属性的值, 为要显示的组件名即可

---

2. 组件缓存

频繁的切换会导致组件频繁创建和销毁, 性能不高

• 语法:
  • Vue内置的keep-alive组件 包起来要频繁切换的组件
    

---

3. 组件激活和非激活

扩展2个新的生命周期方法

• activated – 激活时触发
• deactivated – 失去激活状态触发

1. 如何知道缓存的组件是出现还是消失了?
   activated – 获得激活状态
   deactivated – 失去激活状态

---

4. 组件插槽

组件里的标签不确定, 通过 slot 标签, 让组件内可以接收不同的标签结构显示

• 语法口诀:

1. 组件内用占位
2. 使用组件时夹着的地方, 传入标签替换slot
   

---

5. 插槽默认内容

如果外面不给传, 想给个默认显示内容

口诀: 内放置内容, 作为默认显示内容

• 效果:
  • 不给组件传标签. slot 内容原地显示
  • 给组件内传标签, 则 slot 整体被换掉

---

6. 具名插槽

一个组件内有2处以上需要外部传入标签的地方

语法:

1. slot使用name属性区分名字
2. template配合v-slot:名字来分发对应标签

• v-slot:可以简化成#
  

---

7. 作用域插槽

使用插槽时, 想使用子组件内变量

*口诀: *

1. 子组件, 在slot上绑定属性和子组件内的值
2. 使用组件, 传入自定义标签, 用template和v-slot="自定义变量名"
3. scope变量名自动绑定slot上所有属性和值 scope = {row: defaultObj}

$$小结$$

1. 作用域插槽什么时候使用?
   使用组件插槽技术时, 需要用到子组件内变量
2. 作用域插槽使用口诀?
   子组件在slot身上添加属性和子组件的值
   使用组件处template配合v-slot=“变量名”收集slot身上的所有属性和值

---

七 自定义指令

1. 自定义指令_注册

获取标签, 扩展额外的功能

• 全局注册 - 语法

• 使用: v-指令名
  

• 局部注册 – 语法

• 使用: v-指令名
  

---

2. 自定义指令_传值

定义color指令-传入一个颜色, 给标签设置文字颜色

• 语法
  

• 使用:

  • 在标签上使用 v-color=“‘red’”

$$小结$$

1. 指令如何传值?
   v-指令名=“值”
2. 指令值变化触发什么方法?
   自定义指令的update方法而非inserted方法

---