Vue全流程--Vue2组件的理解第二部分

组件命名规则

好的命名规则可以省去很多不必要的麻烦,这个好习惯还是要养成的

一个单词组成:

第一种写法(首字母小写):school

第二种写法(首字母大写):School

多个单词组成:

第一种写法(kebab-case命名):my-school

第二种写法(CamelCase命名):MySchool (需要Vue脚手架支持)

备注:

(1).组件名尽可能回避HTML中已有的元素名称,例如:h2、H2都不行。

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

2.关于组件标签:

第一种写法:<school></school>

第二种写法:<school/>

备注:不用使用脚手架时,<school/>会导致后续组件不能渲染。

组件嵌套

组件嵌套就是,一个组件里面使用了另一个组件

//定义school组件const school = Vue.extend({name:'school',template:`<div><h2>学校名称:{{name}}</h2>	<h2>学校地址:{{address}}</h2>	<student></student></div>`,data(){return {name:'尚硅谷',address:'北京'}},//注册组件(局部)components:{student}})

在一个组件里使用compents局部注册就可以了,然后调用组件student,多个组件用“,”隔开即可。

Vue与Vuecompent关系

两个构造函数的关系

先看图

在Vue中我们利用构造函数(我是以java中的构造函数角度理解),通过调用构造函数,创建实例对象(我们的网站)

在VueComponent中我们也是利用构造函数,通过调用构造函数,创建组件的实例对象(我们网站中的某一部分) 

以组件嵌套中的代码为例子

//定义school组件const school = Vue.extend({name:'school',template:`<div><h2>学校名称:{{name}}</h2>	<h2>学校地址:{{address}}</h2>	<student></student></div>`,data(){return {name:'尚硅谷',address:'北京'}},//注册组件(局部)components:{student}})

school组件就是一个VueComponent构造函数,我们不需要利用 new VueComponent(options)来创建实例,因为Vue解析的时候会自动帮我们创建实例对象。

每次调用Vue.extend,返回的都是一个全新的VueComponent。即返回的是一个全新的构造函数

补充javascript中的原型对象

1、JavaScript 中所有的对象都有一个内置属性,称为它的 prototype(原型)

2、原型是一个对象,它是其他对象的模板或蓝图。

3、故原型对象也会有它自己的原型,逐渐构成了原型链

4、当一个对象试图访问一个属性或方法时,如果在该对象自身没有找到,JavaScript 会沿着原型链向上查找,直到找到对应的属性或方法,或者达到原型链的顶端 null 为止。

5、prototype(原型对象)的 __proto__,它指向该对象的原型对象

尝试一下你能否理解下面这句话,如果理解那你这部分应该就没问题

实例对象的隐式原型对象就是其构造函数显式原型对象的值。

内置关系

 1.一个重要的内置关系:VueComponent.prototype.__proto__ === Vue.prototype

左半部分对应黄色链条所指对象

右半部分对应Vue的原型对象

 2.为什么要有这个关系:让组件实例对象(vc)可以访问到 Vue原型上的属性、方法。

两个构造函数的this对象

我们知道在Vue2中我们会用到this这个关键字。

(1).组件配置中:

data函数、methods中的函数、watch中的函数、computed中的函数 它们的this【VueComponent实例对象】。

(2).new Vue(options)配置中:

data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/13756.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【OS】AUTOSAR架构下的Interrupt详解(上篇)

目录 前言 正文 1.中断概念分析 1.1 中断处理API 1.2 中断级别 1.3 中断向量表 1.4 二类中断的嵌套 1.4.1概述 1.4.2激活 1.5一类中断 1.5.1一类中断的实现 1.5.2一类中断的嵌套 1.5.3在StartOS之前的1类ISR 1.5.4使用1类中断时的注意事项 1.6中断源的初始化 1.…

红包雨项目前端部分

