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

Vue中组件到底是什么

news 文章来源：https://blog.csdn.net/qq_42931285/article/details/129480307 2025/1/16 7:44:55

1.先说结论：

Vue中组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。

2.我们使用组件时发生了什么？
比如定义了一个school,然后在页面上使用它
我们只需要写 < school/ > 或< school >< /school>，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。

3.实际代码，我们定义一个school组件，然后在页面中打印出来。

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>VueComponent</title><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><school></school></div></body><script type="text/javascript">Vue.config.productionTip = false//定义school组件const school = Vue.extend({name:'school',template:`<div><h2>学校名称：{{name}}</h2>	<h2>学校地址：{{address}}</h2>	<button @click="showName">点我提示学校名</button></div>`,data(){return {name:'尚硅谷',address:'北京'}},methods: {showName(){console.log('showName',this)}},})const test = Vue.extend({template:`<span>atguigu</span>`})console.log('@',school)//创建vmconst vm = new Vue({el:'#root',components:{school,hello}})</script>
</html>

打印结果如下，是一个VueComponent构造函数：
在这里插入图片描述
我们也可以点进去看一下源码

在这里插入图片描述
我们使用组件时如何证明它执行了new VueComponent（）操作？
我们直接在源码中加一句代码：
在这里插入图片描述
首先我们在代码中只定义组件，并不使用。页面中只有打印出school，相当于前面说的school组件本质是个VueComponent构造函数，但是并未执行。
在这里插入图片描述
然后我们在页面中使用school组件，打印结果如下：

在这里插入图片描述
4.vm（Vue实例）和组件的关系，我们直接打印vm。

console.log(vm);

在这里插入图片描述
我们发现有个chilren属性，是个数组，展开之后发现是school对应的VueComponent实例对象
在这里插入图片描述

相关文章：

Vue中组件到底是什么

1.先说结论&#xff1a; Vue中组件本质是一个名为VueComponent的构造函数&#xff0c;且不是程序员定义的&#xff0c;是Vue.extend生成的。 2.我们使用组件时发生了什么&#xff1f; 比如定义了一个school,然后在页面上使用它 我们只需要写 < school/ > 或< school &…...

编程日记 2023/3/14 21:36:19

不同时间间隔数据对统计结果的影响

目录摘要1. 实测数据来源2. 数据分析方法3 结果分析3.1 波况分析摘要 采用不同的波浪观测方法所获得的波浪数据的时间间隔不一致&#xff0c;其数据的准确性须进行分析。基于大埕湾逐时周年波浪观测数据&#xff0c;截取不同时间间隔的波浪数据&#xff0c;采用统计和相关分析…...

编程日记 2023/3/14 21:31:16

hudi系列-数据写入方式及使用场景

hudi支持多种数据写入方式：insert、bulk_insert、upsert、boostrap，我们可以根据数据本身属性(append-only或upsert)来选择insert和upsert方式，同时也支持对历史数据的高效同步并嫁接到实时流程。 这里的使用技术组合为flink + hudi-0.11 upsert 这是hudi默认的写入方式，…...

编程日记 2023/3/14 21:26:13

C # FileStream文件流

本章讲述&#xff1a;FileStream类的基本功能&#xff0c;以及简单示例&#xff1b; 1、引用命名空间&#xff1a;using System.IO; 2、注意&#xff1a;使用IO操作文件时&#xff0c;要注意流关闭和释放问题&#xff01; 强力推荐&#xff1a;将创建文件流对象的过程写在usi…...

编程日记 2023/3/14 21:21:10

Go语言中的保留字和运算符详解

前言 &#x1f3e0;个人主页&#xff1a;我是沐风晓月 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是沐风晓月&#xff0c;双一流院校计算机专业&#xff0c;阿里云博客专家 &#x1f609;&#x1f609; &#x1f495; 座右铭&#xff1a; 先努力成长自己&#xff…...

编程日记 2023/3/14 21:16:08

Linux编译之(1)C语言基础

Linux编译之C语言基础 Author&#xff1a;Once Day Date&#xff1a;2023年3月11日 漫漫长路&#xff0c;才刚刚开始… 1.概述 在Linux下开发多源文件的C代码文件&#xff0c;是一定要了解Makefile的&#xff0c;虽然现在构建工具很多&#xff0c;但学习的一开始&#xff0…...

编程日记 2023/3/14 21:11:05

CPU平均负载高问题定位分析

