当前位置: 首页 > Web前端 > vue.js

梦回2013年,看友达vue第一行代码,仅用30行代码实现vue(超简洁,适合初学者)

时间:2023-04-01 01:29:42 vue.js

不是无标题党,干货预警!!!大家好,我是清池交友app开发日记,记录清池交友app开发中的学习过程和踩坑日记,伪全栈技术栈:前端js、vue、uniapp、后端java游大真先发2013年,你大写的vue第一行代码来自:github源码地址镇贴:vue官方仓库0.1分支explorations/getset.html文件参考:本文使用30行代码实现vue0.1版本,参考toYouda2013年git上传的vue第一行代码(vue0.1)是用0.1版本的代码思路实现的。游达仅用40行代码就实现了0.1版本的vue。为了方便学习和交流,我们在友达代码的基础上省略了部分内容,提取了核心功能代码,调整了代码顺序,修改了部分变量名,并添加了注释。只剩下30行代码,更加简洁直观。大家展示一下vue的核心功能实现逻辑。我也是菜鸟。整理这篇文章花了我一天的时间。欢迎大家指正和批评。文章中代码的具体实现细节并不严谨。请忽略它。本文仅用于交流Vue的实现思路。没有细说。正文:实现逻辑简述本文实现vue,30行代码,github仓库地址。本文代码只实现了vue的核心功能数据绑定,没有实现其他功能。本文中的html可以直接在浏览器中打开运行。看效果,先用word简单描述一下核心代码的实现逻辑,获取vue根节点的dom,替换dom中的{{}}模板语法,使用模板{{inmsg}},使用data中的属性名(msg)来标记,方便查找是哪个dom使用了模板语法来记录data中的哪些属性是用模板语法的,这样方便更新dom时遍历这些属性valueschange,和根属性名找到对应的dom,去掉flag(flag是用来找dom的,此时dom已经拿到了,所以去掉flag)拦截set和get方法属性,并在设置属性时更新dom的textContent实现数据变化更新视图的函数代码实现如下://Instantiationvueconstapp=newvue('app',{msg:'Cleanpool丨Cleandatingapp'})//id:app//initData:{msg:"hello"}functionvue(id,initData){//Vue一般包含el属性,代表vue实例对应的dom元素constvueDom=this.el=document.getElementById(id)//获取#appdom...

//Vue的data属性,尾部赋值给dataconstdata=this.data={}//定义常量表示需要数据绑定dom元素使用constbindingMark='bind-dom-flag'//定义一个临时变量,用来存放模板中data使用的值列表constdataAttrs={}//替换#appdom中的模板内容vueDom.innerHTML=vueDom.innerHTML.replace(/{{(.*)}}/g,(match,dataAttrName)=>{//用于记录模板中使用了data中的哪些值,本例只使用模板中的数据msgdataAttrs[dataAttrName]={}//{msg:{}}//标记使用模板的dom,bindingMark=data中的值msg,这样这些做mintodataAttrsreturn''})//遍历dom中使用的数据属性for(constdataAttrNameindataAttrs){//获取domdata对应的listconstdoms=vueDom.querySelectorAll('['+bindingMark+'="'+dataAttrName+'"]')//去掉dom上的flag,flag是用来获取dom列表的,可以getitDeletethemarkdoms.forEach((e)=>{e.removeAttribute(bindingMark)})//获取定义的临时变量中的dataAttr对象。defineProperty需要使用这个对象来实现数据绑定。constdataAttrObj=dataAttrs[dataAttrName]//劫持data属性的集合,get方法Object.defineProperty(data,dataAttrName,{get(){//返回临时变量dataAttr中的attrreturndataAttrObj.val},set(newVal){//更新data中的this所有属性对应的dom,更新模板中所有使用msg的domdoms.forEach((dom)=>{dataAttrObj.val=dom.textContent=newVal})}})}//给从外部传入的初始化值赋值给vue实例的data属性for(constdataAttrNameininitData){//赋值,触发集合,更新domthis.data[dataAttrName]=initData[dataAttrName]}}complex代码html如下:

{{msg}}

{{msg}}

{{msg}}

>
复制代码结束总结:看完这篇文章,相信大家对vue.js的基本原理和实现方法都有一个清晰的认识。赶紧入手一个mini-vue,这已经是面试必考的必考题了,文中不足之处。欢迎指正和批评。如果大家有什么问题需要交流,欢迎大家留言。用户数,3000DAU,主要用户年龄在16-23岁如果你对一个社交软件从0-0.1的成长过程中遇到的趣事和技术问题感兴趣,欢迎关注我们的公众号,我们一起成长我们的技术栈、伪全栈、前端js、vue、uniapp、后端java获取清池app项目开源代码,星空花园,原谅我以前的名字,以后改成清池app开发日记)交友群+v:qingchizh,男女比例在1:5-10成团,女生免费,男生收费