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

前端小白的学习之路(Vue2 三)

news 2026/2/9 1:36:22

提示：学习vue2的第三天，笔记记录：生命周期，组件(注册，传值)

一、生命周期

二、组件

1.注册组件

1)全局注册

2)局部注册

2.组件传值

1）父传子

2）子传父

3）兄弟传值

一、生命周期

在 Vue.js 2 中，每个组件实例都具有生命周期钩子函数，允许你在组件的不同阶段执行特定的操作。

beforeCreate：在实例初始化之后，数据观测(data observer) 和事件配置之前被调用。在这个阶段，实例的选项属性还未被初始化。
created：在实例创建完成后被立即调用。在这个阶段，实例已经完成了数据观测(data observer) 和属性的初始化，但是挂载还未开始，$el 属性还不存在。
beforeMount：在挂载开始之前被调用，相关的 render 函数首次被调用。
mounted：在挂载完成后被调用，el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子函数。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。
beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁后调用。
beforeDestroy：在实例销毁之前调用。在这个阶段，实例仍然完全可用。
destroyed：在实例销毁之后调用。调用后，所有的事件监听器被移除，所有的子实例也被销毁

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Vue</title></head>
<body><div id="app"><h2>数字: <span>{{num}}</span></h2><div ref="box">hello world</div></div><script src="./libs/vue@2.7.16/vue.js"></script><script>//禁止控制台输出日志信息Vue.config.productionTip = false;const vm = new Vue({//挂载容器el: "#app",// 设置数据data: {num: 0,timer: null},// 生命周期： 程序从创建到销毁的过程。注意回调函数先后顺序....// 钩子函数: 指的是回调函数，生命周期的钩子函数（在vue@2中有8个生命周期的钩子函数）// 1） 创建阶段// 创建之前执行的钩子函数beforeCreate(){console.log("1:",this.num);//undefine},// 创建后执行的钩子函数  (初始化数据)created(){console.log("2:",this.num);//0console.log(this.$refs.box);// undefined// 初始化//创建一个定时器观察update(数据更新)钩子函数的执行this.timer = setInterval(()=> {if(this.num == 5) {clearInterval(this.timer);return ;}++ this.num;},1000)},// 2）挂载阶段// 挂载之前执行的钩子函数beforeMount(){console.log("3:",this.num);//0console.log(this.$refs.box);// undefined},// 挂载后执行的钩子函数 (DOM操作)mounted(){console.log("4:",this.num);//0console.log(this.$refs.box);// <div>hello world</div>// 为了让dom操作更加稳定，可以在此处执行$nextTick回调函数// 为了减少报错，所以调用$nextTick回调函数仅在整个视图都被渲染之后才会运行的代码this.$nextTick(()=>{// 判断程序中是否存在这个标签if(this.$refs.box){// 进行dom操作this.$refs.box.style.color = "red";this.$refs.box.style.fontSize = "20px";}                   })},// 3）更新阶段// 要数据发生改变才执行的回调函数beforeUpdate(){console.log("5：",this.num);//1 ~ 5},updated(){console.log("6：",this.num);//1 ~ 5},// 4）销毁阶段// 程序不存在了，或者以后卸载组件，（显示|隐藏 v-if="false"）beforeDestroy(){console.log("7：",this.num);// 0},destroyed(){console.log("8：",this.num);// 0}})// 为了看得见销毁阶段的钩子函数被执行，可以调用销毁方法// vm.$destroy();</script>
</body>
</html>

二、组件

组件是可复用的 Vue 实例，它可以封装特定的功能和界面，并可以在应用程序中多次使用。组件使得代码更加模块化、可维护，并且提高了代码的复用性。

1.注册组件

组件只有被注册才能使用，在哪注册就只能在哪里使用

1)全局注册