一、Linux操作系统CPU平均负载 1.1什么是CPU平均负载 1.2 怎么查看平均负载数值 二、Linux操作系统CPU使用率和平均负载区别 CPU使用率和平均负载区别 三、阿里云Linux操作系统CPU压测环境准备 3.1 核心命令应用场景 3.2 模拟生产环境出现的多种问题环境准备 分析工具安…...

编程日记 2023/3/14 21:06:02

Python蓝桥杯训练：基本数据结构 [二叉树] 中

Python蓝桥杯训练&#xff1a;基本数据结构 [二叉树] 中 文章目录Python蓝桥杯训练&#xff1a;基本数据结构 [二叉树] 中一、[翻转二叉树](https://leetcode.cn/problems/invert-binary-tree/)二、[对称二叉树](https://leetcode.cn/problems/symmetric-tree/)三、[二叉树的最…...

编程日记 2023/3/14 21:01:01

读取 DTC 信息服务 (0x19) – UDS 协议

总目录链接>> AutoSAR入门和实战系列总目录 0x19读取 DTC 信息服务概述 读取 DTC 信息服务在 UDS 协议中用于从车辆或特定 ECU 或节点读取 DTC。UDS 协议的主要任务之一是故障诊断。每当车辆发生任何故障时&#xff0c;与该故障相对应的诊断故障代码&#xff08;DTC&a…...

编程日记 2023/3/14 20:55:59

Hive 分区表新增字段 cascade

背景 在以前上线的分区表中新加一个字段&#xff0c;并且要求添加到指定的位置列。 模拟测试 加 cascade 操作 创建测试表 create table if not exists sqltest.table_add_column_test(org_col1 string comment 原始数据1,org_col2 string comment 原始数据2 ) comment 增…...

编程日记 2023/3/14 20:50:57

【Java版oj】day08两种排序方法、最小公倍数

目录 一、两种排序方法 &#xff08;1&#xff09;原题再现 &#xff08;2&#xff09;问题分析 &#xff08;3&#xff09;完整代码 二、最小公倍数 &#xff08;1&#xff09;原题再现 &#xff08;2&#xff09;问题分析 &#xff08;3&#xff09;完整代码 一、两种…...

编程日记 2023/3/14 20:45:54

FinOps，从概念到落地 | UGeek大咖说第一期直播回顾（上）

2023年2月28日&#xff0c;由优维科技联合FinOps产业推进方阵举办了第1期「UGeek大咖说-极致用云共济FinOps」线上直播活动&#xff0c;来自中国信通院及美图公司技术专家共同带来了一场精彩的技术视听盛宴。 直 播 背 景 目前&#xff0c;许多以“上云”为数字化转型路径的企…...

编程日记 2023/3/14 20:40:53

k8s java程序实现kubernetes Controller Operator 使用CRD 学习总结

k8s java程序实现kubernetes Controller & Operator 使用CRD 学习总结 大纲 原理Controller 与 Operator自定义资源定义 CRD ( CustomResourceDefinition)kubernetes-client使用java fabric8io/kubernetes-client操作k8s 原生资源使用java abric8io/kubernetes-clientt操…...

编程日记 2023/3/14 20:35:51

Unity笔记：修改代码执行的默认打开方式

使用 External Tools 偏好设置可设置用于编写脚本、处理图像和进行源代码控制的外部应用程序。 External Script Editor&#xff1a;选择 Unity 应使用哪个应用程序来打开脚本文件。Unity 会自动将正确的参数传递给内置支持的脚本编辑器。Unity 内置支持 Visual Studio Commun…...

编程日记 2023/3/14 20:30:49

Linux IPC：匿名管道 与 命名管道

目录一、管道的理解二、匿名管道三、命名管道四、管道的通信流程五、管道的特性进程间通信方式有多种&#xff0c;本文介绍的是管道&#xff0c;管道分为匿名管道和命名管道。 一、管道的理解 生活中的管道用来传输资源&#xff0c;例如水、石油之类的资源。而进程间通信的管道…...

编程日记 2023/3/14 20:25:45

阿里研发工程师JAVA暑期实习一面

文章目录先说一下我自己的情况面试过程总结先说一下我自己的情况 我就读于湖南大学&#xff0c;软件工程专业&#xff0c;现在大三下 很巧的是&#xff0c;我在大二的时候就在相同的时间面过相同的部门和相同的岗位&#xff0c;所以我没有做笔试就直接让我去面试了。我当时还纳…...

编程日记 2023/3/14 20:20:44

第十四届蓝桥杯三月真题刷题训练——第 11 天

