当前位置: 首页 > news >正文

『VUE』31. 生命周期的应用(详细图文注释)

目录

    • 在合适的时间进行操作
    • 取dom元素
    • 利用生命周期模拟网络数据发送
      • 代码示例
    • 总结


欢迎关注 『VUE』 专栏,持续更新中
欢迎关注 『VUE』 专栏,持续更新中

在合适的时间进行操作

假设网页一颗果树,我们要取dom(果实),一定要在渲染完成后才能取(果实)

通常是在组件挂载完毕mounted()(果子成熟了)取较为合适.


取dom元素

beforeMount()挂载之前,underfind
mounted()挂载完毕,才能拿到dom

app.vue

<template><h3>生命周期</h3><p ref="msg">{{ message }}</p><button @click="updatedData">修改数据</button>
</template><script>
export default {data() {return {message: "qwer",};},methods: {updatedData() {this.message = this.message + "asdf";},},beforeCreate() {console.log("创建之前~");},created() {console.log("创建完毕");},beforeMount() {console.log("挂载之前");console.log(this.$refs.msg); //underfind},mounted() {console.log("挂载完毕");console.log(this.$refs.msg);},beforeUpdate() {console.log("更新之前");},updated() {console.log("更新完毕");},beforeUnmount() {console.log("销毁之前");},unmounted() {console.log("销毁完毕");},
};
</script>

利用生命周期模拟网络数据发送

一个常用的应用是我们接收到一组json数据,然后在前端可视化,在我们挂载完毕的生命周期后进行渲染.所以通过在挂载完毕后加入数据的方式,模拟网络数据发送到网页的过程.

data数据初始化是在create之后的,表示数据初始化完毕,所以我们created()中赋值数据,实际开发中不是赋值是从某些接口获取.
在这里插入图片描述

  created() {console.log("创建完毕");this.banner = [{title: "mzh",content: "wg191",},{title: "ljc",content: "wg191",},{title: "ltl",content: "wg191",},];},

但是你也可以放在mounted()表示结构已经渲染完成,一般来说结构更重要,类似京东的下拉刷新商品,可以看到结构是已经有了的,但是数据是稍后出现的.

代码示例

<template><h3>生命周期</h3><p ref="msg">{{ message }}</p><button @click="updatedData">修改数据</button><ul><li v-for="(item, index) of banner" :key="index"><h3>{{ item.title }}</h3><h3>{{ item.content }}</h3></li></ul>
</template><script>
export default {data() {return {message: "qwer",banner: [],};},methods: {updatedData() {this.message = this.message + "asdf";},},beforeCreate() {console.log("创建之前~");},created() {console.log("创建完毕");},beforeMount() {console.log("挂载之前");console.log(this.$refs.msg); //underfind},mounted() {console.log("挂载完毕");console.log(this.$refs.msg);this.banner = [{title: "mzh",content: "wg191",},{title: "ljc",content: "wg191",},{title: "ltl",content: "wg191",},];},beforeUpdate() {console.log("更新之前");},updated() {console.log("更新完毕");},beforeUnmount() {console.log("销毁之前");},unmounted() {console.log("销毁完毕");},
};
</script>

总结

大家喜欢的话,给个👍,点个关注!给大家分享更多计算机专业学生的求学之路!

版权声明:

发现你走远了@mzh原创作品,转载必须标注原文链接

Copyright 2024 mzh

Crated:2024-3-1

欢迎关注 『VUE』 专栏,持续更新中
欢迎关注 『VUE』 专栏,持续更新中
『未完待续』


相关文章:

『VUE』31. 生命周期的应用(详细图文注释)

目录 在合适的时间进行操作取dom元素利用生命周期模拟网络数据发送代码示例 总结 欢迎关注 『VUE』 专栏&#xff0c;持续更新中 欢迎关注 『VUE』 专栏&#xff0c;持续更新中 在合适的时间进行操作 假设网页一颗果树,我们要取dom(果实),一定要在渲染完成后才能取(果实) 通常…...

Mybatis框架之建造者模式 (Builder Pattern)

MyBatis 框架中大量使用了 建造者模式 (Builder Pattern) 来构建复杂的对象&#xff0c;尤其是在 SQL 语句的解析、配置对象的创建以及动态 SQL 的生成 等方面。建造者模式使得 MyBatis 能够更灵活、清晰地构建对象&#xff0c;尤其是那些需要多步创建和配置的复杂对象。 1. 什…...

Java从入门到精通笔记篇(十三)

与流处理 ambda表达式 定义 lambda表达式不能被独立执行&#xff0c;因此必须实现函数式接口&#xff0c;并且会返回一个函数式接口的对象。 可将其语法用下列的方式理解 误区警示 “->”符号是由英文状态下的“-”和“>”组成的&#xff0c;符号之间没有空格。 lambd…...

嵌入式:STM32的启动(Startup)文件解析

相关阅读 嵌入式https://blog.csdn.net/weixin_45791458/category_12768532.html?spm1001.2014.3001.5482 启动文件(Startup File)是嵌入式系统开发中的核心组件之一&#xff0c;它用于初始化系统并为主程序的运行做好准备。在大多数情况下&#xff0c;启动文件是用汇编语言编…...

ElasticSearch学习笔记四:基础操作(二)

一、前言 上一篇文章中我们学习了ES中的基础操作&#xff0c;包括索引和映射&#xff0c;同时也学习了ES中的基础数据类型&#xff0c;今天我们继续学习其他的数据类型。 二、复杂数据类型 1、数组&#xff08;Array&#xff09; 在ES中没有特别指定数据类型&#xff0c;换…...

ODA-em-application.log太大处理

检查oda时发现u01使用率很高&#xff0c;层层排查到是em-application.log文件太大 orcl2:/u01/app/oracle/product/11.2.0.4/dbhome_1/oc4j/j2ee/OC4J_DBConsole_oda1_orcl/logoda1>du -sh * 57G em-application.log 2.2M global-application.log 92M …...

基于现金红包营销活动的开源 AI 智能名片与 S2B2C 商城小程序融合发展研究

摘要&#xff1a;本文深入剖析现金红包这一平台补贴的营销利器在消费场景中的多元应用&#xff0c;并将其与开源 AI 智能名片、S2B2C 商城小程序相融合&#xff0c;探讨其中蕴含的创新模式与商业价值。通过详尽解析各类现金红包的使用条件&#xff0c;阐述如何巧妙运用这些营销…...

远程管理不再难!树莓派5安装Raspberry Pi OS并实现使用VNC异地连接

前言&#xff1a;大家好&#xff01;今天我要教你们如何在树莓派5上安装Raspberry Pi OS&#xff0c;并配置SSH和VNC权限。通过这些步骤&#xff0c;你将能够在Windows电脑上使用VNC Viewer&#xff0c;结合Cpolar内网穿透工具&#xff0c;实现长期的公网远程访问管理本地树莓派…...

React中 setState 是同步的还是异步的?调和阶段 setState 干了什么?

React中 setState 是同步的还是异步的 1. React 的 setState 是异步的2. 为什么 setState 在合成事件和生命周期函数中是异步的3. 为什么 setState 在原生事件和定时器中是同步的4. 为什么要这样设计&#xff1f;调和阶段是什么setState在调和阶段干了什么&#xff1f;总结&…...

【D3.js in Action 3 精译_040】4.4 D3 弧形图的绘制方法

当前内容所在位置&#xff1a; 第四章 直线、曲线与弧线的绘制 ✔️ 4.1 坐标轴的创建&#xff08;上篇&#xff09; 4.1.1 D3 中的边距约定&#xff08;中篇&#xff09;4.1.2 坐标轴的生成&#xff08;中篇&#xff09; 4.1.2.1 比例尺的声明&#xff08;中篇&#xff09;4.1…...

C++设计模式:抽象工厂模式(风格切换案例)

抽象工厂模式&#xff08;Abstract Factory&#xff09;是一种创建型设计模式&#xff0c;其核心思想是&#xff1a;为一组相关或相互依赖的对象提供一个创建接口&#xff0c;而无需指定它们具体的类。简单来说&#xff0c;就是一个工厂可以生产一系列相关的对象。 我们接下来…...

搜维尔科技:Xsens随时随地捕捉,在任何环境下实时录制或捕捉

Xsens随时随地捕捉&#xff0c;在任何环境下实时录制或捕捉 搜维尔科技&#xff1a;Xsens随时随地捕捉&#xff0c;在任何环境下实时录制或捕捉...

爬虫基础总结 —— 附带爬取案例

Crawler —— Learning experience 数据的传输&#xff1a; 在OSI七层模型中&#xff0c;传输层为源主机和目标主机之间提供可靠的数据传输和通信服务&#xff0c;在该层中&#xff0c;有两个重要的协议—— TCP与 UDP协议。 TCP协议&#xff08;传输控制协议&#xff09; …...

图像处理学习笔记-20241118

文章目录 霍夫变换基本原理霍夫变换的步骤使用 OpenCV 实现直线检测示例&#xff1a;标准霍夫变换 示例&#xff1a;概率霍夫变换参数解释霍夫变换检测圆 基于GAN的样本生成GAN的基本原理基于GAN的数据增广流程实现代码示例 同态滤波&#xff08;Homomorphic Filtering&#xf…...

不能打开网页,但能打开QQ、微信(三种方式)

1.VPN错误 下面三个开关全关闭 2.DNS问题 WINR 输入CMD打开命令行 命令行输入 ipconfig/flushdns 重启电脑 3.直接火绒&#xff08;一键修复&#xff09;...

使用 start-local 脚本在本地运行 Elasticsearch

警告&#xff1a;请勿将这些说明用于生产部署 本页上的说明仅适用于本地开发。请勿将此配置用于生产部署&#xff0c;因为它不安全。请参阅部署选项以获取生产部署选项列表。 使用 start-local 脚本在 Docker 中快速设置 Elasticsearch 和 Kibana 以进行本地开发或测试。 此设…...

计算机网络:概述知识点及习题练习

网课资源&#xff1a; 湖科大教书匠 1、因特网 网络之间需要路由器进行互联&#xff0c;互联网是网络的网络&#xff0c;因特网是最大的互联网&#xff0c;连接到网络的设备称为主机&#xff0c;一般不叫路由器为主机。 因特网发展&#xff1a;ARPNET->三级结构因特网&am…...

python蓝桥杯刷题2

1.最短路 题解&#xff1a;这个采用暴力枚举&#xff0c;自己数一下就好了 2.门牌制作 题解&#xff1a;门牌号从1到2020&#xff0c;使用for循环遍历一遍&#xff0c;因为range函数无法调用最后一个数字&#xff0c;所以设置成1到2021即可&#xff0c;然后每一次for循环&…...

在openi平台 基于华为顶级深度计算平台 openmind 动手实践

大家可能一直疑问&#xff0c;到底大模型在哪里有用。 本人从事的大模型有几个方向的业务。 基于生成式语言模型的海事航行警告结构化解析。 基于生成式语言模型的航空航行警告结构化解析。 基于生成式生物序列&#xff08;蛋白质、有机物、rna、dna、mrna&#xff09;的多模态…...

KF UKF

我需要Kalman 现在&#xff0c;主要是用来处理检测问题情况里的漏检&#xff0c;因为模拟了一段2D&#xff0c; &#xff08;x&#xff0c;y&#xff09;的数据&#xff0c;为了看效果&#xff0c;画的线尽量简单一点&#xff1a; import numpy as np import matplotlib.pyplo…...

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

华硕a豆14 Air香氛版,美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

A2A JS SDK 完整教程:快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

【网络安全】开源系统getshell漏洞挖掘

审计过程&#xff1a; 在入口文件admin/index.php中&#xff1a; 用户可以通过m,c,a等参数控制加载的文件和方法&#xff0c;在app/system/entrance.php中存在重点代码&#xff1a; 当M_TYPE system并且M_MODULE include时&#xff0c;会设置常量PATH_OWN_FILE为PATH_APP.M_T…...

Chromium 136 编译指南 Windows篇:depot_tools 配置与源码获取(二)

引言 工欲善其事&#xff0c;必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后&#xff0c;我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集&#xff0c;就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...

Linux安全加固:从攻防视角构建系统免疫

Linux安全加固:从攻防视角构建系统免疫 构建坚不可摧的数字堡垒 引言:攻防对抗的新纪元 在日益复杂的网络威胁环境中,Linux系统安全已从被动防御转向主动免疫。2023年全球网络安全报告显示,高级持续性威胁(APT)攻击同比增长65%,平均入侵停留时间缩短至48小时。本章将从…...

【51单片机】4. 模块化编程与LCD1602Debug

1. 什么是模块化编程 传统编程会将所有函数放在main.c中&#xff0c;如果使用的模块多&#xff0c;一个文件内会有很多代码&#xff0c;不利于组织和管理 模块化编程则是将各个模块的代码放在不同的.c文件里&#xff0c;在.h文件里提供外部可调用函数声明&#xff0c;其他.c文…...

【题解-洛谷】P10480 可达性统计

题目&#xff1a;P10480 可达性统计 题目描述 给定一张 N N N 个点 M M M 条边的有向无环图&#xff0c;分别统计从每个点出发能够到达的点的数量。 输入格式 第一行两个整数 N , M N,M N,M&#xff0c;接下来 M M M 行每行两个整数 x , y x,y x,y&#xff0c;表示从 …...