通过Vue中的component方法注册组件，此方法注册的组件在任何地方都能使用

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Vue</title><style></style>
</head><body><div id="app"><el-button></el-button></div><hr><div id="app2"><el-button></el-button></div><script src="./libs/vue@2.7.16/vue.js"></script><script>// 一） 全局组件// 1. 定义按钮组件 (template选项在vue2版本中必须有根节点)const ElButton = {// 设置数据data() {return {message: "这是一个按钮123"}},// 渲染模板template: `<div><div>{{message}}</div><button @click="foo" style="padding: 10px 20px; border: 0; background-color: skyblue; color: white;">点击按钮</button>   </div>`,// 设置方法methods: {// 提示foo() {alert("您好，触发事件。。。")}}}// 2. 注册组件(此处表示全局注册)Vue.component("el-button", ElButton);//禁止控制台输出日志信息Vue.config.productionTip = false;// 创建vue实例new Vue({//挂载容器el: "#app",})new Vue({//挂载容器el: "#app2",})</script>
</body></html>

2)局部注册

通过Vue实例或某组件中的components对象注册组件，此方法注册的组件只能在注册的地方使用

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Vue</title><style></style>
</head><body><div id="app"><!-- <ElSearch></ElSearch> 错误的，驼峰注册，（-）使用 --><el-search></el-search></div><hr><div id="app2"><!-- <el-search></el-search> 错误的，该组件没有在app2中注册 --></div><script src="./libs/vue@2.7.16/vue.js"></script><script>//禁止控制台输出日志信息Vue.config.productionTip = false;// 创建vue实例new Vue({//挂载容器el: "#app",// 注册组件（此处表示局部注册）components: {// 此处注册组件名称采用驼峰命名“ElSearch”，在使用的时候需要改成 “el-search”// "el-search": {},"ElSearch": {data() {return {}},template: `<div><input type="text" placeholder="请输入关键字" style="width: 90%;height: 40px;">    </div>`},}})new Vue({//挂载容器el: "#app2",})</script>
</body></html>

注册组件注意事项：

1）采用驼峰命名法注册组件名称时“ElSearch”，使用组件时需要改用短横线“el-search”

2）不能使用html文档内置的标签名称作为组件名称例如： div header footer nav

3）组件中的data一个函数，并且返回一个对象

4） template选项需要有根节点（在vue@2版本）

5）像属性计算、侦听，过滤，生命周期的钩子和vue实例的写法一样

2.组件传值

在vue中允许组件嵌套组件但不宜嵌套过多，其中就涉及到不同组件间的数据交互的问题。

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Vue</title><style></style>
</head><body><div id="app"><element-parent></element-parent><!-- <element-child></element-child> 错误的 --></div><script src="./libs/vue@2.7.16/vue.js"></script><script>//禁止控制台输出日志信息Vue.config.productionTip = false;//定义孙组件const ElementGrandson = {template: `<div><h4>孙组件</h4></div>`,}// 定义子组件const ElementChild = {template: `<div><h3>子组件</h3><element-grandson></element-grandson>    </div>`,components: {ElementGrandson}}// 定义父组件const ElementParent = {template: `<div><h2>父组件</h2><element-child></element-child></div>`,// 在父组件中注册子组件components: {ElementChild}}// vue实例对象new Vue({//挂载容器el: "#app",// 在vue实例中注册父组件components: {ElementParent}})</script>
</body></html>

1）父传子

因为组件之间不可以直接通信，所以父组件传值给子组件，

需要在子组件中自定义属性，在props这个选项中自定义

在父组件的template模板中使用子组件时动态绑定属性

例如： <element-child v-bind:xxx="message"></element-child>

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Vue</title><style></style>
</head><body><div id="app"><element-parent></element-parent><!-- <element-child></element-child> 错误的 --></div><script src="./libs/vue@2.7.16/vue.js"></script><script>//禁止控制台输出日志信息Vue.config.productionTip = false;// 定义子组件const ElementChild = {// 父组件传值给子组件，需要在子组件中自定义属性// 通过在props选项中自定义属性接收父组件传递的数据// props: ['xxx'],props: {xxx: {default: "默认值",type: [String,Number]},xxx2:{default:'',type: [String,Number]}},template: `<div><h3>子组件</h3><p>{{xxx}}</p><p>{{xxx2}}</p></div>`}// 定义父组件const ElementParent = {// 设置数据data(){return {message: "这是父组件的数据",message2: "这是父组件的第二条数据"}},template: `<div><h2>父组件</h2><element-child v-bind:xxx="message"></element-child><element-child :xxx="100"></element-child><element-child :xxx="message" :xxx2="message2"></element-child><element-child></element-child></div>`,// 在父组件中注册子组件components: {ElementChild}}// vue实例对象new Vue({//挂载容器el: "#app",// 在vue实例中注册父组件components: {ElementParent}})</script>
</body></html>

