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

Vue组件原理知识(1)

Vue 组件知识整理(1)

文章目录

  • Vue 组件知识整理(1)
    • 一、组件介绍
      • 1.1 传统方式与组件方式编写应用对比
    • 二、组件使用
      • 2.1 非单文件组件的使用
        • **1. 组件的创建**
        • **2. 组件的注册**
        • **3. 组件的使用**
        • **4. Vue中使用组件的三大步骤总结**
        • **5. 组件使用的注意事项**
        • **6. 组件的嵌套**
        • **7. VueComponent**
        • **8. Vue 与 VueComponent 的关系**

一、组件介绍

1.1 传统方式与组件方式编写应用对比

传统方式编写应用
组件方式编写应用

  组件的定义:实现应用中局部功能代码资源集合

  • 代码包含:html、css、js 代码。

  • 资源包含:各种图片、视频、音频、字体等资源文件。

二、组件使用

2.1 非单文件组件的使用

  非单文件组件:一个文件中包含有多个组件。( 一个a.html 文件中包含了多个组件)

  用下图练习使用组件的过程:

练习组件样例

  常规实现代码:

<head><meta charset="UTF-8"><title>基本使用</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><div id="root"><h2>学校名称:{{ schoolName }}</h2><h2>学校地址:{{ address }}</h2><hr><h2>学生名称:{{ studentName }}</h2><h2>学生年龄:{{ age }}</h2></div><script type="text/javascript">Vue.config.productionTip = false// 创建 Vue 实例对象 vmnew Vue({el:"#root",data:{schoolName:"杭州电子科技大学",address:"浙江杭州",studentName:"张三",age:22}})</script> 
</body>

  根据页面结构,我们可以把学校的信息展示当做一个 school 组件,学生的信息当做另一个 student 组件来制作上图效果。

  • 1. 组件的创建

  组件的创建与 Vue 实例对象 vm 的方式:

// 创建 school 组件
const school = Vue.extent({/* 配置对象 */})
// 创建 Vue 实例对象 vm
const vm = new Vue({/* 配置对象 */})

  创建组件传入参数的配置对象和创建 Vue 实例对象 vm 传入参数的配置对象几乎一致。当我们把创建 Vue 实例对象 vm 传入的配置项直接复制到创建 school 组件的传入参数时,控制台会报两个错误:

const school = Vue.extent({el:"#root",	// 组件定义时,一定不要写el配置项,因为最终所有的组件都要被一个Vue实例对象vm管理,由vm决定服务于哪个容器。data:{schoolName:"杭州电子科技大学",address:"浙江杭州",studentName:"张三",age:22}
})
组件创建与Vue实例创建的区别

  1. el 配置项只能在 new Vue() 的配置对象中使用。el 是配置当前实例为哪个容器(div)服务的,当我们创建组件时,并不能确定该组件以后会用在什么地方,所以组件的创建不要写 el 配置项。

  2. data配置项应该要写成一个函数,函数中返回数据对象。因为组件是会在多处使用的,通过函数返回组件数据对象的方式做到了不同地方引用的组件数据是相互独立的,操作互不影响。

  正确的创建 school 和 student 组件,将组件中的结构 template 配置项也加入,template 配置项中只能有一个根元素。

const school = Vue.extend({template:`<div><h2>学校名称:{{ schoolName }}</h2><h2>学校地址:{{ address }}</h2>  </div>`,data() {return {schoolName: "杭州电子科技大学",address: "浙江杭州",}}
})
const student = Vue.extend({template:`<div><h2>学生名称:{{ studentName }}</h2><h2>学生年龄:{{ age }}</h2></div>`,data() {return {studentName: "张三",age: 22}}
})
  • 2. 组件的注册

局部注册:在一个 Vue 实例对象中注册组件,注册的组件只能提供给当前的 Vue 实例对象使用。

new Vue({el:'#root',// 组件注册配置项(局部注册)components:{xuexiao:school,xuesheng:student}
})

  组件的注册可以在Vue 实例对象中通过 components 配置项去注册,配置项中用 {使用时的组件名:创建时的组件名, ...} 对象去注册组件。上例中把创建的 school 组件注册名为 xuexiao 的使用时组件名。

  注意📢:一般注册的组件使用名和组件的创建名保持一致,且可以简写:

new Vue({el:'#root',// 组件注册配置项(局部注册)components:{school:school,student			// 简写}
})

全局注册:在 Vue 的 component 属性上全局注册组件,注册的组件在所有的 Vue 实例对象上都可以使用 。

// Vue.component('使用时的组件名',创建时的组件名)
Vue.component('student',student)
  • 3. 组件的使用

