生命周期, axios, $refs和$nextTick, 购物车案例

◆ Vue生命周期

Vue_生命周期

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

Vue的生命周期是什么?

从Vue实例, 创建到销毁的过程

钩子函数

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

作用: 特定的时间点，执行特定的操作

  场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据

  分类: 4大阶段8个方法

初始化

beforeCreate

created

挂载

beforeMount

mounted

更新

beforeUpdate

updated

销毁

beforeDestroy

destroyed

如何知道Vue生命周期到达了什么阶段?

使用钩子函数

钩子函数有哪些?

初始化 / 挂载 / 更新 / 销毁

初始化

Vue实例从创建到编译模板执行了哪些钩子函数?

beforeCreate / created

created函数触发能获取data?

能获取data, 不能获取真实DOM

挂载

Vue实例从创建到显示都经历了哪些钩子函数?

beforeCreate / created / beforeMount / mounted

created函数里, 能获取真实DOM吗?

不能获取真实DOM

在什么钩子函数里可以获取真实DOM?

mounted

更新

什么时候执行updated钩子函数

当数据发生变化并更新页面后

在哪可以获取更新后的DOM

在updated钩子函数里

销毁

一般在beforeDestroy/destroyed里做什么?

手动消除计时器/定时器/全局事件

◆ axios使用

axios 是一个专门用于发送ajax请求的库

  官网: http://www.axios-js.com/

  特点

  支持客户端发送Ajax请求

  支持服务端Node.js发送请求

  支持Promise相关用法

  支持请求和响应的拦截器功能

  自动转换JSON数据

axios 底层还是原生js实现, 内部通过Promise封装的

什么是ajax?

一种前端异步请求后端的技术

ajax原理?

浏览器window接口的XMLHttpRequest

axios是什么?

基于原生ajax+Promise技术封装通用于前后端的请求库

使用axios获取数据

 

axios如何发起一次get请求?

在method选项配置为true / 也可以默认不写

axios函数调用原地结果是什么?

是一个Promise对象

如何拿到Promise里ajax的成功或失败的结果?

then() / catch()

使用axios传参

 

ajax如何给后台传参?

在url?拼接 – 查询字符串

在url路径上 – 需要后端特殊处理

在请求体 / 请求头 传参给后台

axios哪个配置项会把参数自动写到url?后面

params

axios使用 发布书籍

 

post请求方式, 一般在哪里传递数据给后台?

请求体中

axios哪个选项, 可以把参数自动装入到请求体中?

data选项

axios默认发给后台请求体数据格式是?

json字符串格式

axios全局配置

配置基础地址, 统一管理

想学习axios更多的知识应该去哪里?

官网多阅读, 多看多总结, 任何库和插件都是

axios如何配置基地址?

axios.defaults.baseURL

 

---

 

◆ $refs和$nextTick使用

获取DOM

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

Vue中如何获取原生DOM呢?

用id属性或者ref属性都可以

获取组件对象

通过ref属性获取组件对象

如何获取组件对象呢?

目标组件添加ref属性

this.$refs.名字 获取组件对象

拿到组件对象能做什么?

调用组件里的属性/方法

 

$nextTick使用

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

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

data改变更新DOM是同步还是异步的?

异步

我们可以在哪里访问到更新后的DOM呢?

this.$nextTick里的函数体

updated生命周期钩子函数

组件name属性使用

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

总结

 

组件使用分为几步?

创建组件 / 引入组件 / 注册组件 / 使用组件

注册组件名还可以用什么?

用组件对象的name属性的值

 

---

 

◆ 购物车案例

组件文件结构

App.vue

 

MyHead.vue

 

MyGoods.vue

 

MyFooter.vue

 

 

MyConent.vue