2）子传父

传值过程中，需要在子组件中自定义事件（行为），在methods中写方法， this.$emit("child-num", {cnum: this.num})

（调用this.$emit('第一个参数是在父组件中@on监听的事件名','第二个参数(在父组件中接受子组件参数的参数名):第三个参数(需要向父组件传递的数据)

在父组件的模板中，定义一个方法用于接受子组件的数据并在子组件中绑定监听事件，例如： <element-child @child-num="jieshou"></element-child>就是也需要在父组件中写方法，接收子组件的数据。

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Vue</title><style></style>
</head><body><div id="app"><element-parent></element-parent></div><script src="./libs/vue@2.7.16/vue.js"></script><script>// 子组件传值给父组件属于负向传值，需要使用事件行为方可传递数据给父组件//禁止控制台输出日志信息Vue.config.productionTip = false;// 定义子组件const ElementChild = {data(){return {num: 100}},template: `<div><h3>子组件</h3><button @click="add">发送数据</button></div>`,methods: {add(){// 自定义行为// 参数1：在父组件中@on监听的事件名， 第二个参数(在父组件中接受子组件参数的参数名):第三个参数(需要向父组件传递的数据)this.num --;this.$emit("child-num", {cnum: this.num})}}}// 定义父组件const ElementParent = {data(){return {num: 0}},template: `<div><h2>父组件</h2><p v-if="num!=0">{{num}}</p><element-child @child-num="jieshou"></element-child></div>`,// 在父组件中注册子组件components: {ElementChild},// 编写方法methods: {// 自定义方法接受子组件的数据jieshou(data){// console.log(data)// 获取子组件传递的数据this.num = data.cnum;}}}// vue实例对象new Vue({//挂载容器el: "#app",// 在vue实例中注册父组件components: {ElementParent}})</script>
</body></html>

3）兄弟传值

兄弟传值需要定义一个新的vue实例或通过同一个父组件来共享事件。通过$emit和$on来传数据。

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Vue</title><style>#app > div {padding: 20px;border: 1px solid #000;margin-top: 10px;}</style>
</head>
<body><div id="app"><comp-a></comp-a><comp-b></comp-b></div><script src="../libs/vue@2.7.16/vue.js"></script><script>// 创建vue实例作为通信的桥梁（这种有响应式）const bridge = new Vue();// 并列关系组件const CompA = {template: `<div><h3>组件A</h3><button @click="senda">数字自增</button></div>`,data(){return {num: 100}},methods: {senda(){this.num ++;let value = this.num;bridge.$emit('xxx', value)},},created(){// 发送数据setTimeout(()=>{this.senda();},0)}}const CompB = {template: `<div><h3>组件B</h3><p>{{num}}</p></div>`,data(){return {num: 0}},created(){// 监听组件A的事件且接收组件A的数据bridge.$on("xxx",(value)=>{this.num = value;})}}//禁止控制台输出日志信息Vue.config.productionTip = false;new Vue({//挂载容器el: "#app",components: { CompA , CompB },})</script>
</body>
</html>

前端小白的学习之路(Vue2 三)

提示：学习vue2的第三天，笔记记录：生命周期，组件(注册，传值) 目录一、生命周期二、组件 1.注册组件 1)全局注册 2)局部注册 2.组件传值 1）父传子 2）子传父 3）兄弟传值一…...

编程日记 2024/4/12 3:38:53

ChatGPT 之优势与缺陷

原文： 译者：飞龙协议：CC BY-NC-SA 4.0 介绍欢迎来到《ChatGPT：好的、坏的和丑陋的》。在本书中，我们踏上了探索 ChatGPT 多面世界的旅程，这是由 OpenAI 开发的先进自然语言处理模型。随着 ChatGPT 和类似…...

编程日记 2024/4/12 3:34:49

python爬虫———post请求方式（第十四天）