<body><div id="root"><!-- 3.使用组件标签 --><school></school><hr><student></student></div><script type="text/javascript">Vue.config.productionTip = false// 1.创建 school 组件const school = Vue.extend({template:`<div><h2>学校名称:{{ schoolName }}</h2><h2>学校地址:{{ address }}</h2>  </div>`,data() {return {schoolName: "杭州电子科技大学",address: "浙江杭州",}}})// 1.创建 student 组件const student = Vue.extend({template:`<div><h2>学生名称:{{ studentName }}</h2><h2>学生年龄:{{ age }}</h2></div>`,data() {return {studentName: "张三",age: 22}}})// 创建 Vue 实例对象 vmnew Vue({el:"#root",// 2.注册组件components:{school,student}})</script>
</body>
  • 4. Vue中使用组件的三大步骤总结

一、定义组件(创建组件)

  使用 Vue.extend(options)创建,其中 options 和 new Vue(options)时传入的那个 options几乎一样,两点区别如下:

  1. el 配置项不要写。------最终所有的组件都要经过一个vm的管理,由vm中的el决定服务哪个容器。

  2. data 配置项必须写成函数。------ 避免组件被复用时,组件数据存在引用关系。

  备注:使用 template 配置项可以配置组件结构。

二、如何注册组件

  1. 局部注册:靠 new Vue 的时候传入 components 配置项注册。

  2. 全局注册:靠 Vue.component(‘使用组件名’, 创建组件名) 注册。

三、使用组件标签:

  <school></school>

  • 5. 组件使用的注意事项

组件使用名的命名规范

  1. 组件使用名由一个单词组成的

      可以小写 school 或首字母大写 School ,因为 Vue 开发者工具里都会把组件名转成大写显示。所以很多开发人员习惯将一个单词的组件名写成首字母大写的形式,与开发工具显示对应,同时也与传统 HTML 标签做区分。

  2. 组件使用名由多个单词组成的

      可以全小写 my-school ,中间用 ’ - ’ 连接。但局部注册组件是要写成 components{my-school:school} ,此时 Vue 的开发者工具里展示的是MySchool

      可以每个单词首字母大写MySchool。使用时也是<MySchool></MySchool>,这种情况需要Vue脚手架支持,非脚手架环境里会出错,如下图:

组件创建与Vue实例创建的区别

备注:

  (1)组件使用名尽可能回避 HTML 中已有的元素名称,例如:h2、H2(h2会直接报错,H2会直接无效变成普通的h2标签)

  (2)可以在创建组件时使用 name 配置项指定组件在开发者工具中呈现的名字。

组件的使用方式

  (1)开始结束标签形式<school></school>

  (2)自闭合标签形式<school/> 在非脚手架环境下会导致后续组件无法渲染。

创建组件的简写方式

const school = Vue.extend(options)
// 可简写为:
const school = options
  • 6. 组件的嵌套

  组件的使用往往会出现嵌套关系,被嵌套的子组件需要注册到父组件中,使用也是在父组件的template配置项中使用。

  一般开发都会有一个管理的 app 组件,管理其他所有实现功能的子组件,app 组件被唯一的 Vue 实例对象 vm 管理。

  • 7. VueComponent

<body><div id="root"></div><script type="text/javascript">// 创建组件const student = Vue.extend({template:`<div><h2>学生姓名:{{ name }}</h2><h2>学生年龄:{{ age }}</h2></div>`,data(){return{name:"张三",age:18}}})// 打印组件console.log(student);// 创建 Vue 实例对象 vmnew Vue({el:"#root",template:`<student></student>`,components:{student}})</script>
</body>
组件的类型

  VueComponent 是组件的构造函数。理论上构造函数的使用是 new VueComponent(options) 的形式。我们在使用组件时<school></school> vue 自动帮我们调用了 school 组件的构造函数 VueComponent()。

  注意📢:所有定义组件都是返回一个全新的 VueComponent() 构造函数,在使用组件的时候都是调用对应的构造函数,只是名称一样而已。如下两个组件做验证:

<body><div id="root"></div><script type="text/javascript">Vue.config.productionTip = false// 创建student组件const student = Vue.extend({template:`<div><h2>学生姓名:{{ name }}</h2><h2>学生年龄:{{ age }}</h2></div>`,data(){return{name:"张三",age:18}}})// 创建school组件const school = Vue.extend({template:`<div><h2>学校名称:{{ name }}</h2><h2>学校地址:{{ address }}</h2></div>`,data(){return{name:"杭州电子科技大学",address:"浙江杭州"}}})// 打印学生组件console.log("学生组件:",student);// 打印学校组件console.log("学校组件:",school);// 确认这两个组件是否相等console.log("student===school??:",student === school);// 创建 Vue 实例对象 vmnew Vue({el:"#root",template:`<div><student></student><school></school></div>`,components:{student,school}})</script>
</body>
VueComponent构造函数

  我们可以在vue 源码中找到这个构造函数:

