Vue3 多功能table组件
粉丝6759获赞4.5万
相关视频
00:36查看AI文稿AI文稿前天我发的视频实现了 l table 的行托债排序，有粉丝留言说，如果是列排序呢？我做出来了也是几行代码， 实现效果就是拓拽表头进行排序，拓拽结束后更新列表的内容，修改的代码在这里 使用 thortable 创建一个档监听。 thortable 提供了移动更新排序和结束的钩子，我这里只用到拖拽结束的钩子，结束后去更新 altable 列的展示，还增加了在组建卸载时销毁 thortable 创建的实力代码。我更新在这里了，再 fit thortable 分支。
1196李钟意讲前端
12:24查看AI文稿AI文稿接下来讲什么问题呢？什么是主教化开发和模块化开发？他是两个概念，两个概念啊，哎，因为这个咱得分开啊。啊？先说这个主教化开发啊，主教化开发，比如说我现在写一个这个 应用，比如说这个系统里面是一个这个页面，然后呢？他有什么呢？有一个海底有个头部，有他头部，然后他还有一个侧边栏，侧边栏是一个菜单啊，菜单呢？咱就叫啊，一个耐还得有一个主体内容，对吧？这主体内容呢就叫 啃趁他那一个应用系统，基本上好多应用性都是这样的，大家大家可能看你们什么学校的一个选课系统啊，或者说那个办公司的欧威系统啊等等，基本都是这个时候啊，上面那个嗨点里面可能会有一些啊，比如说一个登录啊，一个一个用户的一个头像，然后这里有注销菜单， 个人信息等等等等，然后这个菜单呢显那个什么呃基础数据啊，什么各种业务啊等等等等，然后你点击这些菜单的时候，呃，主要的内容会不断的更新，对吧？基本上系统他都是这个思路，是吧？啊？所以说 咱们就用这个思路来给大家讲一下。呃，什么是组件化开发？组件化开发，大家想一下，我现在这个这个这个程序的话有几个组件啊？按刚才人的思路是不是有三个呀？一个是 happy， 一个是 nice， 一个是啃衬他，对吧？好，那咱现在就创建三个组件。那我组件写在哪啊？ vivo 的 v you 的程序，大家记得组件我写到康普嫩词，康普嫩词就是组件的意思， 咱写的程序呢，都放到这个康普顿词里啊，那我现在去建三个组件，第一个组件呢就叫嗨点点 beaut， 但是这里有一个问题，就是说组件的名不要和标签的名一样，一样的 话就会包错，所以说这个东西我就不能叫海胆点比我了啊，咱可以换一个，比如说咱叫麦嗨点点比我，对吧？我加我所有的主页，加一个麦，加一个麦就好了。麦嗨点，那他麦嗨点有什么呢？咱就简单写，就写一个这个 logo， 有个 logo， 然后 下面还有一个这个 a 圈啊，用户信息啊，海底里面就就这两个，写一个 spa 吧，写两个 spa 吧， spa 省的换行的吧。啊？ logo 和这个 spa 用户信息 好，然后嗨的有了之后，我再建一个组件。刚才咱们说这个图啊，咱是不是要建三个组件，还有一对耐磨和 ctrl， 对吧？那创建耐，那这个是菜单的话呢，咱参不累他，咱就写一个有点菜单样，是吧？啊？比如说咱，咱比较喜欢起一个 水果立表这个菜单，那就香蕉、苹果、鸭梨。如果说大家真正做系统的时候，这个菜单可能是一些什么跳转的一些页面啊，比如说技术数据啊，或者说权限管理啊，用户管理啊，这这类的啊。然后还有一个内容，内容就是 maccnt 点 biu， 那这里写一个 h 一，就写一个 helloword， 再写一个别的也行， 写一下吧，这个是应用的。呃，主体部分好，那组件都写完了啊，其实大家以后开发组件化开发也是啊，就是你把这个结构想好了之后，然后你会新建一堆组件啊，然后每个组件的功能都写完，然后把这个组件啪一拼，拼接成一个系统就 ok 了。 好，那然后咱接着写啊，那刚才咱是不是根组件是这个 vivo 啊？那我是不是说直组件都要放到根组件里啊？那这个写的话，咱就写一个，用这个根组件 去搭一个框架。搭个什么框架呢？就是咱刚才写这个嗨的左侧菜单， nice， 中间啃衬他搭一个这个框架，那咱就写一个 div， 那这个呢？克拉斯等于 开点，第二个呢？咱就叫 canting， 这个是一个容器啊，就是说 catty 是什么呢？是这个第二层这个容器，这叫 ctrlant， 这里面有两个， 一个叫内务，还有一个呢，叫啃蹭蹭。好，那这个结构有了，结构有了，然后咱们现在把这个整体的页面功能给他实现了啊，分区给他分。好，那咱就需要在样式里写了，对吧？样式里的话，那就是点嗨歌，咱们给他加一个高度啊，比如说这个高度是八十 像素，然后给个边框啊， epx， sorry 的 red， 随便给个颜色啊。好，他洗完之后，咱看一下现在的 程序啊，来看是不是有一个红色的边框呢？看到了吧，但是这红色边框他他他是一个，上面一个距离，对吧？这个距离是默认的一个刚才的样式啊，在这啊，音带个字 css 啊，这是创建项目，头是自带的，咱把它干掉，不要他了，保存啊，干掉之后，然后看一下现在的英雄程序，哎，回来了，到顶了，这是头部，对吧？头部有了之后，那左侧菜单呢？第二层呢？是点天津，点天津点我设一个 flax 布局， supreme， flax 让他横向排列嘛，咱就不用浮动了，对吧？然后这个 ctrl 那里面呢？看他这 ctrl 那里面，左面有个奈务，右面有个跟衬他， 咱就写写一下他俩的样式啊，那就是点看清点，然后点左边的 nice， 他是 flax， 咱给个一，然后包对 epx 手里的给一个蓝色啊，然后下面这个长青柠里面的这个跟衬的内容，咱给他 flax， 给一个五啊，让他宽一点，然后这个包点一 px sorry 的给一个呃， carry 吧。绿色咱给这个 nice， 给一个八百像素。但如果真做系统的时候，你这个高度你得适应屏幕啊，或者是按照甲方的要求来做啊，咱不能随便给这个尺寸，对吧？那好，那看一下结构 是有了，对吧？上面红色的嗨点左侧的奈姆，右侧的一个呃，这个，这个啃衬他，对吧？然后咱说主间化开发是不是就把主间拼到一起啊？啊？好，那咱现在就需要把主间都引到根主间里面把直主间都引到根主间里面，那我们这里就需要 新铺的先引这个 mary happy tom 哪呢？这个斜杠蹭蹭康城康普能吃 啊？斜杠他这里有一个麦嗨点，这咱刚才创建的，对吧？点不有，我粘贴一下。然后第二个呢？叫什么？第二叫麦耐，第三个呢？叫麦 肯称啊。需要先注册主件，对吧？注册主件，那我已经注册一个 hellowor 的，但是这个 helloword 咱不注册也行，对吧？咱也用不上他了啊。然后咱需要注册这个买嗨的，然后，然后注册这个 man， 然后注册这个 maccnt， 然后我现在需要把这三个组件把它放到上面的这个内容里面，对吧？啊？那咱刚说嗨点嗨点里面我放的就是嗨点这个组件 内容了，然后下面呢是这个是 nice， 对吧？菜单对吧？水果鸭梨水果列表对吧？啊？那 man， 然后下面的这个是 ctrl， 那就是 m a ctrl， 这个是 m， 对吧？哈哈，好，那咱给他改过来啊。呃，引入的这个康不能是，这个是写成 n 了， mm 好保存，然后再看一下效果刷新 好了，那这样的话，咱就三个组件就把它拼到这个应用里了，对吧？那首先是 logo 信息，用户信息在海底里，然后左边是一个菜单，右边一个主题内容， 那这个其实就是组件化的开发，组件化的开发呢，咱就可以通过这种创建组件的方式，咱建三个组件，对吧？然后把这些组件呢，最后拼到一起，拼成一个应用啊，这就是组件化开发的一个基本概念。当然如果说咱真正开营 开发应用的时候，会有一些问题，比如说某些组件呢，会有一些船只啊，会设置陆游啊等等等等这些获取数据啊，这些东西。但是好处是什么呢？就是如果出现问题了，比如说现在，你说说，哎，中间内容 helloword 出现问题了，那咱们直接就定位啊，我直接改这个麦啃衬他就可以了。 这这就两行代码啊，比如 hellowor 的，我给他改了，改成 hello vivo 了，就这两行代码保存，然后整个系统再看，哎， hello vivo 就变了，这样的话咱就成功的把功能给他拆分开了 啊，那哪些组件有问题就改哪，而不是说像以前的话，咱可能套模板呢，写了一堆贴毛啊，这个页面写了三百行一贴毛，或者说两千行一贴毛，然后还有一堆 gs， 需要去一个一个找问题，那个太难受了。但如果说组件化的开发的话，你可以把整个应用拆分成很小的组件，那 出问题就写哪，哪出问题就改哪，这样的话就开发效率就高了，这就是组件化开发的概概念，刚才咱讲的呢？是组件化开发，那什么是 模块化开发了？刚才咱是不是说两个问题啊，对吧？一个是组件化开发，一个是模块化开发啊。什么是模块化开发呢？模块化要咱举个简单的例子啊，就比如说如果我想实现一个功能啊，这个功能 他可能不需要去创建主页，比如说我现在这个功能是啥呢？我就想计算两个数的加和，那这个不需要页面，对吧？他是一个功能，那这个功能的话我怎么写啊？我可以在这，比如 s 二 c， 咱所有的声音都写到 s 二 c 里。 sst 里面，我新建一个梦露啊，这个随便起名啊，随便随便起名，比如说我就叫 utuse， 就一个工具，一个工具的一个梦露，那这里呢？我就 可以创建很多个。呃，工具工具的话，我们可以创建成一个 gs 文件，比如说叫 sum 点 js， 然后这个 sum 的 gs 是一个函数，翻个身，然后 sum 函数 等于什么呢？等于这个里衬十加上十加上二十啊，然后我现在写的是一个功能模块，对吧？叫 sum bs 啊，我需要把这个功能模块给他暴露出去。 暴露属于怎么暴露呢？呃， e s 六的模块化语法啊，就是 expoxd fox 啊，暴露这个 sum。 那这样的话，我在 康不能自理的啃蹭的啃蹭的，大家看啊，这是不是？呃，这是一个组件，对吧？主体部分啊，在这了，主体这部分啊，这个组件我希望在这啊。 h 一输出一个结果。 输出一个什么结果呢？输出刚才咱们模块计算的结果。好，那这个咱就写了 surprax boxd box， 那咱就需要自己写一个模块啊，那咱咱自己写这个模块的话，咱先咱咱现在自己写这个模块，我现在需要，需要实现什么功能呢？需要让这个 h 一里面显示啊， 显示刚才咱们模块计算出来这个结果，结果就三十，对吧？显示这个三十啊，那这个怎么写啊？我需要引入那个模块音 pose， 引入这个 sum flom 从哪引入呢？从这个 utus 啊，然后它里面有一个 sum 点 ts。 好，那拿到这个模块之后啊，然后呢？我现在写一个计算属性， ctrl d 的，那计算属性我可以写一个单本，直接在这就可以绑单本了，对吧？但是计算属性他是一个函数，是吧？我需要通 我计算得到这个值啊，那这个值怎么得到呢？ reaty 谁呢？ retexum 雕用括号。那我其实就是调用了这个模块，得到了这个模块计算的结果，然后把它放到单模上，然后我们看一下效果来，三十出来了，这个就是模块化化的一些方式啊， 就是说我可以单独定一个功能模块，这个功能模块可能是，呃，一步请求数据啊，可能是完成某些功能啊，可能是做了某些事啊，咱不管这个事是什么，咱只要知道这个模块做了一些事， 他跟这个呃页面可能是没关系的，他就是做了一件事，然后我们的组件呢，就可以去调用这个模块，然后引入这个模块去做一些事啊，去完成这个工作，这就是模块化开发的概念。而且模块化的话他会用到这个 enpout 和 expot， 这是 es 二零一五提供的 模块化的语法啊，所以说我们通过这种模块化的方式就可以把程序拆分成不同的。呃，功能啊，有的时候大家为什么混呢？就是说， 哎，你这个主件化开发也是拆分，模块化开发也是拆分，那他有什么区别呢？啊？这个简单介绍一下，就是说主间化，他其实说的拆分还是页面层面的拆分啊？就比如说这整体的页面我拆成了三个主件啊，那组件化开发其实就是拆页面，那模块化开发呢？是拆功能啊， 拆功能我可能一个主件我可能有多个模块，而一个模块呢，我也可能用到了多个主件之上，所以说这是他们之间的关系，这就是主件化开发和模块化开发，模块化开发的一个基本概念了。
942晓舟
05:10查看AI文稿AI文稿什么叫动态组件呢？比如说咱做一个手机端的页面，我先说一下咱要实现什么功能啊？咱画一下啊。那刚才咱说了，就是比如说一个手机页面啊，一个手机端的页面的话，他可能分成几部分，分别是什么呢？分别是一个 top 啊，一个单宁， 一个堪称点和一个服帖啊。那这个咱写一下，这个就叫 top 组，这个叫班的组件， 这个叫天天的主角，这个叫福特主角。那，那假如说啊，比如说我，我现在是一个会员啊，那你中间搬，那是一个广告，对吧？那我会员的话，你，你不能老让我看广告啊，所以说我是一个超级尊敬的 vip 啊，那你怎么办呢？你把广告给我去掉，我 打开这个 apple 的时候，我看不到广告，我只能看到这三个。然后如果说你是一个普通的用户啊，你是普通的用户的话，那你不交钱没办法，你只能看广 广告，那你看广告怎么办呢？你呢？就能看到这个版本，所以同样的代码，同样的 apple， 我看的时候就没广告，你看的时候就有广告，甚至可能我看的时候这个富态在上面，他不在下面，反正我开心，对吧？我开心，我是，我是 ip， 我想怎么布局就怎么布局，而你呢？只能看斑点哈，所以说是一个这个功能，那这个功能如果说放到 w 里面去怎么实现呢？ 首先第一点就是说我需要让这个页面他是根据数据自动生成的，而不是说写死的，写死的页面，对吧？啊？是根据数据生成的，他数据可能是这样的，比如说我现在，哎，有一个，有一个，这个，呃 呃，叫利斯特，一个列表，这个列表上显示你的页面啊，第一个页面呢叫叫卖 top 吧，卖 top。 第二个呢叫卖班女啊，第三个页面 叫这个卖干净点，第四个页面呢？我得换个，行啊，看着可能舒服一些。第四个页面呢叫迈夫特，咱用实验这个功能啊，也就说数据是这样的，那你就给我这么的演示，假如说我是 vip， 我没有版本，我就看不到版本 啊，那你那我 vip， 我可能，我我我想看两个套吧，对吧？我心情好，我就是 vip， 我牛，我看两套吧，那你就得给我展示两个套吧。那这个怎么办？这个怎么办啊？ 那我就可以用动态组件来实现这个问题了，实现这功能了啊，那，那怎么写呢？首先我肯定是需需要把这些都引进来，对吧？那这个是没跑了啊，我需要引一个卖套啊，是这个卖套 买斑点，是这个买斑点，买 cant， 那是这个买 cn 点，卖 top。 哎，这这这个不用给了， top 斑点买福特抖音引进来之后我还需要注册， 注册，那我现在注册也注册了，引入也引入了，对吧？啊？然后是卖套盒，买班证，买，看，这还买福字啊，四个，那四个，那我接下来呢？接下来要干什么呢？就是用动态组件康复的标签啊，来实现显示刚才的那些 组件啊。那科目呢？是他有一个属性叫 e 字，对吧？ e 字，比如说我这个 e 字等于 mate， 咱看一下现在的效果啊，这是咱那个 mate 没写东西呢，是吧？ sunprahe， 这个叫 mate， 然后写个 stele， ste， 这个是包墩一片手里的 rap， 呃，写个灰色的黑色啊，然后再写一个，呃，高度是一百 像素，然后看一下现在效果啊，哎，换成手机效果，卖 top 有了啊，对吧？卖 top 有了，然后呢？我现在，我现在在回到这个 app 啊，比如说我现在想显示卖 top， 买单的，然后买强劲的，然后买福气 啊，那这个组件 come on 的呢？他可以写个义字，义字等于谁呢？等于咱们那个想要的组件 come on 的，买套房，买 单点，买康定点，还买福卷，哎，咱们现在都有了，但是咱现在想实现什么功能呢？刚才说了，我希望通过这个数据数据来实现，所以说我刚才那个代码是写死的，那我就可以用这个利是他来实现一个便利，便利之后呢？把利是他里的数据呢？给他显示出来。好，那咱再回来 就写一个康不能陈，写个康不能陈，然后呢？我这里写一个为父，便利谁呢？便利这个 立死他，对吧？艾特姆因立死他，然后这个艾特姆呢？就是咱想要的组件了，弄一些艾特姆，然后这里写一个绑定属性啊，然后保存，然后看一下现在的效果啊， top， 斑点抗性的服务题 top， 对吧？然后我现在只需要改变数据，比如说我现在数据变了啊，我是 vip， 我不想看斑点 删掉，而且我只想看两个套盘，我喜欢看两个套盘，然后回来斑点没了，对吧？然后我想看一个套法在上面啊，一个福特也在上面，对吧？咱 vip 嘛，就个性嘛，我想咋设置怎么设置 啊？福特在上面啊，两个套吧，没有斑点，然后一看福特在上面啊，那通过这种方式的话，我们只要到后台去把数据拿过来，就可以自己去组装咱们想要的页面效果，这个就是动态组件的一个共功能了，用数据来驱动视图。
536晓舟
00:18查看AI文稿AI文稿这是一个基于没有三开发的和特约有风格移动版主键库，提供四十多个高质量的通用主见，主见十分轻量，支持按序引入，主题定制、国际化等门道方面也很完善，从引入到使用再到自定义，都一一为我们演示了出来。
106小明1994
00:16查看AI文稿AI文稿针对新手用于练习基于 v 三的 ui 组建，主要功能用评论、聊天、搜索、毛点等。由于没有第三方组建，所以它非常适合拿来做练习，快来试试吧小伙伴们。
1610小明1994
13:07查看AI文稿AI文稿哈喽，各位观众大家好，今天我们来学习一下第十五章全局组建、局部组建以及地规组建的一个用法。 ok， 那我们什么时候该使用这个局部组建呢？比如说你一个页面上一个模块是非常多的，然后他可能有一个这个头部， 有个这个菜单，比如说还有一个内容区域，然后内容区里边又分好多模块，但是你又不想把它写在一个页面里边，那你就可以把它拆成一个局部组建，然后去给他做一个引入。 ok， 那什么时候使用这个全局组建呢？比如说在你当前开发的一个系统当中，出现频率比较高的一个业务组建，你就可以把它封装成一个全局组建， 因为他可能会在很多地方去使用到。 ok， 这个的话就是他们两个一个用场景。那地规组建的话，就是比如说你有一个东西去做一个附用，比如说我们这个树，还有这个 菜单区，他就是地规出来的，可以把它封装成一个地规组件。 ok， 那今天的话我们就把这个抗抛绳子下面这个抗日点 vivo， 我们来演示一下，用它封装一个局部组件跟一个全局组件。 ok， 那么先给他简单的去布一下局，就是他大概是长这样子的，这是一个卡片吗？ 那他有一个头部，然后有一个这个标题，还有一个副标题，以及一个内容区域。啊，大概是找这样子的。 ok， 然后我们给他来个嗨的，然后下面的话来一个 sex， 然后嗨的里边呢？来个 dv， 就是这个标题， 然后再来一个标题，就是什么副标题。 ok， 那 sex 里边呢？就是放的一个内容，好的，我们来给他写下这个样式啊，就是这个 card， 我们先来给一个包的吧，给他一个线啊，一批沙馊离子，然后给他来一个变量为包的，然后的话就是 ccc 吧，就是这个灰色， ok， 再来一个宽度，外色的话来个四百吧。 ok， 然后连写一下里面这个嗨的，嗨的话，我们给他来个 des play flex， 他先让他排成这个一行，然后再来一个加斯德怀 content spots b 寸给大家两边这个靠边， ok， 然后再来点这个盘顶那五像素吧，然后再来一个包的， 但是这个是包的，是包制包成，给它下面来个线，然后就是我们这个内容区了，就是这个 sex cs 的话呢，也来点这个拍的，然后来个明太， 呃，三百吧，对，让他有点高度。 ok， 那这个组建的话，我们就简单的封装完成了，然后我们先演示一下如何这个把它当成一个局部组建去使用，比如说我要在这个 ap w 去使用这个 car 的，那就直接引入就好了，就是这个 input 这个卡的点位，然后就把它当成一个标签去使用，在上面注册一下， ok， 我们来看一下这个页面效果啊， 哎，大家可以看到这个东西呢，就已经渲染出来了，并且他是一个可附用的，就是你可以给他写多个对，他就会选渲染这个三个啊 啊，大家也可以看到。 ok， 这个的话就是一个局部组建的一个用法，然后我们来演示一下如何把它做成一个这个全局组建，那么就不引入了， 把它注册成一个全局组建的话，你需要在这个密点帖子里面去给大家去记录一下，就这个语 party 这个卡的 will， 然后通过这个 app， 然后他有一个方法叫这个 compost， 然后第一个的话是我们这个定的这个组建名字，这个名字的话你可以随便起， 比如说我就叫卡尔的那个。第二个话就是放的我们这个组建，就是我们刚才引入这个卡尔的，给他塞进去就好了。 ok， 那他的话就会注册成一个全局组建，我们就不需要再单独这个餐饮 pos 了，就是直接在这个汤吧里边就可以去使用了， 这的话我们叫 car 的，对，就只可以直接去使用了。我们来看下页面效果， ok， 也是展示出来的，就是在每一个页面呢都可以直接去使用，跟我们那个 iphone 一样。对，因为他已经全局注册了，那如果我想这个 批量注册这个全局组建的其实也是可以的，我们来看一下这个例子，这个 imuy 呢，他已经提供了一个例子了，我们来可以来借鉴一下，就是他有一个 icon， 把它翻译成中文的。 ok， 大家可以看这个例子啊， 他就是把这个 icon 呢做了一个全部的引入，然后通过一个否循环去便利这个所有的这个组建，然后也是通过这个 apsc 卡包层的去给他做一个劝局注册。所以说你有很多组建的话，你也可以使用这种循环的方式去给他做一个便利 啊，就是这个批量注册。 ok， 然后我们来演示一下这个地硅组件啊，地硅组件的话我们就用这个吹来演示一下吧，给大家封装成一个这个数，我们先把这个 删掉。好的，那我们继续来演示一下我们这个地规组建，也就是这个 tree， 那我们先给他造点这个数据吧，我们在这个 apecometwel， 然后定一个他是 face， 来定一下这个数据的一个类型，就是 tree， 然后里边有 name is dream， 然后有这个拆开是一个布尔织，还有一个丘准，我们这个纸巾呢，可以有，可以没有，所以说把它变成一个可选的，然后它的类型就是这个吹类型的一个数组，那这样子，那这个类型呢？就已经定完成了。然后我们给大家出示一下这个数据 叫 data， 等于这个 rapt 接收一个范形垂类型的一个数组，那这样子， ok， 来电一定一下里面这个数据啊，就是内，默认是这个一，然后有这个拆开吃，默认 是一个 force， 然后我们再给他沾一点啊，这是第二条，然后这是第三条。那为了突出他这个地规的一个特性，那么就给他造点这个子肌，这样子，然后里边有这个内，就是一杠一， 然后来个 check it， 默认是一个 four 子，这样子，那第二层的话我们就不写这个丘准了，没有这个子集。那第三层的话我们可以写这个深一点，然后就是什么三杠一，再来个丘准。 ok， 然后就是什么三杠一，杠一就是地规组建使用的时候，你可以不确定他有到底有多少东西，那这时候你就可以使用这个地规组建了，就是里面有多少层都可以。这的话我们就是演示一下，就是写这个三层啊，这的话就是这个三 杠一杠二。 ok， 那这个冒可的这个数据呢，就已经定完成了，然后我们再引入一下这个吹这个字组建啊，叫什么吹 will， 然后在页面上给他定一下， ok， 然后我们把这个 data 给他传进去啊， ok， 传进之后呢，我们来接收一下使用什么抵饭这个 crops， 然后还是使用这个发型自灭量的一个模式，然后叫什么 data？ 然后它的类型我们给它粘过来吧，就是这个吹 ok， 那他自己呢？可以有，可以没有，所以说把它变成一个可选的吧，就是吹类型的一个数组这样子， ok， 然后我们就可以给他做一个变 力啊，就是用这个 we go for item in 这个 data， ok， 然后来个 input， 呃，拆客 box， 然后来个什么 spa， 给大家渲染一下这个文字啊，就是 item 这儿 name， 这个拆个 box 呢，我们可以使用一个 vivo mode 给它绑定一下，就是 item 这儿这个 check it， ok， 我们来看一下这个页面效果啊。 哎，此时这个第一层呢，他就已经渲染完了，但是他里面有好几层，那这时候我们就可以把这个组建给他做一个地规，那地规的第一个条件就是需要确认这个地规组建的一个名称，那在维于三里边，你可以直接使用这个文件名 来当这个地龟，组建一个名称，就是我这叫翠，那你无需引入，直接就可以把这个名字拿来用，就是翠，那这样子他就会去做一个地龟，然后把这个杯上的再给他传进去， 就是这个 item 的丘准，然后他就会自己进行一个地规，那什么时候结束呢？就是没有这个丘准了，那他应该就结束掉了，然后我们来判断一下，但是这个丘准是一个数组，数组的话他永远是等于这个处，所以说我们来判断他的认识就好了。 ok， 然后这个可选的操作符呢？我们一会再来去介绍一下这个东西。 ok， 此时呢他就会做一个地规，然后我们给他来一个样式吧，叫 tree， 让大家看的更这个明显一点啊，然后来个 marge left， ok， 我们来看一下页面效果，大家可以看 他把里面所有的元素呢都已经递归出来了，甚至呢我们还可以再加，就是里面有多少我们去便利多少， 然后我还可以把它变成一个处。 ok， 那也是没有问题啊，这个的话就是一个地规组建的一个用法，那比如说我想把这个名字，我不想叫这个翠，我想叫别的，那我是不是还得改这个文件名，那这样很麻烦呀啊？唯有也是提供一个方法，就是你可以再开一个 script， 然后把这个语言写成一样的，就是等于这个 ts， 然后来一个一个 pose default， 然后自定义去定义这个内，那比如说我叫小满啊，这样子，那上面的话你就可以不用叫这个处理了，换成这个小满就好了。 ok， 这是第二种方式，就使用这个自定义内部 方式啊，效果也是一样的。 ok 啊，但是他也有一个弊端，就是你还要再写一个 script， 感觉很繁琐，然后你就可以使用第三种方式了， 那那么就不用这个了。第三种方式的话是需要装一个差劲，我们打开这个拍根解散，就这个 i'm plug inviu e d 翻 offices， 把这个插件的给它装一下就好了，装完之后呢，你在这个 wet ctrl ts 里边去引入一下这个插件，看到没有？然后引入完这个插件之后呢，你在 plug 里是不是要去给他注册一下他这个函数注册完之后呢？在这个 tscontv 的阶层里边 啊，是这个铁丝康复有点结损，去给他配置下这个 tips， 就有了这个代码提示了，就这个东西，然后大家直接去我脖子上粘一下就好了。 ok， 那他的用法非常简单，他也是提供了一个编译， 就是底饭 options， 对，就是你必须使用这个插件，使用完这个插件之后，你才可以使用这个底饭 options， 这是唯有你没有自带的啊，这是插件提供的，然后你就可以定这个 啊，这样的话你就不用再写一个 squeep 的，然后还是叫这个小满。 ok， 我们来看一下页面效果其实也是一样的，但是，但是用完之后你就发现他会丢失了这个组建的一个类型，他推断成了一个 ono， 就没有办法做一个良好的一个类型提示了。 但是我希望呢，给维优一来一个体验，希望他在这直接可以定于我们这个内， 比如说来个小满，这样是不是会更方便一点？如果不优异啊，没有接受我们这个体验，那以后的话我会做一个插件去支持一下这个捏，对，就是我来，我来做了，大家以后可能会用到。 ok， 那以上的话就是来定义这个内部的一个方式啊。然后我们再给他加一个事件，我们再演示一下这个东西如何加一个事件，比如说你加一个克利克，我们就叫什么克利格 type， 然后把这个 item 呢给他传进来。 ok， 来接受一下这个艾特，然后他是这个吹类型， 好，咱们给他输出一下啊，然后我们来看一下这个控制台，然后比如说我点击这个一啊，没有问题啊，然后我点击这个三一二，哎，发现他执行了三次，就是因为这个东西他会有一个冒泡，所以说大家使用地规组件加事件 的时候呢，给他阻止下这个冒泡就好了，来个 stop 啊，这样就好了。 ok， 再点击这个三一二啊，就没有问题了啊，这个冒泡大家需要注意一下，那比如说我想接收一个疑问层呢？怎么办呢？接受疑问特啊，微微提供一个关键字叫 dologyvent， 对，你把这个东西传过去，你就可以接受这个疑问成就是当前点击的这个疑问的对象可以来个什么一点 touch， 我们来看一下，就当前点击这个元素。 ok， 大家可以看到一杠一，三杠一杠二， ok， 这个这个的话就是一个地规组建的一个用法。
161小满zs
05:47查看AI文稿AI文稿好，那么这是我们给大家介绍的第一点啊，得他的强烈性，很显然啊，一个组建这个除了得他之外他还会有另外一个东西就是属性啊，因为别人要给我传参数进来是不是？呃，我要跟大家说的是呢，其实跟刚才的这个类型其实是非常相似的啊，来看一下这边 属性类型啊，那除了刚才的断言需要做之外还有另外一个东西，因为这个东西他是一个定义，不是一个直，所以直接用断言是不行的，所以这时候还需要用一个泛行类型叫 party， 我给大家演示一下 啊，那么还是刚才的例子假设啊，这次想让用户传上一个叫抬头阴粉 这样的这个类型啊，约束一下这个东西将来是我的属性类型啊，这个属性有什么呢？呃，比如说啊，我将来 希望他给我传一个这个啊，这个标题的内容叫白六，还有什么呢？我想定一下这个标题的颜色。 好，很显然啊，他俩都是子福串，对吧？好，在这我就定义好了。好，定义好之后我来这边啊，准备去定一下刚才的属性啊，我们在这去写啊，是吧，你看一下这个这这东西是不是叫抬头音符啊？好，请注意他的类型是什么， 我们在这给他写类型的时候我会怎么写啊？这东西呢，是不是比较你填一下，你快 然后回这填这个这个这个东西啊，请注意他是个对象，是不是你能声明？以前你能声明的方式是哦这个，但是你发现你声明个这有什么用啊，他不就是一个很模糊的壳吗？他并不强， 你必须有一个具体的类型，这时候呢，需要用是不是断言，继续断言，但是你注意，如果你想把它断言成抬头音否，你发现啊，对方会提示你一个信息，就是 他说这个东西啊，他现在怎么样，你是没有办法去做覆盖的啊，为什么？因为根据类型检测， probs 中的任何一个属性都不是一个自定义的类型， 而是一个范形类型，所以大家要记住啊，这里其实就是说啊，这个这个由于地方 ctrl ups 里头的这些像其实已经有了详细的约束，你这个东西是不兼容的，这时候大家需要有一个叫 pro 太 这样的一个范形类型，然后呢，大家用它对里面的这个具体类型做约束啊，这时候我们就约束了咱们这边的这个抬头音符的类， 于是我将来在用的时候我就清楚的知道啊，抬头音符里头的结构一定是这样的，我在上面就可以这样用。好，举个例子， 咱们在上面啊，把它输出出来给大家看看啊，好，那这里面啊，咱们回这边啊，我呢，除了这个这个东西之外啊，我在上面显示一个标题，是不是在这啊？显示标题，那我可能会写一个 h 一， 然后写一下抬头音符的 w， 是不是啊？你看一下啊，抬头音符有类型吧，看一下啊，类型是抬头音符检测到了点之后是不是出来 w 啊？好，我就知道我现在想输出的是这个这个东西的这个字符串的值， 我还要控制他的这个颜色呢，所以我在这呢再加一个 style， 做个动态样式啊，想控制谁啊？背景色是吧，白光咖啡， 想控制谁呢啊？就是用抬头 enfold 的卡了来对他做约束啊，大家看一下。好，现在设置完成之后显然在这边的这个使用侧啊， 大家伙要注意啊，在这边的使用册你要给他是不是要做传递啊，我们重新打开一下这个 app 啊，然后在这一端啊，我希望呢啊能够在这啊去输出一下刚才这个属性，这个属性的名字叫 开头音符是吧？好，大家把它说出一下啊。好，那么小伙伴们请注意啊，我在这边啊对他进行定义的时候啊，这边咱们要是不是要给他一个纸啊， ok， 我想给个对象啊我想给对象这是第一点，第二点是说我这个东西 是不是得有一个白六啊对吧啊我说呢这个是什么呢啊？我现在是一个代办事项这样的一个标题，然后是卡乐是吧给上一个常见的颜色，这是一个自助串，各位好请注意啊， 那我把这个定义完成之后啊回到这边啊，大家感受一下啊，就是刚才我写的这个东西能否正常如愿对吧， 他是可以的对不对？那么也就是说啊我现在有两点呃是起到了这个效果啊，第一个效果就是说啊这个抬头音符的检测性啊，我需要知道他的类型是什么 这第一点第二点是传进来之后呢在编辑的过程中很清楚啊，对他能够有强烈型的这个约束啊啊在这约束注意看一下这个写法啊最后一个这个注意 像是像这种东西一般是不是都需要服用啊，不建议大家写到这。写到哪呢？可不可以在 s c 里头建上一个叫 dts 啊， taps dts， 把声明放到这，把这个东西倒出去啊， akis pot 一下是不是啊？复制一下。 好，下面在这边是不是可以直接导入服用啊，好处多多是吧？啊，那么你的写法会怎样？从咱们是不是上级目录 type dts 中导这两个东西分别是一个是土度，一个是抬头应付，表示换一下。 好，把这个东西做完之后啊，回这边啊再看啊，没错，对吧？好，那就 ok 啊。
27前端杨村长
01:55
14:00
13:34查看AI文稿AI文稿哈喽大家好，近两年呢数据可视化非常火，这种比较炫酷的效果 对吧？那么在我们前端开发过程中呢，也会遇到这些数据口罩图表的问题， 那百分之九十左右的数据可视化呢，都是使用我们的一叉二次图表完成的，那么今天呢，我们就小试牛刀，在我们 v v 项目中去使用我们的可视化图表库一叉二词话不多说，我们开始我已经提前搭建好了一个 v v 的项目， 我们有一个 app 点六啊，里面写了一个标题，一个按钮，然后这是我们图表组件引入了在这使用，然后写了一些简单的样式，图标组件呢，暂时还没有，直接写了个空 div， 里面有个图表，我们看一下效果， 这样的一个效果。然后这呢我们用 ex 去实现一个图片。首先我们来到 ex 的官网啊，现在呢已经是五的版本，五点三的版本跟以前四的版本其实差别还是很大的，我们点击快速入门， 然后在项目中使用 exrs， 首先需要安装在你的微域项目中执行这条命令，安装我们的 hrs， 我提前已经安装好了，就不需要安装了。然后引入 exrs， 他这有两种方式，我是用的暗熏引入，因为现在呢暗熏引入的话用的比较多，所以说我们往下看这个暗熏引入，但是他这个暗熏引入其实并没有提示我们在忧郁中如何去用，那么接下来我们就在 没有一种在我们的这个图标组件中去带大家去用。首先引入这些包，我们复制一下啊，因为是按需导入，所以说他会引入很多很多的这个呃，包，包括一些组件，我们直接粘到这个 scree 的标签中，粘到这。 那么引入完了之后呢，他就会去注册这个组件，因为我们只是在这个组件中用，所以说我们注册组件的时候，我们可以选择考虑啊，写到我们的这个 critic 中，我们把这个 export 的 dford 加上啊， 我们再写到 crate 的中，粘贴一下代码，把格式稍微修改一下， 然后下面呢就是去使初始画，我们的图表在这呢，这个 catop 神被省略了，其实我们往上翻，这就是他的 opposy， 那么这个图表其实需要一个 id 为 ming 的一个 dav 标签，我们在这呢把我们这个 div 修改成 min id 等于面，我把图表这个删掉，然后初始画这部，因为需要获取面的真实道美元素，所以说需要我们在 motee 的中去初始画，我们找到我们的身份周期，这写个 mont， 在这粘贴处理化代码，格式化一下这个 option 的话，我们在这可以先创建一个 option， 然后我们这直接写，哦是这个对象，给他复制一下，粘贴到这格式化一下， 然后图表需要有大小，所以说我们给 min 写一个大小，找到下面的 style 请后， min 写个大小， ok， 大小设置完毕。宽六百，高四百，这个随意设置啊，给了一个居中，我们在浏览器看效果， 哎，已经有一个简易的图表效果，这样图表就出现了，生效了。我们简单来看一下，这个是胎头，这是工具提示，然后这个是 x 轴，这是 y 轴，然后这是数据啊，很简单的一些东西。然后我们稍微做一下修改，给他的颜色， 改变一下颜色的话，需要我们先创建一个颜色的数组， 写成字母串就可以快速写一下颜色。数组写好之后，我们需要在啊柱状图这一块这个地方写一个 items style， 他是一个对象，他里面有卡了，然后卡了的值呢，是一个函数会接受一个参数，这个参数里面有柱状图的缩影，我们通过这个缩影把它直接返回就可以了。 然后我们来一个货，防止呢我们的涂的颜色找找不到，这样呢，我们刷新一下， 哎颜色就有了，这样一个简易的图表就制作好了。 但是往往我们在项目中呢，这些数据呢，其实是后台提供给我们的，那么后台的数据我们怎么融会到我们的图表中呢？接下来我们搞， 首先我已经写好了一个后台，用真心思若模拟那个后台，后台的数据呢？我们已经啊摆在这了，然后我们在 app 中去获取这个数据，然后当做 pro 传递给他， 因为以后我们要需要对 exr stem 进行封装，所以说需要什么数据直接传给他人，让他展示注装图图表就可以了。所以在这呢我们对 app 进行处理，写一个 data， 然后在这呢有一个哎呀也是销量的一个数组， 我们打入 axos， 其实以后在项目中 x 封装的，我们在这就不做封装了啊，然后在我们 critic 的时候去获取发请求获取，我就快速写了， ok， 我们写好了，定一个 cx 数组，然后我们使用 axos 向后端发起球 请求回来的数据，因为我们是 excels， 拿到这个点 data 提供给我们的赛亚斯，然后当做 pros 向下传递，叫 data 等于赛亚斯。 我们用利用的是 asvic 和 aiawit 啊， s 型格位的这个一步解决方案啊。然后我们在这个图表组件中接收 pros， 接收 data， 接收之后呢，我们在这个区域，还有这个区域，其实就需要用到我们的这个数据 啊，我们真正拿到的就是一个数组，我们通过慢跑就可以拿到这个啊，慢跑公司内部以慢单本就可以拿到对应的数组，所以在这呢，我们可以把它替换成啊，这是点 data 点慢 i 层简单数 it m 点 g， 那下边的呢？是南北 数量，我们刷新一下看效果， 但是我们会发现图表是不会出现的，什么原因呢？原因是因为我们在 app 获取 图表数据的时候是一步请求，那么向下传递的时候呢？默认传的是空数组，请求回来之后再往下传递，再往下传递的时候 mote 的就不会执行了，所以说第一次传过来的是空数组。 那么此时呢，我们可以在 app 这啊写一个 v 刚衣服，当我们的销量数组 有内容的时候，我们再让这个呆萌出现，没有的时候就不让他出现，我们看效果， 哎，这样的一个图表就有了，这样的图表呢，已经跟我们数据已经联系上了，后端的数据是什么样啊，他就变成什么样的效果。 如果说不写微钢衣服的话，我们怎么办呢？因为在这边 motee 的是首次渲染的时候，那么首次渲染的时候传递来是空数组，你传给他 motee 的不会触发 啊。有人可能会想到 abday t 的， abday t 的其实是组建的 data 发生改变的时候其实也不会触发， 那我们就考虑用什么呢？用这个 vivo 里面有一个 watch， 当 probs 发生改变的时候，我要更新试图， 那我们可以选择考虑使用卧室监听啊。所以说如果你不洗浴缸衣服，可以在组件内部使用卧室去监听，而且接下来我们使用卧室监听也是比较合适的。为什么呢？因为当我要更新销量的时候， 这个数组也会发生改变，发生改变的时候，这个 v e 服他不会变化，因为原来是有内容，我在改还是有内容，所以 v e 服一直是处他一直出现的，但是 money 的也不会是行，所以说我们此时呢还是选择用 watch。 那么咱们去写一个 watch 这个对象监听谁呢？监听我们的 data 写成对象啊，憨到这是一个海人 sir， 然后在这里面监听得他的变化，更新图标。 所以说我们需要把图表在这里进行再次更新。那么再次更新的时候呢？其实一岔子提倡再重新使用赛达博审进行必要的配置 啊，其实还是使用这个图标的赛达不审方法。那么我们在这个函数中要使用买叉，那我们就需要把买叉的定义成什么呢？定义成我们的 data， 所以在这我们写一个 data just my chart 上来等于闹，然后在下面我们定义的时候，这就不是 word， 是 these step my char。 然后下面也是同样道理啊， these step my char side option。 那么在下边我们要更新的话，还是使用这个方式去更新，那么更新的 option 只更新必要就行了，因为数据变，所以说只更新 xldata， 还有这个驻足 data 就可以了，我们把它复制一下， 在这执行 x 周的啊，还有这个 只需要逮他就行了，其他的不需要， 各式画一下，然后我们把这个 v 服先去掉，看效果。 啊，在这里我犯了一个严重的错误啊，东西没出，这是说买菜的阿玛尼 fan 的。呃，原因是因为我这个汉字乐这一块呢，不能写成间断暗数啊，要写成普通暗数，这样里面这次才指向我们的组件刷新， 哎，这样也能出啊，所以说你这边不写 v 杠易服，我们要在这边做监听 watch， 然后我们再测试一下，假如更新了 watch 会不会执行呢？我们也去同样发个请求，把那个事件叫 update， 我们把时间写到下面，同样呢也是一个一步请求 update cells， 时间我们写到 master 的里面，我们就快速写一下。 ok， 我们请求写好了，创建了一个外套，然后呢对我们的 six 进行更新，透视一下，点击更新 cis 就会出发。这边呢，因为我们已经写好了 watch， 所以暂时就不用管我们测试一下效果， 我们点一下更新，哎，这个外套会出现 对吧？这样呢，我们的数据他是能实时更新啊，你随便改变的话，他也会能出执行了，这就是我们比较简单的 叉子图表在微微中如何去使用，当然以后的话图表会进行封装， xos 同样也会进行封装，封装这一块呢，咱们今天就不做介绍了，小伙伴们赶快去试一下吧。
690北京第嘉学社
23:46查看AI文稿AI文稿好嘞，上节课呢，我们讲过了动态组件，然后这节课呢，我们就来说一下这个一步组件啊，那到这呢，很多小伙伴就会思考了，哎，啥叫一步组件？他能给我带来什么样东西，我在什么情况下会用到这一步组件，他到底是干嘛的，对吧？ 那我这样呢，我给大家做一个小小总结吧，首先一步组建呢，不管了，是不是和我们组建是有关系的呀？哎，没错啊，要不然怎么叫一步组建呢？ 然后这一步组建呢，其实呢，总结这么几个字，就是来提升性能的，那我们也知道啊，在面试的过程中呢，这个面试官经常会问到，你在六的项目中做过哪些性能优化，那么这个一步组建呢，可能就是性能提高的其中之一。 好，下面呢，我给大家解释一下，他如何去提升我们的性能啊，那当然有很多方面啊，我们这样就一项项去聊，我先给大家说一个比较简单的成 场景啊，就是我们在做 view 项目过程中呢，经常会有套娃这种情况啊，也不要套娃，就可能一层吧，比如说我现在画这框呢，就是我一个网页，那这个网页呢，它的一个大组件叫 home 点 view 啊， home 点 view 好，我就随便写了划了。 然后在这个页面中呢，会引入 a 组件， b 组件和 c 组件，好，都引进来了。那假如说呢，我这个当前的首屏啊，只会加载 a 和 b， 这个 c 呢，可能在第二屏或者第三屏啊，咱们就假设他在第二屏吧， 那用户进来以后呢，是不是如果没有看到这个 c 组件，这个 c 组件就别加载了呀？如果用户，哎，比如滑动这个窗口，那看到了啊，这个滑动网页哈，看到 c 组件，那么再加载 c， 那这样不就提升性能了吗？是吧？哎，这个有点像暗虚引入 是吧，按照需要把它加载进来，如果没有看到就别加载他了，那这样的话不就提升我的性能了吗？手屏的一个加载对吧？手屏加载一个效率或者说速度。 好，那我们总结一下，就是说他可以带来的其中的性能提升之一，就是这个组件啊，如果说用户没有访问到，或者说没有看到，那么你就别加载，如果看到了，那么再去加载，这样就提升我们性能了。 好，那么下面呢，我们就来看一看，具体他该怎么去用啊？知道了他这个东西到底干嘛了，我们就来试试啊，大家看啊，现在在我的后面六中呢，引入了 a 组件， b 组件， c 组件，我们直接引入的通过引号的形式，那这样的形式呢，大家并不陌生，对吧？ 然后呢在 a， b， c 这三个组件中呢，我稍微做点事情啊，我这儿呢就为了演示，我都给他加一个 高度吧，呃，这高度的话呢，就是四百吧，然后背颜色呢？随便来一个啊，我直接在迪奥这写了哈，然后我看一下啊，这高可能还有点高，那我就来个三百，为了演示这个功能。好，然后呢我把这个 b 组件呢也给他加一上，同样这个样式， 嗯，他的一个变颜色，我来一个 blue， 好，这是手屏的两个组件。好，然后呢这个 c 组件呢？呃，我这里边呢就不做太多东西了，我给他呢去弄一个图片 来，那我的桌面上其实呢已经弄了一个图片，我叫它一点儿拼计吧，好，放到我们的这个 src 目录里边儿放进来。好，那在这儿呢，我就 image 啊，把它引入进来一点儿拼计好了，我们去看一下这网页，咳， ok， 呃， 这是 a 组件， b 组件，然后这哪张图？这个图的话大小我给他规定一下吧。呃，宽度值，哎，宽度值我来个三百，高度值我也来个三百啊，无所谓。 好，那么现在呢，我就来看一下，如果说我不做这个义务组件情况下，是不是 a 组件， b 组件和 c 组件都加载进来的呢？没错，我们可以看看网络啊，证明这个 c 组件是加载进来的。大家看图片啊，在 network 这个地方啊，图片一点拼计他有吧，那就证明一定是加载了， 对不对？好，我们再刷新一下，一点拼技是出来的，那延续刚才我们所说的就是说，如果说我现在还没有滑到这，你就别加载了，对吧？我如果说滑到这你再加载啊，没有滑到这你别加载，那么这个该怎么办呢？好，那我们就来看硬度加 义务组建呢，首先你的引入方式不是直接引 part 了，你要一份的 thinker component 啊，那我们到这个地方就要做一些调整好，把这呢就给他先注掉或者干掉了，那我们就直接的把这块代码给他拿过来。 呃，这个地方写的还是有点问题的，拿这个好，然后呢，这个地方名字我们就改成 c 啊，大写的，然后这个路径呢，我们就替换一下。 好，这个呢就 ok 了，当然这个底范的 sink component 啊，它需要在这个地方呢引入，然后这儿呢有一个 view， 只不过我们用过那个插件儿啊，所以说呢，不需要在这儿这么去写了， 这个大家应该能懂哈，就我们在这呢不是用过那个插件了啊，就不需要去写了。好，那么这样做就可以了吗？我们来试试啊， 回到我们的网页中啊，然后刷新一下，大家看是不是不可以啊，一点 k t 它还出来了吧。啊，确实是这样的， 那你加这个东西以后呢，他不能完成你索要这个功能啊，你还要做一些事情。好，那下面呢，我给大家分享一个这样的算是一个插件东西吧。好，我把这个链接呢也给大家放到这啊，这个叫呃， view use。 好，然后呢这地方呢我们去下载一下他所要的这个包啊，来，我们去下载一下 啊，我下载一下， ok， 然后咱们把项目呢启动起来啊，然后呢你需要按照它的一个使用， 首先呢我们得引 part 把对应的这个功能模块啊要引入进来，好，到我们这个地方，那我就在这上面引入了哈，引入进来完事以后呢，看他下面代码啊，我们把这块呢整个的复制粘贴过来。好，然后我做一些小小调整 啊，首先呢他定一个 tigers 啊，然后呢这儿呢又定一个什么？呃，一个这个 force 啊， force， 这 force 干嘛的呢？其实就是判断的，我们可以在这儿呢先写个 d i v 吧，然后呢这在这儿给他写一个 v 杠 f 等于，然后用到这个值， 那大家可以看这个值呢，它上来是一个 force 对不对？我们先不用看 tike 啊，它是一个 force， 那是 force 的话呢，现在我们再去刷新一下页面吧，刷新好，大家看图片，它们就 没有加进来，为啥呢？是因为你这个组件都没有进来，对不对？是吧？那当然，我可以把这个呢放到这。好，他为 false， 这个组件都没有进来， 那你就别提说那个图片了。好，然后紧接他这做什么事呢？他这有个 tiget， 这个 tiget 是什么呢？就是一个呃，动啊，说白就是动物，我们在这呢可以写 if， 等于 tige 啊，你这样写上就可以了。好，写上以后呢？呃，这个地方的第二参数我们可以不要，我们可以不要。 好，然后在这地方我们去打印一下这个参数， 好，刷新一下，大家看着啊，我们的控制台，它上来的是一个 force， 代表什么意思呢？就是你还没有访问到 c 那个区块上，如果说滑动，滑动，滑动，哎，看到这个 c 了，这时候呢，没处了啊，这是没处了，所以说呢， 在这可以做个判断，判断什么个情况呢？如果说啊，如果说这家值为处，那我干嘛？ 我，我可以这么写，是吧？我这个值边出以后呢？我们直接付给这个值，那这样的话呢，他就变为出了，那这地方没出了，就加在他了，对不对？好，我们来试一下啊，刷新 好，然后现在呢，在我的 network 中，这个图片一点儿拼迹根本就没有出来，当我划划划啊，访问到这个组件，大家看一点儿拼迹，他出来了，然后这个图呢也就出来了，那你看是不是这个地方就提升了我们的性能呢？ 啊，没错，这就是他的使用场景之一。好吧，我们把这呢来给他写一下啊。呃，场景啊，使用场景之一，场景一吧。呃， 组建按需引入 这个过程，就是说啊，当用户滑动到了，滑动啊，到了具体的这个组件或者说访问啊， 我们到了组件啊，再去加载该组件或者此组件。好，那这个时候呢，我们就需要这么去写了，在我们的 tablet 的部分 好，把这块呢都给拿下来，然后在我们的 g s 部分 好，然后把这代码呢都给大家去弄一下。 好，那这是我们的场景一。好，下面呢我们再来看啊，场景二，把这呢给他去做一个一点二，好，哎，这应该是十点一啊，好，这应该十点二，场景二， 那么这个东西，呃，他所给你带来的是什么呢？他给你能带来东西？大家来看我们的网络，现在呢，我们看下这个 gs 部分吧。好吧，来我刷新一下啊，大家看啊， 如果说我们是引泡特直接引入的形式，那么在这个地方啊，一定会加载 c 点位由， 好，那么现在呢，我们因为使用了这个 e 部组件，所以说呢，在这个地方呢根本就没有 c 点六，当我滑动的时候啊，再去加载 c 点六。好，这是不是特别好的一个功能啊？没错， 所以说呢，在一定的程度上呢，他就做到按时引入，是不是啊？他就做到按时引入，那么这个东西还可以，这个一步组件还可以干什么呢？场景二，他还可以分包啊，这个呢，我们一会去讲到，好吧，一会去讲到。好，下面呢，我再给大家看一个功能啊，就是说我们还有一些场景是说， 呃，这个 c 组件呢，可能会做一些请求啊，这个方面呢是比较多的，对吧？我们请求数据来渲染的页面上， 那如果说这个数据还没有返回过来，我这应该显示一个加载中，如果说返回过来了，那就把具体的数据给我展示到页面上， 是吧，并且要做到一点，就是说当我滑动到了，那么再去加载该组件。好，那这时候我们该怎么办呢？也是差不多的一个情况，只不过我们先要做 做一个 low 定啊，就是要给他一定的提醒，是吧，加载中等等这样一些内容。好了，下面呢我们就言归正传啊，来说一下这块的一些内容啊，就乘以二了啊，乘以二，嗯，好，那我这呢就拿这个 a 组件来说吧。好吧，就拿 a 组件来说， 呃， a 组件这儿呢，我就不要这个，不要这个滑块了，不要这个滑块 c 组件直接展示了，那我把 b 组件呢给它加的高度大一点，好吧， 好，然后现在呢再回到 a 组件啊，大家看着啊，现在我 a 组件呢要做这个请求，那我在这呢就要写上对应的请求数据的一些内容了，是吧？这呢是塞大， 嗯，好，然后定一个 list 吧，等于 r， e， f， 它是个空的数组。好，然后呢还要提醒一下大家啊，就是如果我们要选项式 a， p， i 的话， 可能会用到 sync 以及 await， 那这时候呢，我们需要这么写，呃，三下，我这儿会写一个 a sync， 然后这儿呢有一个 is 等于 await excels， 是吧，然后这么去写， 但是呢，你直接用三十二分钟语法堂呢，你可以直接啊 wait 不用 think 啊，因为它这地方呢就是一个啊 think 的。好吧，所以说呢，我们家长可以直接用。好，那到这呢，我就把 excels 呢先给它下载一下，因为我要去紧接口啊，那就 i s 等于 呃，这个 wait， 然后是 excels 点 get 好，我去发送一个气球，然后最后呢 is 的 date 的 date 的 list， 然后附给呃， list 的 value 啊，然后呢我把这个数据呢就展示到我的 a 组件里边，那这是我的 list， 好，那我们就等待他下来， ok， 完事了，那我这 呢就需要引炮他一下 excels from excels 了，是吧？好，然后呢我去拿一下这个接口数据啊，嗯，这个接口数据在这 啊，这样呢直接可以 get， ok， 那到这呢我们就来看一下吧，刷新好了，此时此刻他就出现报错，看到没有 什么样错误呢啊，就是说他需要让你通过这么一个东西呢包裹起来，这也是 vivo 三所提供的系统内置组件，那在他的官方文档中呢，也强调到了啊，我们可以直接用到他，好吧，那么到这呢，我们就需要把它包裹起来， 包括起来以后呢，刚才我说到了，你可能会有两种情况，一个呢是这个东西可以直接进来，另外一种情况就是他在加载中你要提示个信息，所以说呢，我们这可以这么做，就是用这个 插槽形式啊，然后这是成功的，对吧？这是加载完事的啊，如果说，呃，他这个加载中，那我提示一个加载中。哎，加载中。 好，那这时候我们再来看这个页面啊，刷新，大家看到没有，有一个一瞬间的加载中啊，邦出来这个东西， 是吧？所以说呢，我想告诉大家的一个情况就是，呃，这个 e 部组件啊，那当然，我们这样的其实应该要写成 e 部组件的，就是这个 a 啊， a 要写成 e 部组件。 好，那当然若如果说我先不写一部组件，那我们先来看一下吧。啊，在网络中刷新一下，那这个 a 点 view 它肯定会出来，对不对？它肯定会出来。 好，然后呢他这呢有很多的信息。 ok， 呃，我刷新一下吧。 呃，这并不能看出来 a 点 view 啊， think 能看出来是吧？呃，这 a 点 view 它其实怎么说呢它肯定是引不进来的啊，在这个地方。好，这样吧，我还是给它弄成一个异物的吧，好，刷新。 好，那这个时候呢它也是同样出来的，那你这么做有什么样好处呢？哎，不就是做了一个提醒吗？对吧？你有一个加载中啊，我可以把我的网速呢给改一下，改成一个三 g 啊，好，闪现一下啊。这个呢就有点慢了啊， 稍等。嗯，他这个速度太慢了，这可以做到什么呢？ 这个组件它也是溢补的，它可以做到分包的处理，它其实呢也是一个按需引入啊，加载中，大家看到了哈，然后过一会等它加载完事。 咦啊出来了啊，有点慢啊。行吧，我给大家回到。呃我们最好的这种形式啊。好，大家看到这些功能是吧。好，那这样情况下呢你可以结合啊，这个内内置组件可以继续用， 我们把这个先写到这，在我们的 skirt， 然后这有一个塞踏， 因为写到这，那么这个有什么好处呢？首先如果说你的 a 组件本身是 assent wait 啊，就这种翼步的操作或者说 promise 啊这种翼步操作你不加这个内置组件 他都会出现一些警告对不对？而且数据出不来了，所以说你必须要用它。好，那么这个东西能所给你带来的这个功能是什么呢？啊？注意啊，这样你不用的话就会报错了哈，他可以解决，他可以给你分包。 分包？分包什么意思呢？就是我们的一个 home 点六中引入了 a 组件 b 和 c， 对不对？如果说这个这个这个不是一步的，他最后打包完事是一个点 gs 文件， 你如果说这个是一步的，或者这个是一步的啊，或者这俩是一步的，他会单独的给你打一个包，比如说叫 a 点 gs 啊，这个叫 c 点 gs， 他会单独给你分包。那这样的话是不是从你这个大的这个包里边把这个抽理出来了 啊？当用到的时候再加点它，你想啊，如果说我不做一步的，是不是全部都打在这 gs 里边，这个体积又过大， 但是呢，有些代码可能都用不到，但是你会都加载是吧？当我把它抽离出来分成包以后啊，分包了是吧？把你的这个某一个功能啊，某一个这个组件中的 gs 代码，我抽离出来一个单独的包，当用到它再去加载，是不是这样会提升很多呀？啊，所以他在我们打包的时候 会做这样的一些内容啊，包括在他官方里边呢，官网里边也说到啊，我们去看一下。呃，在这他说， 呃，在大型应用中呢，我们可能需要将应用分隔成小的代码块啊，并且呢需要在，并且在需要的时候才能服务器加大一个模块，从而实现这个效果，是吧？你看啊，现在我就给各位去打包啊， 呃， n p m wrong， 好，注意，现在呢，我的 a 组件是不是已经是一部的？我这个 c 组件是不是也是一部的？好，那这时候我们去看。 呃，在我的这个 disk 里边啊，好，大家看， c 和 a 就被单独打出来了，而 b 没有啊， b 没有 b 点 g s， a 和 c 就被单独打出来了，就把它俩抽离出来了，要不然你不抽离全部在这里边。 好，他可以做到一个分包的处理啊他可以做到分包处理，打包分包处理，其实这也是按需的引入啊，这也是按需的引入。呃，这个使用场景我们就写一个十点三吧。 呃，比如说 n p m 让 build 打包完成后， e 部组件有单独的 g s 文件，是从主体 g s。 啊，分分分包出来的，比如说有这个 a 点啥啥点 g s 以及 c 点啥啥点 g s。 好，这是特别好的一点，对不对那？呃，我相信有些小伙伴呢可能还会想到说，哎哎，这个地方我打爆了， 知道，刚才我们的第一个模式啊，就是这个 c 组件，对吧？这个 c 组件，呃，如果说我正常加载，我先把这干掉。正常加载是这张图吗？对吧？正常加载是这张图 啊，如果说他没有加载出来时候，我也显示个加载中，该怎么办啊？也是可以做到的啊，你就把这个包裹起来就可以了。把这个包裹起来，呃，然后这个胎给他放到外边啊，好，呃，然后这个 c 给拿过来，然后把这个放到外边， 这样也是可以的啊，这样也可以啊，插进一下。呃，这个地方是没有我，我写一个这样数据吧，让他进行一个展示，要不然他加的太快了。 嗯，这里边我就写个 c 组件，然后这写一个 list， 这样话让他加点慢一点啊，别太快了。好，稍息。 呃，大家有没有看到？哎呀，有点快啊，高速三 g 吧，好，刷新一下。 嗯，大家看啊， a 组件会有个加载中，然后你看这你看这有个加载中 a park 出来了是吧？这个也是可以做到啊，你可以混着去用，当然，呃这里边布局什么的你也可以去自己去弄是吧？或者说单独引入一个 loading 的组件都是可以的。 ok， 比如说我这有一个什么 呃 loading 的组件也是可以的啊，当然这个 a sink。 呃这个地方的 sink component 啊，它还有很多写法，不过我们在公司要用的话呢， 呃不会说在这里边再去去写，比如说有一个 time out， 这个时间三千毫秒，一般规章啊都是我们通过这样形式去做好吧。啊，因为原因呢，就是让他分包，这样的话会更好，当然，呃我现在如果说不分包不分包，那么我也可以给大家去看一下不分包的情况下就不做 做这个一步组件啊，不做一步组件我们就单独再打一个吧，让大家看到这个效果是吧？嗯，那这个项目就需要。呃这样我把它的 s r c 呢？ 呃复制一下儿吧，这个 a b c 组件我给它 a b c 组件到无所谓。可以可以，不用去修改，我把这后面点 b 我修改一下。好吧。哎。怎么碰到桌面哎。行，那放在桌面，放在桌面。 好，这个放到桌面了，我做了一个备份。啊。好，现在呢我就把 a b c 组件呢不做成异物的。好吧，我们直接就是引炮的这种形式， all。 嗯，然后下边这儿也是一样，这个我就都不要了啊，我只是给大家做一个演示哈，然后这儿有一个 a 啊，当然你那个 a， 哎，算了， a 我就直接这样引吧， c 和我，我也这么这么直接引吧哈，然后到这我们就打一下，好， n p m rom 丢 好，直接打，然后我们去看一下这儿的一个 dist， 好，打开，然后这里边好 a 点 g s 和 c 点 g s， ok， 没问题啊，然后现在我把它呢再给它 呃，返回一下，然后把 home 这啊，然后这个地方给它改成 a， 好，现在呢，我就不做一步组件了啊，不做一步组件了 好，直接就是以 pro 的这种形式来再打走，我们再来看 dista。 好，你看是不是全都打到一一个这个 index 里边了。好，所以说这是一步和不一步的区别啊，如果你单纯的只是把它作为一个一步的，那它就单独的抽离车一个包好，但是没有具体的一些 怎么说呢？没有具体一些按虚的功能， ok， 你要做按虚的功能的话呢，你还要去加代码，但是呢，如果直接用 defin 的 sink ctrl 啊去这样的一步赢这个组件，他确实可以做成分包哈，这点呢，大家要切记，不过一般情况下呢，我们都是 啊，就是，大家记得吧，就是我们在一个项目中呢，哎，没有三种啊，几乎都会直接一步去引入每一个这样的组件，几乎啊，几乎。 呃，然后呢，其次呢，就是因为分装会让他性能会提高嘛啊，然后呢，其次就是你可能第二瓶第三瓶的也会用到刚才我们说的滑动到了以后再去加载，对吧？好，这是我们所说的东西啊。好，那这个是我们的 e 股 啊，到时候大家看这个笔记就可以了啊。行，那有关于一部组件呢？我就给给大家呢，先说到这里。
331小爽AI产品经理
