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

已于 2022-03-03 19:14:04 修改
阅读量302 收藏
点赞数
文章标签： vue 前端 组件化
于 2022-03-01 00:19:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_66430536/article/details/123195786
版权
本文探讨了Vue组件的生命周期钩子函数，详细介绍了如何使用axios进行数据获取和全局配置。同时，讲解了$refs和$nextTick的用法，包括$nextTick在更新DOM后的使用场景。此外，通过一个购物车案例，展示了组件间的交互和通信，具体涉及App、MyHead、MyGoods、MyFooter和MyConent等组件的结构和交互。
摘要由CSDN通过智能技术生成

◆ 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 

 

蒙奇-D-鑫伟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React 制作简单的购物车
AS_Tammy的博客
03-29 2168
刚刚开始接触React,于是做了一个简单的购物车练练手 先上一下效果图: 在做这个购物车前,先分析好购物车的结构,该怎么分割组件,怎么组合组件,组件里用具备那些功能,组件间应该怎么通信等.以下为实现步骤: 第一步,先画图,分割组件 如上图结构所示,把购物车分隔为ShopCar,ShopRow,TotalBlock这三个组件,ShopCar 代表购物车表格,也就是购物车内容的总和Shop...
生命周期，vue中的axios，ref引用（$refs），$nextTick
Yous的博客
08-17 1339
async/await其实是Promise的语法糖，它能实现的效果都能用then链来实现。从字面上来看，async是“异步”的简写，await译为等待，所以我们很好理解async声明function是异步的，await等待某个操作完成。联想一下Promise特点——异步无等待，所以当没有await语句执行async函数，它就会立即执行，返回一个Promise对象，非阻塞，与普通的Promise对象函数一致。按照语法说明，await等待的是一个Promise对象，或者是其他值（也就是说可以等待任何值），...
axios和vue用$refs属性获取dom
weixin_30709809的博客
10-23 298
vue-resource更换为axiosnpm install axios/*main.js*/import axios from 'axios'Vue.prototype.$ajax = axios/*components*/import axios from 'axios' export default { created () { axios.get('./static/data....
vue学习笔记（六）——axios的使用和$refs和$nextTick使用
最新发布
weixin_56370772的博客
11-19 251
axios 是一个专门用于发送ajax请求的库官网:特点支持客户端发送Ajax请求支持服务端Node.js发送请求支持Promise相关用法支持请求和响应的拦截器功能自动转换JSON数据axios 底层还是原生js实现，内部通过Promise封装的什么是ajax?一种前端异步请求后端的技术ajax原理?浏览器window接口的XMLHttpRequestaxios是什么?基于原生ajax+Promise技术封装通用于前后端的请求库。
vue生命周期
Henry_ID的博客
07-20 341
vue生命周期 1.0_人的-生命周期 一组件从 创建 到 销毁 的整个过程就是生命周期 Vue_生命周期 1.1_钩子函数 目标: Vue 框架内置函数，随着组件的生命周期阶段，自动执行 作用: 特定的时间点，执行特定的操作 场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据 分类: 4大阶段8个方法 初始化 挂载 更新 销毁 阶段 方法名 方法名 初始化 beforeCreate created 挂载 befor
【Vue知识点- No5.】生命周期、axios、购物车案例
qq_48687155的博客
07-23 544
生命周期、axios、购物车案例
Vue声明周期_axios_购物车案例
xinyue_1208的博客
09-29 341
一组件从 创建 到 销毁 的整个过程就是生命周期 Vue的生命周期 Vue-钩子函数 4个阶段8个方法 Vue-初始化阶段 components/Life.vue - 创建一个文件 <script> export default { data(){ return { msg: "hello, Vue" } }, // 一. 初始化 // new Vue()以后, vue...
vue 生命周期 -------组件 vue更新dom是异步的
wr_qianduan的博客
02-28 742
axios 安装 yarn add axios 导入 import axios from 'axios' 使用 axios({ method: '', url: '', data: { }, params: { } }).then().catch() refs-获取DOM <template> <div> <p>1. 获取原生DOM元素</p> ...
案例:购物车案例（vue组件总结）
酷爱前端的小陈博客
04-25 2536
1. 案例效果 2. 实现步骤 ① 初始化项目基本结构 ② 封装MyHeader 组件 ③ 基于axios 请求商品列表数据（ GET 请求，地址为 https://www.escook.cn/api/cart） ④ 封装MyFooter 组件 ⑤ 封装MyGoods 组件 ⑥ 封装MyCounter 组件 3. 完整代码： 项目目录： main.js部分： import Vue from 'vue' import App from './App.vue' ...
生命周期_组件进阶
m0_50125215的博客
07-09 244
今日学习目标 能够说出vue组件生命周期 能够掌握axios的使用 能够了解$refs, $nextTick使用和name使用 能够完成购物车案例开发 1. vue生命周期 1.0_人的-生命周期 一组件从 创建 到 销毁 的整个过程就是生命周期 1.1_钩子函数 目标: Vue 框架内置函数，随着组件的生命周期阶段，自动执行 作用: 特定的时间点，执行特定的操作 场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据 分类: 4大阶段8个方法
Vue实现简单购物车
DOM曼珠沙华的博客
05-19 4389
这里先分析一下vue项目的文件结构，组件、入口文件及配置可以添加的位置。 其中： assets表示静态资源，如css，js components是公共组件存放的位置 App.vue是根组件 main.js为入口文件 组件化 需要在项目src文件夹下components文件夹内创建Cart.vue文件作为购物车组件。 所以在新建完成后需要在App.vue根组件内使用。 组件按需引入及注册 import Cart from './components/Cart.vue' export default{ na
三个案例掌握this.$nextTick()方法的使用/Vue中的$nextTick()
天命爱心职责的博客
02-14 2万+
his.$nextTick() 解释为在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM. 也就是说，当dom元素发生改变，重新渲染dom树后，再执行vue.$nextTick()里面的内容。
Vue生命周期与Vue.nextTick()使用
记录
07-08 1102
实例生命周期： https://segmentfault.com/a/1190000008570622.jpg image.png beforeCreate:在实例初始化之后，数据观测data observer(props、data、computed) 和 event/watcher 事件配置之前被调用。 created:实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，..
理解 $nextTick 的作用
热门推荐
大灰狼的小绵羊哥哥的博客
05-11 15万+
有同学在看 Vue 官方文档时，对 API 文档中的 Vue.nextTick 和 vm.$nextTick 的作用不太理解。 其实如果看一下深入响应式原理 - vue.js中的有关内容，可能会有所理解，不过有些同学可能看到这个标题之后就选择跳过了，因此这里简述如下： Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。 $nextT
Vue生命周期、axios、$nextTick、$ref
不明真相的末影人
07-05 303
生命周期 vue的生命周期就是vue实例从创建到销毁的过程 vue生命周期的钩子函数 1 beforeCreate 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 2 created 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)， 属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。 3 beforeMount 在挂载开始之前被调用：相关的
Vue进阶（六十二）：理解$nextTick()
IT全栈 华强工作室
07-15 8375
实例介绍： 有一个div，默认用了v-if隐藏，点击按钮之后，改变v-if的值让他显示出来，并且取到div中的值: <div id=app> <div id="div" v-if="showDiv">我是显示文本</div> <button @click="showAndGetText">获取内容</button > </d...
vue中数据异步更新($nextTick)的问题
liuyuhua666的博客
06-19 3957
在vue中数据向视图上进行更新的操作，是异步的 异步的就意味着，在代码中更改完数据之后，直接去访问页面中的元素中的内容，还是老数据 那么如何去解决这个问题呢？ vue中提供了$nextTick方法： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> ...
vue2.0$nextTick监听数据渲染完成之后的回调函数
iceking66的博客
10-11 1万+
vue里面本身带有两个回调函数： 一个是`Vue.nextTick(callback)`，当数据发生变化，更新后执行回调。 另一个是`Vue.$nextTick(callback)`，当dom发生变化，更新后执行的回调。 栗子： ... {{item}} ... new Vue({ el:'#demo', data:{
VUE中Vue.nextTick()和this.$nextTick()怎么使用？
Power的博客
01-02 4万+
VUE,Vue.nextTick(),this.$nextTick()
axios $.get 参数
06-02
axios 和 jQuery 的 $.get 都是用于发送 GET 请求的，但是参数的传递方式稍有不同。 在 axios 中，可以通过以下方式传递参数： ``` axios.get(url, { params: { key1: value1, key2: value2 } }) ``` 其中，`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值