VueComponent构造函数源码

关于 VueComponent 知识汇总:

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

2、我们只需要写 <school/><school></school> ,Vue解析时会帮我们创建 school 组件的实例对象,即 Vue 帮我们执行的 new VueComponent(options)

3、每次调用 Vue.extend,返回的都是一个全新的VueComponent。

4、关于 this 指向:

(1)组件配置中:data 函数、methods 中的函数、watch 中的函数、computed 中的函数,他们的 this 均是【VueComponent实例对象】。

(2)new Vue() 配置中:data 函数、methods 中的函数、watch 中的函数、computed 中的函数,他们的 this 均是【Vue 实例对象】

5、VueComponent 的实例对象,可成为组件实例对象(vc); Vue 的实例对象(vm)。

8. Vue 与 VueComponent 的关系

  所有对象上都有 _proto_ 属性,指向缔造它的构造函数的原型对象

  所有的构造函数上都有 prototype 属性,指向自己的原型对象

  Vue 做了个重要的操作:将 VueComponent 构造函数的原型对象的原型对象指向了 Vue 构造函数的原型对象。这样做可以让组件实例对象(vc)可以访问到 Vue 原型上的属性、方法。

Vue 与 VueComponent 的关系

相关文章:

Vue组件原理知识(1)

Vue 组件知识整理&#xff08;1&#xff09;文章目录Vue 组件知识整理&#xff08;1&#xff09;一、组件介绍1.1 传统方式与组件方式编写应用对比二、组件使用2.1 非单文件组件的使用**1. 组件的创建****2. 组件的注册****3. 组件的使用****4. Vue中使用组件的三大步骤总结***…...

Linux:IO库函数

目录标准库IO函数一、fopen二、fwrite三、fread四、fseek五、fclose在编写程序时&#xff0c;离不开IO操作&#xff0c;最常见的IO操作就是用printf函数进行打印&#xff0c;本文主要介绍的是封装后的IO库函数。 标准库IO函数 常使用的IO库函数如下&#xff1a; 函数作用fop…...

Go爬虫学习笔记

N002.02 Go分布式爬虫实战 开篇 学习三阶段 入门&#xff0c;照猫画虎底层&#xff0c;了解方方面面&#xff0c;深入阅读源码和书籍借助开源组件来进行复杂设计&#xff0c;窥探各个组件赋能业务 分布式系统&#xff1a; 扩展性一致性可用性高并发微服务 爬虫&#xff1…...

数据结构课程设计:高铁信息管理系统(C++实现)

目录 简介实验输出实验要求代码运行环境结语简介 Hello! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~ ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计算机专业,获得过国家奖学金,有幸在竞赛中拿过一些国奖…...

Python 模块之 datetime

datetime 对象格式化为字符串 标准转换格式符号&#xff1a; %a 本地星期的短名称 如&#xff1a;Sun, Mon, ..., Sat (en_US); So, Mo, ..., Sa (de_DE) %A 本地星期全名称 如 &#xff1a;Sunday, Monday, ..., Saturday (en_US);Sonntag, Montag, ..., Samstag (de_DE) %w…...

linux安装编译ffmpeg

ffmpeg下载&#xff1a;http://ffmpeg.org/releases可以下载适合自己的版本。我下载的是5.0版本&#xff0c;然后解压&#xff1a;tar xvf ffmpeg-5.0.tar.gz进入ffmpegcd ffmpeg-5.0编译ffmpeg./configure --prefix/root/ffmpeg //编译文件存放的路径如果是交叉编译添加以下参…...

嵌入式Linux驱动开发(二)LED驱动

1. Linux下LED驱动原理 与裸机区别在于&#xff0c;编写驱动要符合linux驱动框架规范。裸机直接对寄存器物理地址进行读写&#xff0c;linux下需要经过MMU。 1.1 地址映射相关概念 1&#xff09;MMU&#xff08;Memory Manage Unit - 内存管理单元&#xff09;&#xff1a; …...

C++学习

强制转换运算符 C 引入了四种不同的强制转换运算符以进行强制转换&#xff1a; const_caststatic_castreinterpret_castdynamic_cast C语言强制类型转换缺点&#xff1a; 主要是为了克服C语言强制类型转换的以下三个缺点。 没有从形式上体现转换功能和风险的不同。 例如&am…...

JavaEE简单示例——依赖注入

简单介绍&#xff1a; 首先我们要知道&#xff0c;依赖注入就是赋值&#xff0c;带着这句话去理解依赖注入就非常的简单了&#xff0c;将文中所有的依赖注入全部脑部替换成给属性赋值&#xff0c;再去理解依赖注入的概念。 依赖注入&#xff08;DI&#xff09;是指IoC容器在运…...