目录 第 1 题&#xff1a;卡片 题目描述 运行限制 第 2 题&#xff1a;路径_dpgcd 运行限制 第 3 题&#xff1a;字符统计 问题描述 输入格式 输出格式 样例输入 样例输出 评测用例规模与约定 运行限制 第 4 题&#xff1a;费用报销 第 1 题&#xff1a;卡片 题…...

编程日记 2023/3/14 20:15:40

机器学习入门——线性回归

线性回归什么是线性回归&#xff1f;回归分析&#xff1a;线性回归&#xff1a;回归问题求解单因子线性回归简单实例评估模型表现可视化模型展示多因子线性回归什么是线性回归&#xff1f; 回归分析&#xff1a; 根据数据&#xff0c;确定两种或两种以上变量间相互依赖的定量…...

编程日记 2023/3/14 20:10:39

Microsoft Word 远程代码执行漏洞（CVE-2023-21716）

本文转载于&#xff1a; https://mp.weixin.qq.com/s?__bizMzI5NTUzNzY3Ng&mid2247485476&idx1&sneee5c7fd1c4855be6441b8933b10051e&chksmec535547db24dc516d013d3d76097e985aaad7f10f82f15b4e355a97af75fd333acdab6232af&mpshare1&scene23&srci…...

编程日记 2023/3/14 20:05:37

Android kotlin 系列讲解（数据篇）SharedPreferences存储及测试

文章目录 一、什么是SharedPreferences1、将数据存储到SharedPreferences中2、从SharedPreferences中读取数据二、登录使用SharedPreferences一、什么是SharedPreferences SharedPreferences是使用键值对的方式来存储数据的。也就是说，当保存一条数据的时候，需要给这条数据提…...

编程日记 2023/3/14 20:00:35

一文了解Web Worker

一、概述 众所周知&#xff0c;JavaScript最初设计是运行在浏览器中的&#xff0c;为了防止多个线程同时操作DOM带来的渲染冲突问题&#xff0c;所以JavaScript执行器被设计成单线程。但是随着前端技术的发展&#xff0c;JavaScript要处理的工作也越来越复杂&#xff0c;当我们…...

编程日记 2023/3/14 19:55:34

接口文档包含哪些内容？怎么才能写好接口文档？十年测试老司机来告诉你

目录 接口文档结构 参数说明 示例 错误码说明 语言基调通俗易懂 及时更新与维护 总结 那么我们该如何写好一份优秀的接口文档呢&#xff1f; 接口文档结构 首先我们要知道文档结构是什么样子的。接口文档应该有清晰明确的结构&#xff0c;以便开发人员能快速定位自己需…...

编程日记 2023/3/14 19:50:29

java面试八股文之------Java并发夺命23问

java面试八股文之------Java并发夺命23问&#x1f468;‍&#x1f393;1.java中线程的真正实现方式&#x1f468;‍&#x1f393;2.java中线程的真正状态&#x1f468;‍&#x1f393;3.如何正确停止线程&#x1f468;‍&#x1f393;4.java中sleep和wait的区别&#x1f468;‍…...

编程日记 2023/3/14 19:45:28

CANoe中使用CAPL刷写流程详解（Trace图解）(CAN总线)

&#x1f345; 我是蚂蚁小兵&#xff0c;专注于车载诊断领域&#xff0c;尤其擅长于对CANoe工具的使用&#x1f345; 寻找组织 &#xff0c;答疑解惑&#xff0c;摸鱼聊天&#xff0c;博客源码&#xff0c;点击加入&#x1f449;【相亲相爱一家人】&#x1f345; 玩转CANoe&…...

编程日记 2023/3/14 19:40:26

【MySQL】002 -- 日志系统：一条SQL更新语句是如何执行的

此文章为《MySQL 实战 45 讲》的学习笔记&#xff0c;其课程链接可参见&#xff1a;MySQL实战45讲_MySQL_数据库-极客时间 目录 一、日志系统 1、重做日志&#xff1a;redo log&#xff08;引擎层&#xff09; 2、归档日记&#xff1a;binlog&#xff08;Server层&#xff09; …...

编程日记 2023/3/14 19:35:25

C++---背包模型---数字组合（每日一道算法2023.3.14）

注意事项&#xff1a; 本题是"动态规划—01背包"的扩展题&#xff0c;优化思路不多赘述&#xff0c;dp思路会稍有不同&#xff0c;下面详细讲解。 题目&#xff1a; 给定 N个正整数 A1,A2,…,AN&#xff0c;从中选出若干个数&#xff0c;使它们的和为 M&#xff0c;…...

编程日记 2023/3/14 19:30:22

并查集(不相交集)详解

