当前位置:网站首页 > Vue.js开发 > 正文

vue2生命周期有几个(vue2的生命周期)



思考:什么时候可以发送初始化渲染请求?(越早越好)什么时候可以开始操作dom?(至少dom得渲染出来)

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

生命周期四个阶段:① 创建 ② 挂载 ③ 更新 ④ 销毁

1.创建阶段:创建响应式数据

2.挂载阶段:渲染模板

3.更新阶段:修改数据,更新视图

4.销毁阶段:销毁Vue实例

Vue生命周期过程中,会自动运行一些函数,被称为【生命周期钩子】→ 让开发者可以在【特定阶段】运行自己的代码

 

四大阶段、八大钩子

 

1.在created中发送数据

 

2.在mounted中获取焦点

 

1.需求图示:

2.需求分析

1.基本渲染

2.添加功能

3.删除功能

4.饼图渲染

3.思路分析

1.基本渲染

  • 立刻发送请求获取数据 created
  • 拿到数据,存到data的响应式数据中
  • 结合数据,进行渲染 v-for
  • 消费统计 —> 计算属性

2.添加功能

  • 收集表单数据 v-model,使用指令修饰符处理数据
  • 给添加按钮注册点击事件,对输入的内容做非空判断,发送请求
  • 请求成功后,对文本框内容进行清空
  • 重新渲染列表

3.删除功能

  • 注册点击事件,获取当前行的id
  • 根据id发送删除请求
  • 需要重新渲染

4.饼图渲染

  • 初始化一个饼图 echarts.init(dom) mounted钩子中渲染
  • 根据数据试试更新饼图 echarts.setOptions({...})

4.代码实现

(1)静态结构
 
(2)基本渲染
 
(3)添加功能
 
(4)删除功能
 
(5)饼图渲染

画图参考官网:https://sg-info.cn/article/show/5481

(浏览器搜索echarts就可以看到)

 

到此这篇vue2生命周期有几个(vue2的生命周期)的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章,希望大家都能在编程的领域有一番成就!

版权声明


相关文章:

  • npm安装nodemodules(npm安装vue)2025-04-19 16:36:09
  • vue钩子函数和生命周期(vue的钩子函数和生命周期详解)2025-04-19 16:36:09
  • redhat6.10安装教程(redhat6.8安装教程)2025-04-19 16:36:09
  • vue2父子组件传值props(vue父子组件传值emit)2025-04-19 16:36:09
  • vb6.0名词解释大全(vbac名词解释)2025-04-19 16:36:09
  • dist反编译 vue(webpack打包vue反编译)2025-04-19 16:36:09
  • vue2和vue3区别(vue2和vue3区别面试题)2025-04-19 16:36:09
  • redhat安装步骤(安装redhat6.5)2025-04-19 16:36:09
  • vue的路由守卫有哪些钩子函数(vue的路由守卫有什么应用场景)2025-04-19 16:36:09
  • oran系统(oran 7.2)2025-04-19 16:36:09
  • 全屏图片