大数据框架之Hive: 第7章 综合案例练习(初级)

第7章 综合案例练习&#xff08;初级&#xff09; 一 环境准备 1.1 建表语句 hive> -- 创建学生表 DROP TABLE IF EXISTS student; create table if not exists student_info(stu_id string COMMENT 学生id,stu_name string COMMENT 学生姓名,birthday string COMMENT 出…...

kafka:linux 安装 kafka集群

kafka运行依赖于 jdk、zookeeper&#xff0c;kafka可视化工具选择kafka-eagle。所以要装的组件有&#xff1a;jdk、zookeeper、kafka、kafka-eagle一、安装jdk下载linux版本的jdk包&#xff0c;比如&#xff1a;jdk-8u192-linux-x64.tar.gz。将其复制到 /opt 目录下并解压&…...

springboot实现Hessian协议的RPC服务

背景 这段时间在公司接手了一个新项目&#xff0c;看到一段代码非常奇怪的&#xff0c;研究了好久。内容大概是这样 public void getUser (int id) {userService.getById(id); }当我点击这个方法进去的时候&#xff0c;我发现这个UserService类居然是导入jar包的一个接口&…...

2-6 SpringCloud快速开发入门: Eureka 服务注册中心发现与消费服务

接上一章节向Eureka 服务注册中心注册服务&#xff0c;这里讲讲Eureka 服务注册中心发现与消费服务 Eureka 服务注册中心发现与消费服务 我们已经搭建一个服务注册中心&#xff0c;同时也向这个服务注册中心注册了服务&#xff0c;接下来我们就可以发现和消费服务了&#xff0…...

Java-Web之s2-001与CommonsCollections

本文源自我个人入坑Java-Web安全的一点小经验&#xff0c;献给那些看得懂java代码但不知道从哪里入手代审的师傅们&#xff1a;&#xff09; Struts2之s2-001 环境配置 说说环境配置的问题&#xff0c;大多数人对漏洞复现的恐惧感还是来自于环境的配置&#xff0c;也许配了大…...

【JavaSE】数组的定义和使用(下)

数组的定义和使用&#xff08;下&#xff09;4. 数组练习4.1 模拟实现toString4.2 数组拷贝4.3 比较两个数组是否相同4.4 填充数组4.3 求数组中元素的平均值4.4 查找数组中指定元素&#xff08;顺序查找&#xff09;4.5 查找数组中指定元素&#xff08;二分查找&#xff09;4.6…...

Oracle 实现对全局错误语句的审计监控 ORA- alert

--将所有数据库ora-错误写入表create table error_tab (username varchar2(4000), d_current_nr_error varchar2(4000), ora_server_error_msg varchar2(4000), full_text varchar2(4000),errdate date);create or replace trigger error_triggerafter servererror on database…...

React解决样式冲突问题的方法

React解决样式冲突问题的方法 前言&#xff1a; 1、React最终编译打包后都在一个html页面中&#xff0c;如果在两个组件中取一样类名分别引用在自身&#xff0c;那么后者会覆盖前者。 2、默认情况下&#xff0c;只要导入了组件&#xff0c;不管组件有没有显示在页面中&#x…...

Go项目(用户操作微服务)

简介 用户留言、收藏、修改收货地址等&#xff0c;统一放在用户操作微服务这里按照业务类型划分微服务表设计&#xff0c;三张表// 用户收藏 type UserFav struct {BaseModel// 联合索引 idx_user_goods&#xff0c;且唯一User int32 gorm:"type:int;index:idx_user_goo…...

Spring Boot统一功能处理

目录 一、统一用户登录权限验证 1.1 自定义拦截器 1.2 将自定义拦截器加入到系统配置 1.3 统一访问前缀 二、统一异常处理 三、统一数据格式返回 一、统一用户登录权限验证 1.1 自定义拦截器 拦截器是一个普通的类&#xff0c;需要实现HandlerInterceptor接口并重写pre…...

ETCD多次出现CONTEXT DEADLINE EXCEEDED

roothqa-master-01:~# etcdctl --endpoints$ETCD_ENDPOINTS member list --write-outtable {“level”:“warn”,“ts”:“2020-03-23T14:19:45.0330800”,“caller”:“clientv3/retry_interceptor.go:61”,“msg”:“retrying of unary invoker failed”,“target”:“endpoi…...

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

连锁超市冷库节能解决方案:如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

Neo4j 集群管理:原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...

工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

MinIO Docker 部署:仅开放一个端口

MinIO Docker 部署:仅开放一个端口 在实际的服务器部署中,出于安全和管理的考虑,我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务,支持 Docker 部署,但默认情况下它需要两个端口:一个是 API 端口(用于存储和访问数据),另一个是控制台端口(用于管理界面…...