当前位置: 首页 > Web前端 > HTML

MicroVue框架搭建Part3——$Mount方法实现

时间:2023-04-02 13:42:48 HTML

微Vue框架构建Part1——基本目录结构微Vue框架实现Part2——数据代理实现微Vue框架构建Part3——$Mount方法实现微Vue框架构建Part4——概述如何添加到原型链渲染前的Vue对象$Mount方法initMout为真实节点生成一个虚拟DOM。具体实现方法contrucVNode定义了虚Node节点类,VNode$Mount方法实现概览。相关链接PS:Node节点属性和方法PS:nodeType的取值是什么,代表什么,怎么给Vue对象的原型链添加$Mount方法导出initMout方法传入Vue对象/***将#mount方法添加到原型链*@param{*}Vue*/exportfunctioninitMout(Vue){Vue.prototype.$mount=function(el){constvm=this;这个._el=el;安装(vm,el);};}从真实节点生成虚拟DOM每一个真实的DOM节点都会继承Node类,所以你可以通过nodeName知道它是HTML标签类型还是文本类型。(PS:节点类的属性和方法)nodeType的值代表不同的含义。通常,1代表HTML标签,3代表文本标签(PS:nodeType的取值是什么,代表什么意思)nodeName如何定义文本类型:两个节点之间的空白部分和实际文本都是文本类型。从标签到"textcontent"之前的文本是文本类型#text"textcontent"文本到标签之前是文本类型#text{{content}}是一个SPAN类型```js文本内容:{{content}}

```children属性是上面代码块生成的虚拟DOM代码的实现/***构建一个虚拟DOM*@param{*}vm*@param{*}el真实DOM节点*@param{*}父父节点*/functioncontrucVNode(vm,el,parent){consttag=el.nodeName;const孩子=[];//虚拟DOM下的虚拟子节点consttext=getTextContent(el);常量数据="";constnodeType=el.nodeType;constvnode=newVNode(tag,el,children,text,data,parent,nodeType);//真实DOM节点下是否有子节点constchildrenList=el.childNodes;for(leti=0;i
猜你喜欢