创建项目 pnpm i -g vue/cli vue create red_pakage pnpm i sass sass-locader -D pnpm i --save normalize.css pnpm i --save-dev postcss-px-to-viewportpnpm i vantlatest-v2 -S pnpm i babel-plugin-import -Dhttps://vant.pro/vant/v2/#/zh-CN/<van-button click&…

深入理解k8s中的容器存储接口(CSI)

CSI出现的原因 K8s原生支持一些存储类型的PV&#xff0c;像iSCSI、NFS等。但这种方式让K8s代码与三方存储厂商代码紧密相连&#xff0c;带来不少麻烦。比如更改存储代码就得更新K8s组件&#xff0c;成本高&#xff1b;存储代码的bug还会影响K8s稳定性&#xff1b;K8s社区维护和…

DeepSeek回答禅宗三重境界重构交易认知

人都是活在各自心境里&#xff0c;有些话通过语言去交流&#xff0c;还是要回归自己心境内在的&#xff0c;而不是靠外在映射到股票和技术方法&#xff1b;比如说明天市场阶段是不修复不接力节点&#xff0c;这就是最高视角看整个市场&#xff0c;还有哪一句话能概括&#xff1…

简单说一下CAP理论和Base理论

CAP理论 什么是CAP 一致性 可用性 分区容错性&#xff1a;系统如果不能再时限内达成数据一致性&#xff0c;就说明发生了分区的情况 然后当前操作在C和A之间做出选择 例如我的网络出现问题了&#xff0c;但是我们的系统不能因为网络问题就直接崩溃 只要我们的分布式系统没…

13.PPT:诺贝尔奖【28】

目录 NO1234 NO567 NO8/9/10 NO11/12 NO1234 设计→变体→字体→自定义字体 SmartArt超链接新增加节 NO567 版式删除图片中的白色背景&#xff1a;选中图片→格式→删除背景→拖拉整个图片→保留更改插入→图表→散点图 &#xff1a;图表图例、网格线、坐标轴和图表标题…

RabbitMQ的安装

1、官网地址 下载地址&#xff1a;Installing RabbitMQ | RabbitMQhttp://www.rabbitmq.com/download.htmlhttp://www.rabbitmq.com/download.html RabbitMQ Documentation | RabbitMQhttps://www.rabbitmq.com/docshttps://www.rabbitmq.com/docs 2、Windows上安装 2.1 安装…

【LeetCode】152、乘积最大子数组

【LeetCode】152、乘积最大子数组 文章目录 一、dp1.1 dp1.2 简化代码 二、多语言解法 一、dp 1.1 dp 从前向后遍历, 当遍历到 nums[i] 时, 有如下三种情况 能得到最大值: 只使用 nums[i], 例如 [0.1, 0.3, 0.2, 100] 则 [100] 是最大值使用 max(nums[0…i-1]) * nums[i], 例…

【分布式理论六】分布式调用(4):服务间的远程调用(RPC)

文章目录 一、RPC 调用过程二、RPC 动态代理&#xff1a;屏蔽远程通讯细节1. 动态代理示例2. 如何将动态代理应用于 RPC 三、RPC 序列化四、RPC 协议编码1. 协议编码的作用2. RPC 协议消息组成 五、RPC 网络传输1. 网络传输流程2. 关键优化点 一、RPC 调用过程 RPC&#xff08…

Spring Task之Cron表达式

&#x1f31f; Spring Task高能预警&#xff1a;你以为的Cron表达式可能都是错的&#xff01;【附实战避坑指南】 开篇暴击&#xff1a;为什么你的定时任务总在凌晨3点翻车&#xff1f; “明明设置了0 0 2 * * ?&#xff0c;为什么任务每天凌晨3点执行&#xff1f;” —— 来…

第16章 Single Thread Execution设计模式(Java高并发编程详解:多线程与系统设计)

简单来说&#xff0c; Single Thread Execution就是采用排他式的操作保证在同一时刻只能有一个线程访问共享资源。 1.机场过安检 1.1非线程安全 先模拟一个非线程安全的安检口类&#xff0c;旅客(线程)分别手持登机牌和身份证接受工作人员的检查&#xff0c;示例代码如所示。…

