这个系列的目的是通过使用JS实现“乞丐版”的React，让读者了解React的基本工作原理，体会React带来的构建应用的优势1HTML构建静态页面使用HTML和CSS，我们很容易可以构建出上图中的页面Buildmyreactdiv{text-align:center;}.father{display:flex;flex-direction:column;justify-content:center;height:500px;background-color:#282c34;font-size:30px;font-weight:700;color:#61dafb;}.child{color:#
树形数据的一些相关处理方法//用于测试的树形数据consttreeData=[{id:'1',name:'测试1',pId:'0',type:'ceshi',children:[{id:'11',name:'测试11',pId:'1', type:'ceshi',children:[{id:'111',name:'测试111',pId:'11', type:'ceshi',children:[{id:'1111',name:'测试1111',pId:'111',},{id:'1112',name:'测试1112',pId:'111',}]},{id:'112',name:'测试112',pId
树形数据的一些相关处理方法//用于测试的树形数据consttreeData=[{id:'1',name:'测试1',pId:'0',type:'ceshi',children:[{id:'11',name:'测试11',pId:'1', type:'ceshi',children:[{id:'111',name:'测试111',pId:'11', type:'ceshi',children:[{id:'1111',name:'测试1111',pId:'111',},{id:'1112',name:'测试1112',pId:'111',}]},{id:'112',name:'测试112',pId
前言将markdown字符串转成html显示出来，同时把目录也提取出来一起显示。可以使用marked来读取markdown字符串解析成htmlmarked官网：https://marked.js.org/marked安装使用marked前需要对其进行安装npminstallmarked-s使用安装好后，在使用到的页面引入使用即可。import{marked}from'marked'exportdefault{data(){return{textData:"#JavaScript高级程序设计\n##内容简介\n本书是JavaScript经典图书的新版。第4版全面、深入地介绍了JavaScript
前言将markdown字符串转成html显示出来，同时把目录也提取出来一起显示。可以使用marked来读取markdown字符串解析成htmlmarked官网：https://marked.js.org/marked安装使用marked前需要对其进行安装npminstallmarked-s使用安装好后，在使用到的页面引入使用即可。import{marked}from'marked'exportdefault{data(){return{textData:"#JavaScript高级程序设计\n##内容简介\n本书是JavaScript经典图书的新版。第4版全面、深入地介绍了JavaScript
在使用树形节点或级联组件时常常会碰到根据id处理数据的情况下面为大家简单介绍关于节点递归增删改查方法根据目标id删除指定节点/***根据目标id删除指定节点*@param{*}list数据源*@param{*}targetId目标id*/functiondeleteNodeById(list,targetId){if(!list)returnlist.forEach((item,index)=>{if(item.id===targetId){list.splice(index,1)return}else{if(Array.isArray(item.children)&&item.childre
在使用树形节点或级联组件时常常会碰到根据id处理数据的情况下面为大家简单介绍关于节点递归增删改查方法根据目标id删除指定节点/***根据目标id删除指定节点*@param{*}list数据源*@param{*}targetId目标id*/functiondeleteNodeById(list,targetId){if(!list)returnlist.forEach((item,index)=>{if(item.id===targetId){list.splice(index,1)return}else{if(Array.isArray(item.children)&&item.childre
vue2中只能有一个根标签，但是在vue3中根组件已经可以有多个根节点了在vue2中只所以这么做是因为vdom是一颗单根树形结构，patch方法在遍历的时候从根节点开始遍历，它要求只有一个根节点，组件也会转换为一个vdom,自然满足这个要求vue3中值所以可以有多个节点，是因为引入了Fragment的概念，这是一个抽象的节点，如果发现组件有多个根，就创建一个Fragment节点，把多个根节点作为它的children,将来path的时候，如果发现是一个Fragement节点，则直接遍历children创建或更新。
vue2中只能有一个根标签，但是在vue3中根组件已经可以有多个根节点了在vue2中只所以这么做是因为vdom是一颗单根树形结构，patch方法在遍历的时候从根节点开始遍历，它要求只有一个根节点，组件也会转换为一个vdom,自然满足这个要求vue3中值所以可以有多个节点，是因为引入了Fragment的概念，这是一个抽象的节点，如果发现组件有多个根，就创建一个Fragment节点，把多个根节点作为它的children,将来path的时候，如果发现是一个Fragement节点，则直接遍历children创建或更新。
我们可以很轻松的去遍历一棵树，无论是广度优先遍历还是深度优先遍历，那么怎么在小程序当中渲染一棵树呢？先看一下我们深度优先遍历的代码functiondfs(tree){if(!tree)returnconsole.log(tree.value)if(tree.children){for(leti=0;i可以看出，深度优先遍历的算法是利用递归，判断是否此节点有children属性，如果有就再次递归。那么，我们小程序是不是可以定义一个组件，然后，这个组件接收一个object，然后在此组件内，判断object是否有children，如果有，就循环调用此组件，是不是就可以了呢？下面我们来试一试。首先，我