🎈🎈作者主页： 喔的嘛呀🎈🎈 🎈🎈所属专栏：python爬虫学习🎈🎈 ✨✨谢谢大家捧场，祝屏幕前的小伙伴们每天都有好运相伴左右，一定要天天…...

编程日记 2024/4/12 3:33:47

51蓝桥杯之DS18B20

DS18B20 基础知识代码流程实现将官方提供例程文件添加到工程中添加onewire.c文件到keil4里面一些代码补充知识代码 #include "reg52.h" #include "onewire.h" #include "absacc.h" unsigned char num[10]{0xc0,0xf9,0xa4,0xb0,0x99,…...

编程日记 2024/4/12 3:31:42

TiDB 组件 GC 原理及常见问题

本文详细介绍了 TiDB 的 Garbage Collection（GC）机制及其在 TiDB 组件中的实现原理和常见问题排查方法。 TiDB 底层使用单机存储引擎 RocksDB，并通过 MVCC 机制，基于 RocksDB 实现了分布式存储引擎 TiKV，以支持高可用分…...

编程日记 2024/4/12 3:29:40

【c++】STl-list使用list模拟实现

主页：醋溜马桶圈-CSDN博客专栏：c_醋溜马桶圈的博客-CSDN博客 gitee：mnxcc (mnxcc) - Gitee.com 目录 1. list的介绍及使用 1.1 list的介绍 1.2 list的使用 1.2.1 list的构造 1.2.2 list iterator的使用 1.2.3 list capacity 1.2.4 …...

编程日记 2024/4/12 3:27:38

号卡极团分销管理系统 index.php SQL注入漏洞复现

0x01 产品简介号卡极团分销管理系统，同步对接多平台，同步订单信息，支持敢探号一键上架，首页多套UI+商品下单页多套模板，订单查询支持实时物流信息、支持代理商自定义域名、泛域名绑定，内置敢探号、172平台、号氪云平台第三方接口以及号卡网同系统对接！ 0x02 漏洞概述…...

编程日记 2024/4/12 3:22:35

内核驱动更新

1.声明我们是开源的 .c 文件末尾加上 2.在Kconfig里面修改设备，bool（双态）-----》tristate（三态） 3.进入menuconfig修改为M 4.编译内核 make modules 也许你会看到一个 .ko 文件 5.复制到根目录文件下在板子…...

编程日记 2024/4/12 3:20:32

故障诊断 | 一文解决，PLS偏最小二乘法的故障诊断（Matlab）

效果一览文章概述故障诊断 | 一文解决，PLS偏最小二乘法的故障诊断（Matlab）模型描述偏最小二乘法（Partial Least Squares, PLS）是一种统计建模方法，用于建立变量之间的线性关系模型。它是对多元线性回归方法的扩展，特别适用于处理高维数据和具有多重共线性的数据集。…...

编程日记 2024/4/12 3:18:31

我为什么选择成为程序员？

前言： 我选择成为程序员不是兴趣所在，也不是为了职业发展，全是生活所迫！ 第一章：那年，我双手插兜，对外面的世界一无所知时间回到2009年，时间过得真快啊，一下就是15年前…...

编程日记 2024/4/12 3:17:29

Open CASCADE学习|统计形状拓扑数量

边界表示法（Boundary Representation，简称B-Rep）是几何造型中最成熟、无二义的表示法。它主要用于描述物体的几何信息和拓扑信息。在边界表示法中，一个实体（Solid）由一组封闭的面（Face&#xff…...

编程日记 2024/4/12 3:14:26

LeetCode 热题 100 题解（二）：双指针部分（2）| 滑动窗口部分（1）

题目四：接雨水（No. 43） 题目链接：https://leetcode.cn/problems/trapping-rain-water/description/?envTypestudy-plan-v2&envIdtop-100-liked 难度：困难给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&am…...

编程日记 2024/4/12 3:13:24

常用的深度学习自动标注软件

0. 简介自动标注软件是一个非常节省人力资源的操作，而随着深度学习的发展，这些自动化标定软件也越来越多。本文章将会着重介绍其中比较经典的自动标注软件 1. AutoLabelImg AutoLabelImg 除了labelimg的初始功能外，额外包含十多种辅助标注…...