OSPF基础(2):数据包详解

OSPF数据包(可抓包) OSPF报文直接封装在IP报文中&#xff0c;协议号89 头部数据包内容&#xff1a; 版本(Version):对于OSPFv2&#xff0c;该字段值恒为2(使用在IPV4中)&#xff1b;对于OSPFv3&#xff0c;该字段值恒为3(使用在IPV6中)。类型(Message Type):该OSPF报文的类型。…

MAC 安装mysql全过程记录

4.然后等待下载吧&#xff0c;&#xff08;下载中。。。。&#xff09;&#xff0c;好了&#xff0c;网速的问题&#xff0c;半个小时终于下载好了&#xff0c;开始安装吧。 5.得到如下安装包&#xff0c;mac下也是双击直接下载&#xff0c;来&#xff0c;我们来看看下载的过程…

神经网络常见激活函数 1-sigmoid函数

sigmoid 1 函数求导 sigmoid函数 σ ( x ) 1 1 e ( − x ) \sigma(x) \frac{1}{1e^{(-x)}} σ(x)1e(−x)1​ sigmoid函数求导 d d x σ ( x ) d d x ( 1 1 e − x ) e − x ( 1 e − x ) 2 ( 1 e − x ) − 1 ( 1 e − x ) 2 1 1 e − x − 1 ( 1 e − x ) 2 …

微软发布基于PostgreSQL的开源文档数据库平台DocumentDB

我们很高兴地宣布正式发布DocumentDB——一个开源文档数据库平台&#xff0c;以及基于 vCore、基于 PostgreSQL 构建的 Azure Cosmos DB for MongoDB 的引擎。 过去&#xff0c;NoSQL 数据库提供云专用解决方案&#xff0c;而没有通用的互操作性标准。这导致对可互操作、可移植…

【苍穹外卖 Day1】前后端搭建 Swagger导入接口文档

项目技术选型 前端 直接使用打包好的nginx运行。 后端 1、导入初始代码结构如下&#xff1a; 2、将代码上传远程仓库。 3、创建数据库&#xff0c;并修改数据库配置。 4、断点调试&#xff0c;前后端联调。 5、使用Nginx代理&#xff0c;修改Nginx配置 好处&#xff1a;提…

零基础Vue入门6——Vue router

本节重点&#xff1a; 路由定义路由跳转 前面几节学习的都是单页面的功能&#xff08;都在专栏里面https://blog.csdn.net/zhanggongzichu/category_12883540.html&#xff09;&#xff0c;涉及到项目研发都是有很多页面的&#xff0c;这里就需要用到路由&#xff08;vue route…

深度学习里面的而优化函数 Adam,SGD,动量法,AdaGrad 等 | PyTorch 深度学习实战

前一篇文章&#xff0c;使用线性回归模型逼近目标模型 | PyTorch 深度学习实战 本系列文章 GitHub Repo: https://github.com/hailiang-wang/pytorch-get-started 本篇文章内容来自于 强化学习必修课&#xff1a;引领人工智能新时代【梗直哥瞿炜】 深度学习里面的而优化函数 …

mybatis-plus updateById源码

1.版本 : mybatis-plus-core 3.5.1 2.入口:MybatisPlusAutoConfiguration类sqlSessionFactory中的factory.getObject() 3.注入AbstractSqlInjector类中的inspectInject方法中 Overridepublic void inspectInject(MapperBuilderAssistant builderAssistant, Class<?> m…

RabbitMQ 从入门到精通:从工作模式到集群部署实战(三)

文章目录 使用CLI管理RabbitMQrabbitmqctlrabbitmq-queuesrabbitmq-diagnosticsrabbitmq-pluginsrabbitmq-streamsrabbitmq-upgraderabbitmqadmin 使用CLI管理RabbitMQ RabbitMQ CLI 工具需要安装兼容的 Erlang/OTP版本。 这些工具假定系统区域设置为 UTF-8&#xff08;例如en…