目录 一.并查集 1.什么是并查集 2.并查集的基本操作 3.并查集的应用 4.力扣上的题目 二.三大操作 1.初始化 2.查找 3.合并 三.省份数量 1.题目描述 2.问题分析 3.代码实现 四.冗余连接 1.题目描述 2.问题分析 3.代码实现 一.并查集 1.什么是并查集 并查集&…...

编程日记 2023/3/14 19:25:18

10个最频繁用于解释机器学习模型的 Python 库

文章目录什么是XAI&#xff1f;可解释性实践的步骤技术交流1、SHAP2、LIME3、Eli54、Shapash5、Anchors6、BreakDown7、Interpret-Text8、aix360 (AI Explainability 360)9、OmniXAI10、XAI (eXplainable AI)XAI的目标是为模型的行为和决定提供有意义的解释&#xff0c;本文整理…...

编程日记 2023/3/14 19:20:16

final关键字：我偏不让你继承

哈喽&#xff0c;小伙伴们大家好&#xff0c;我是兔哥呀&#xff0c;今天就让我们继续这个JavaSE成神之路&#xff01; 这一节啊&#xff0c;咱们要学习的内容是Java所有final关键字。 之前呢&#xff0c;我们学习了继承&#xff0c;这大大提高了代码的灵活性和复用性。但是总…...

编程日记 2023/3/14 19:15:15

8大主流编程语言的适用领域，你可能选错了语言

很多人学编程经常是脑子一热然后就去网上一搜资源就开始学习了&#xff0c;但学到了后面发现目前所学的东西并不是自己最喜欢的&#xff0c;好像自己更喜欢另一个技术&#xff0c;感觉自己学错了&#xff0c;于是乎又去学习别的东西。 结果竹篮打水一场空&#xff0c;前面所付…...

编程日记 2023/3/14 19:10:12

东莞住建局官网网站/网站维护是做什么的

文件行数计算方式 1、wc命令 wc -l 0241r31TRs15n8e2jf43.csv cat 0241r31TRs15n8e2jf43.csv |wc -l灵活使用&#xff0c;配合管道 比如 cat 0241r31TRs15n8e2jf43.csv | wc -l 2、awk命令 awk {print NR} 0241r31TRs15n8e2jf43.csv|tail -n1 awk END{print NR} 0241r31TR…...

编程日记 2025/1/16 6:51:22

网站营销队伍/培训机构在哪个平台找

前言 现在Java程序员面试都是因为没有丰富的工作经验和自己过硬的技术&#xff0c;所有都不知道一般互联网应该会问什么技术问题&#xff0c;加上自己可能去面试的时候没有准备的太充分&#xff0c;一面试刚跟面试官扯几个面试题就不知道自己在哪里了&#xff0c;被怼的体无完…...

编程日记 2025/1/16 5:58:04

济宁做网站的公司/种子搜索

前提： 1. 是否带表头 SQL> set heading on SQL> set heading off 2. 控制一行长度 SQL> set line 4000 HEADING和as用法一样，只是更简略。使用HEADING后，查询时列名不变，列标题变。 语法： column 列名1 format 列长 heading 列标题，类似as后面的类容； …...

编程日记 2025/1/16 2:47:04

深圳做网站优化工资多少/百度助手下载安装

Window对象 Window对象是客户端JavaScript程序的全局对象。 计时器 setTimeout() 和 setInterval() 可以用来注册在指定的时间之后单词或重复调用的函数。 Window对象的setTimeout()方法用来实现一个函数在指定的毫秒之后运行。setTimeout()返回一个值&#xff0c;这个值可以…...

编程日记 2025/1/16 1:50:32

北京网站设计优刻/东莞网络排名优化

操作系统(Operating System, OS)是指控制和管理整个计算机系统的硬件和软件资源&#xff0c;并合理地组织调度计算机的工作和资源的分配&#xff0c;以提供给用户和其他软件方便的接口和环境的程序集合。计算机操作系统是随着计算机研究和应用的发展逐步形成并发展起来的&#…...

编程日记 2025/1/16 1:17:17

辽宁省精神文明建设工作三大创建活动网站/360推广

当满足以下三个条件时&#xff0c;两者会输出相同信息。 1. 服务器为80端口 2. apache的conf中ServerName设置正确 3. HTTP/1.1协议规范 不同点&#xff1a; 通常情况&#xff1a; _SERVER[“HTTP_HOST”] 在HTTP/1.1协议规范下&#xff0c;会根据客户端的HTTP请求输出信息…...

编程日记 2025/1/16 0:16:05