编程日记 2024/4/12 3:11:22

选择程序员是为什么？

本章节是关于为什么会选择一名程序员的经验分享首先，我为什么会选择这个方向，可能是因为钱多，学东西不就是为了赚钱嘛？这是一点，不过最让我接收这个行业的是好奇世界的新大陆，可以简单的说就是&#xff0c…...

编程日记 2024/4/12 3:10:22

线程池参数如何设置

线程池参数设置 hello丫，各位小伙伴们，好久不见了！ 下面，我们先来复习一下线程池的参数 1、线程池参数有哪些？ corePoolSize（核心线程数）：线程池中的常驻核心线程数。即使这些线程…...

编程日记 2024/4/12 3:08:20

qt环境搭建-镜像源安装Qt Creator（5.15.2）以及配置环境变量

前言： 版本：5.15.2 镜像源：ustc与清华纯小白，找了半天的镜像源安装qtcreator，搞了半天结果安装的是最新的，太新的对小白很不友好，bug比较多，支持的系统也不全，口碑不…...

编程日记 2024/4/12 3:05:17

SQL Server详细安装使用教程

1.安装环境现阶段基本不用SQL Server数据库了，看到有这样的分析话题，就把多年前的存货发一下，大家也可以讨论看看，思路上希望还有价值。 SQL Server 2008 R2有32位版本和64位版本，32位版本可以安装在Windows XP及以上…...

编程日记 2024/4/12 3:03:15

深度解读C++17中的std::string_view：解锁字符串处理的新境界

深入研究C17中的std::string_view：解锁字符串处理的新境界一、简介二、std::string_view的基础知识2.1、构造函数2.2、成员函数三、std::string_view为什么性能高？四、std::string_view的使用陷阱五、std::string_view源码解析六、总结一、简介 C中有…...

编程日记 2024/4/12 3:02:12

汇编基础-----常见命令基本使用

汇编基础-----常见命令基本使用 MOV：将数据从一个位置复制到另一个位置。 MOV destination, source例如： MOV RAX, RBX ; 将RBX寄存器中的值复制到RAX寄存器中ADD/SUB：将两个操作数相加或相减。 ADD destination, source SUB destinatio…...

编程日记 2024/4/12 3:01:09

科研学习|可视化——相关性结果的可视化

一、相关性分析介绍相关性分析是指研究两种或者两种以上的变量之间相关关系的统计分析方法，一般分析步骤为： 1）判断变量间是否存在关联；2）分析关联关系（线性/非线性）、关联方向（正相…...

编程日记 2024/4/12 3:00:08

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用，操作系统：Ubuntu24.04，Neofj版本：2025.04.0。 Apt安装 Neofj可以进行官网安装：Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法最新版…...

编程新知 2026/2/8 4:37:08

新能源汽车智慧充电桩管理方案：新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及，充电桩作为核心配套设施，其安全性与可靠性备受关注。然而，在高温、高负荷运行环境下，充电桩的散热问题与消防安全隐患日益凸显，成为制约行业发展的关键瓶颈。如何通过智慧化管理手段优化散…...

编程新知 2026/1/29 3:00:56

从零实现STL哈希容器：unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享希望也能为你带来些帮助~ 那咱们废话不多说，直接开始吧！ 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

编程新知 2026/1/31 12:47:25

JUC笔记(上)-复习涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换即使单核CPU也可以进行多线程执行代码，CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短，所以CPU会不断地切换线程执行，从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

编程新知 2026/1/31 23:25:09

智能分布式爬虫的数据处理流水线优化：基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天，数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具，在大规模数据获取中发挥着关键作用。然而，传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时，常出现数据质…...

编程新知 2026/2/6 1:04:23

Mac下Android Studio扫描根目录卡死问题记录

环境信息操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象在项目开发过程中，提示一个依赖外部头文件的cpp源文件需要同步，点…...

编程新知 2026/2/6 1:00:00

iOS性能调优实战：借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中，性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期，开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发，但背后往往隐藏着系统资源调度不当…...

编程新知 2025/9/24 12:50:07

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...

编程新知 2025/10/20 4:39:36