vue3 ztree使用教程

假如说咱现在要做一个系统，做一个什么样的系统呢？比如说这里有一个登录啊，啊，输入用户名密码，一点登录，然后就会跳转到一个系统里面了，这就一个系统啊，然后这个系统大家可以看到啊，他这个啊上面呢有一些菜单，用画图给他打开，大家看啊， 这管理系统进来之后，上面呢他会有一些菜单啊，比如说这个，呃，资料审核呀，发票啊等等等等之类的啊。然后左侧呢也有一些菜单，然后右侧的主体内容呢，是一个 呃显示正常系统功能的一个页面啊，那点击这些列表或者翻页的话，都都能实现一个跳转啊，那咱们如果说想实现一个这种系统的话，肯定是需要这种 页面跳转的功能了，但是咱之前讲的那个 vivo 呢，单文件组件的 vivo 呢？他只有一个页面，对吧？不能随便跳转呢？那今天呢咱们讲什么？讲这个 vivoutut 就可以实现 vivo 应用 页面跳转了啊？那比如他怎么用？咱们从头开始新建一个项目再说啊，那我这里先打开一个今天的内容，八月三号啊，那首先呢，我在这打开一个密码工具， 打开面条工具啊，那咱们现在要做什么呢？要创建一个 vipo 项目，对吧？那咱上一次讲了，讲了 npm， 然后 innite， 然后是 vt， 用 vt 创建一个应用 vt， 那这个呢，就叫如车下划线呆萌回车，用 vt 创建一个如特呆萌的一个 vivo 的箱， 那这个创建创建速度应该还是挺快的吧，咱看一下效果啊，呃，应该是建完了，对吧？建完了，然后我用 wifi 之后把这个项目打开，把这个新建的项目给他打开， 在这个 oppost love you 八月三号啊这个项目， 那好，这项目建完之后啊目结构大家应该很熟悉吧？ sr c 咱主要的组件都写到这里了，对吧？这还有个拍开点这身，他依赖什么呢？啊？依赖这个 beau， 我需要把这个 beau 给他下下来啊，然后，呃，他这里还有个 beat 工具，对吧？这就是 beat 啊，然后我现在如果想下这个 beau 的话，需要 cd 先进到这个卢特呆萌里面啊，然后 c n p m 因斯道安装依赖，安装完依赖之后我们就可以启动这个项目啊。 好，那他下完了，下完了，然后我们启动这个项目 npm rend 第一位，这个呢，就是用 b 启动一个 项目，启动完成之后咱们应该就可以在这个呃三千端口里面访问这个项目了， 他还在还在启动，是吧？哎，启动好了啊，默认的话，咱创建一个默认的六三项目的话，他是有一个计数器，对吧？计数器啊，当然这个功能咱不要啊，咱要的是什么功能啊？咱要的是一个刚才说的这个啊，对吧？一个这种系统，对吧？可以实现页面跳转呢？可以可以，有登录啊，这个登录功能啊，当然 咱们把这个系统给他简化一下。简化到什么程度呢？把样式都给他去掉，大家懂吗？现在这个系统是一个呃 登录然后跳转到系统里面呢，是这样可以实现一个内容管理啊，菜单啊，可以切换呢，可以实现一个这个功能。那咱们把这些样式全都给他去掉啊，咱就给他搞一个最简单的一个。 呃，最简单的一个效果什么样呢？咱就实现一个这个效果。大家看啊，现在是用户名，比如说我用户名输个一二三，密码输个一二三点登录啊，他是用户名或密码错误提示了啊，那如果说我输正确的呢？他的命啊，然后密码是一二三四五六，点击之后就可以进到系统里面了， 你再看啊，是不是上面有一排菜单，然后这有一个内容列表，然后点击列表的时候可以切换到不同的页面。切换到不同的页面啊，然后点击注销的话，还可以进到登录页，咱实现一个这个功能，懂吗？ 那那把这个功能实现之后，咱如果说会一些样式啊，加一些效果的话，就可以实现刚才那种系统的功能了啊，这看完之后，咱现在啊需要下载 vivoutut 啊，为什么下载 vivoutut 呢？因为咱创建这个项目什么没有啊？就只有一个 vivo 这个项目就只有一个标。那咱需要实现页面跳转的话，需要需要下载一个 vivoutut。 怎么下载 vivoutut 呢？咱们再打开命令长工具啊，我们先把这个项目给他关闭，现在是启动状态啊， 完毕啊，然后呃 c n p m 因死照啊，刚刚 siri 添加一个依赖，然后下载什么呢？下载 vivo gute。 但是咱用的是 vivo 三对吧？ vivo 三的话他用的 vivo uti 版本是四版本啊，所以说我加一个艾特四，这样的话就可以下。呃 vivoutur 的一个四版本啊， 下完之后咱现在再启动这个项目，启动这个项目 npm ren。 呃，第一杯 启动那个项目啊？呃，他这个是这样的， npm 四十五也好啊， npm 第一位也好，就从哪看呢？大家看，是这啊，这里是不是拍开点这一身里是不是有 一个 surpe 的一个这个属性的吧，这个属性里面定义的第一位啊，是调用 mit 命令，那就说明我执行第一位的话他就执行 mit， 执行 vip 就是启动项目啊，那比如说，哎，有小伙伴说，哎，我就喜欢用 npm rond sorry， 那怎么办呢？咱给他改成 sorry 就好了，对吧？ npmry soro， 然后把服务器给关了 啊，那这回我再启动服务器呢， npm 四五对吧，这是可以设置的，你是第一位也好，四二五也好，咱咱想用什么用什么啊，都很方便啊。对的，启动方式可以定义啊，那现在 mm 四二五又起来了啊，然后咱还是这个三千转口啊。 好，那现在是咱们做了一些准备工作都做好了，咱们现在就要开始写这个。呃功能了，写功能的话咱先实现一个最简单的功能。什么功能呢？就是说我现在打开这个，我把这个 helloword 干掉， 这玩意没有用了啊，好了，我得给他去掉。去掉啊，实现一个什么功能呢？现在就是有一个菜单啊，这个菜单叫首页啊，首页后面有一个博客啊，然后咱看一下 首页和博客，对吧。当我点击首页的时候呢，下方他会显示首页的内容，当我点击博客的时候呢，下方会显示博客的内容， 然后我先把这个样式给他去掉再去掉啊， 那我怎么实现刚才说这个内容啊，点击首页啊，对了啊，点击首页放大点啊，点击首页显示首页内容，点击博客，显示博客的内容，那我就需要创建两个页面，创建两个组件，一个叫首页，一个叫博客，对吧？啊，那第一个呢？在康复单词里， 我先把这个 hellower 给他删掉。啊，没有用了，删掉他，然后在康复的字里，我创建一个首页，叫 home 点 book， 然后我再创建一个博客，叫 blog 点 blue。 啊，咱现在的目的是什么呢？就是实现简单的页面切换，对吧？ 实际简单的页面切换的话，我就不需要关注它里面有太多的东西了，我就直接写一个 h 一标签就好了。 h 一，这个是博客啊，然后这个首页呢？ h 一有个首页，对吧？啊， 那我如何实现页面切换呢？这个就需要 vivout 提供的一些功能了。 vivout 提供了一个什么呢？就是提供了两个标签啊，就比如正常咱如果写的话，可能写个 a 标签，对吧？ a 标签，然后这是首页，首页，然后这块 跳转到等了跳转到后米，对吧？啊，然后下面有一个 a 标签，是博客，对吧？如果是说咱们以前不用六的话，那这个跳转到 blog， 对吧？ 然后中间有个斜杠分割一下啊，他是这样的，对吧？首页博客，但是咱现在用六了，六的话，我们用 urout 提供的这个页面跳转就不用那个 a 标签了。 uroututuurututigo 的呢？叫什么标签呢？叫这个啊， utile mank， 如特令，可相当于就是这个 a 标签的意思啊，就跳转的意思啊，但是他还是有一些区别的，一会咱再说区别，那这个呢？跳转到首页，然后，哎，如特令可啊， 这个跳转到如，他另一个跳转到首页，然后呢？如如他另一个 不用那个 hr e f 的，用的是兔，用的是兔啊，兔就是跳转到哪？跳转到后面啊，然后后面呢？我夹一个竖杠，然后这边还有一个轮圈 mink， 那下面那个呢？就是跳转到博客页了，对吧？啊？然后这个是兔， 等于斜杠 blog 调整到博客页啊，那我们看一下现在的效果啊，这是不是一个首页啊？一个博客啊，对吧？啊？那下面首页和博客下面的话，就是切换页面的一个呃位置了。 那我需要用一个标签给他占位啊。用什么占位呢？用这个如天六，用如天六给他占位。也就是说我切换这个 home， 切换那个 blog 的时候，他的显示的东 你放在哪啊？显示的主件放在哪啊？放在这个如特六里面，他是一个这个思路啊。好呢，页面布局咱已经写完了，我现在点击的时候下面有切换啊，但是功能还没写呢，咱现在点击他是切换不了了，怎么点击让他能切换呢？咱们需要配置一下这个路由啊。那怎么配置路由呢？这么写啊？ 在 src 里面我直接创建一个如特点 gs 啊，因为咱们刚才是下载了这个如特 biu， 咱们还没有引进来呢，对吧？所以我现在需要引入这个。呃，引入这个如特啊，音炮的啊， 可以先控制从哪引呢？ fom fom 这个如铁 fm， 这个没有如铁啊，引进来一个什么呢？他有一个方法叫 ctrl 如铁 啊，这一个结构。结构，我可以拿到一个可瑞的 rut。 可瑞的 ut 的工作是干什么呢？就是创建一个呃，陆游的功能啊，这是可瑞的 utut 啊。好，那创建一个陆游之后，我怎么去创建陆游呢？定一个陆游叫 如此，等于用咱们引进的一个方法，可瑞特如此去创建一个陆游。创建一个陆游，然后创建完成之后呢？ cos 的写错了， sunit 啊，创建一个陆游之后呢？然后我们可以把这个陆游给他暴暴露出去啊， ex pot expotd box 啊，撸铁啊，但是这个撸铁怎么配置？我需要在这里配置。 怎么配置？咱一会再配置。我先给他暴露出去这个如天的配置呢，咱一会再写。咱现在要干什么呢？就说 我需要让 w 的这个应用把这个如特给他引进来，对吧？那咱再回到刚才的这个，呃， manel gs 入口是 gs 文件，大家看入口 gs 文件，这个是不是创建了一个 w 的应用啊？然后挂载，对吧？那我需要用这个 w 的应用来使用，刚才咱们新建的没有如帖是一个这个思路。那咱们就给他先改写一下 cost f f 等于这个 w 的应用啊，然后 apple 挂载。我现在代码没改啊，一模一样，跟刚才是跟刚才是一样，我只不过是加了一个变量 app， 对吧？啊，然后呢，我先引入刚才咱们写的那个 呃，如此 gs 文件啊，他暴露了一个叫如此的一个呃接口，然后 fom fom 哪个文件呢？如此 cs 啊，这个乳铁就是咱刚才暴露出来的这个乳铁了啊，那我拿到这个暴露出来的乳铁的话，我用 apple 点柚子方法 就可以直接使用咱们暴露出来这个 vout 了，这样的话 u 的应用就可以用这个路由了啊，那接下来呢？我们的工作就是去， 呃，去设置这个路由。设置这个路由，把这个路由设置成什么样呢？设置成，刚才咱们写这个呃，可以跳转到首页，可以跳转到博客的一个功能了啊。好，那咱们现在开始正式写设置了啊，刚才写了一堆都是引入，对吧？刚才写了一堆都是引入啊，现在写设置了。 设置的话，首先这个可谓是如题，他需要传两个参数，第一个参数什么呢？叫嘿 siri。 嘿 siri 是一个陆游的模式啊。陆游的模式，这个陆游的模式呢？ 是呃，有什么区别呢？一会咱写，一会咱再再给大家说，大家只要知道的话，大家只要知道现在我引入这个陆游的模式是一个呃哈西模式就好了啊。需要引入这个可以的 word， 这个是干什么用的？一会咱启动的时候再跟大家说啊。这个大家知道，这么写就 ok 了。然后下面有一个很重要的就是这个路子，这个才是真正的配置路由， 这个才是真正的配置陆游。那我我的目的是什么呢？我想点博客跳博客，点首页，跳首页，对吧？啊？那我怎么配置呢？首先这个 入词里面入词是一个数组啊，数组里面我可以写一个对象，对象可以写个陆游 pass 路径。路径是哪呢？跳转到首页，首页就是一个斜杠啊，首页是一个斜杠，然后， 呃，跳转到哪个组件？跳转到哪个组件呢？跳转到首页的这个组件，对吧？康不是等于 home 这个组件，但是 home 主键我得引进来才能用，对吧？所以说我叫引入 home 啊，你们 pose hom， 这个康不能吃里面的这个 home 主键， home 主键引完了之后，咱再把这个 blog 给引进来啊， 不落个引进来，不落个引进来，然后呢，我再写一个路径啊，再写个路径啊， pass， 等于我只要跳转到斜杠，不落个的话 啊，我就渲染哪个页面啊，渲染哪个组件啊？ blog 这个组件。好，那这样咱就写完了， 洗完之后，咱看一下鞋带的效果啊，路由也配置完了，路由已引入了啊，然后呢，咱看一下鞋带的效果， f 十二， 呃，然后咱现在是有了一个是首页，一个是博客页啊，然后咱现在想实现一个跳转啊， 啊，这里啊，真的是引入，引入入群，对吧？引入入群，我写个引入 app 了，不好意思啊，引入入圈， app 点右，这样引入入群啊， 引入入群，然后咱看一下，哎，这个就好了啊，入群引进来就可以切换了，然后这个首页啊，博客首页博客啊，就可以实现这个页面的来回切换了。每当我们点击这个时候，大家看上面那个路径啊， 路径现在是一个斜杠啊，警号斜杠啊，然后点博客，那就是警号斜杠 blog 啊，那他就会切换到博客的这个页了啊，就是一个这个切换的功能。

好嘞，上节课呢，我们讲过了动态组件，然后这节课呢，我们就来说一下这个一步组件啊，那到这呢，很多小伙伴就会思考了，哎，啥叫一步组件？他能给我带来什么样东西，我在什么情况下会用到这一步组件，他到底是干嘛的，对吧？ 那我这样呢，我给大家做一个小小总结吧，首先一步组建呢，不管了，是不是和我们组建是有关系的呀？哎，没错啊，要不然怎么叫一步组建呢？ 然后这一步组建呢，其实呢，总结这么几个字，就是来提升性能的，那我们也知道啊，在面试的过程中呢，这个面试官经常会问到，你在六的项目中做过哪些性能优化，那么这个一步组建呢，可能就是性能提高的其中之一。 好，下面呢，我给大家解释一下，他如何去提升我们的性能啊，那当然有很多方面啊，我们这样就一项项去聊，我先给大家说一个比较简单的成 场景啊，就是我们在做 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 股 啊，到时候大家看这个笔记就可以了啊。行，那有关于一部组件呢？我就给给大家呢，先说到这里。

哈喽，大家好，今天教大家使用武夷山写一个无缝人波，都说无缝人波是前端入门的一个守门员呢，不是说他有多难呢， 是它里面涉到综合知识还蛮多的，他就是这样，当我们呃播放一个图片播放到最后一张的时候呢，你再播放的话，他会播放到第一张，但是他这个方向还是一直向右播放啊，或者说向左都是一样的啊， 这个该怎么实现呢？我们来实现一下。首先我们来就是快速写一个没有无缝的摸的情况啊， 我的宝贝成功暴露 这里我使用 shit 语法， 这里我需要定一些变量啊，比如说 current index， 就是当前播放的位置 transform 这个一个 trans transition， 然后准备三张图片呢， 然后把这个 return 出去啊， 下面写这个人的函函数， 这个函数的话我们复制已经写好了，保存看一下啊， 没有效果，不好意思啊，这里再稍微看一下，保存看一下啊，现在这个图片出来了，我们还要给他增加那个， 就是他下面不是有那个三个点吗？ 那我叫 indicator， indicator 指示器啊，指示器，指示器怎么写呢？ 仔细其实就是图片的一个长度啊，循环一下啊，复制一下， 保存看一下， ok， 有了。然后一个左右的一个播放啊， 这首歌怎么写呢？我们引入一下这个一个按钮，一个图标。复制已经写好了啊，他这里需要一个向前播放，向后播放的一个函数啊， 可以保存一下。好，有了，那现在这个播放他没有效果，因为我这里还没有写内容啊，这个函数我们快速写一下， 好看一下啊。 ok， 没有问题。那现在就是一个简单的轮播图啊，没有无缝的效果啊。那我们要实现一下无缝的效果， 我们先把这个 oflok 的把它取消掉啊，这时候我们就会看到，呃，三张图啊，一张图，第二张图，第三张图，我们要是实现能播的时候呢，我们需要复制， 就是在前面复制最后一张，叫最后面复制第一张啊， 就是在这里 就是写下复制，复制最后一项，在这个循环下面写个复制，呃，第一项 好，保存看一下。好，他现在呃三张图都变成五张图了，就是 这一张图实际上是最后一张图啊，因为我们对他首尾进行了复制啊，当他现在播放的时候，默认显示 第一张这个地方位置就有问题啊，我们需要让他这个 ctrling 加一啊，这里也要加一，上面这里也要加一，好保存看一下 啊，他现在播放第一张，第二张，第三张，最后用它跳转到， 就当我们播放这一张图片的时候呢，嗯，最后一张的时候说他再往后面播放的时候呢，我们让他瞬间瞬间移到， 移到这一张，就前面这一张这个位置。 这首该怎么说呢？ 就是在他那个时候，这个时候我们判断一下，当他已经播放到镜头的时候啊，我们写一下，我们让他那个 transition value 等于一个空置物钻的这个选择性，他是一个动画效果，我们让他瞬间移到那个时候，把他这个动画效果清除掉啊， 然后呢给他一个 transform value， 他那个位置的传说 wifi 是多少呢？百分之零呢？我们把这个注视掉 看一下啊，好，不放，不放。最后一张，你看他瞬间到这里来了，是不是？不放，不放。 ok， 到这里来，到这里来之后呢？ 到这里来之后，我们让他又呃，向后播放啊，向后播放，我们实际上就是把这个 card 音量是等于零就行了。他播放完成之后呢，我们需要给他，就是在这里 我们需要他跳转到第一项。跳转到第一项之后呢，我们又需要他执行那个动 画呀，这个时候怎么做呢？我们需要使用这个 request animation frame， 就是需要浏览器渲染一次啊，等待浏览器渲染之后，你写箭头函数的样子，我们又给他这个 transform， 把它这个 transform value 设为空。啊，为什么这么说呢？当他传说外，传说外的等于空的话，他就会使用他默认这个动画效果。 最后的话，我们再给他一个 translation 一个 value， 又让他等于最开始的这个值， 最终让它 continuous 等于零。保存看一下 哦，不放，不放， 没有问题啊，我们把这个 overflow 加一个 overflow 黑灯， overflow 黑灯。好， ok， 没有问题。那前面这个，呃，第一张播放的时候也是一样啊，我们在这里让他那个给他一个， 也是也是把他这个全贼心，全贼心歪了，清除一下他的全贼心。 transform value 的话，这里 transform value， 它是 translate 一个，这是这是多少呢？ 这是这个，呃，图片的长度啊，加一啊， 这么一个百分之百，这里我们需要他。呃，当他走到这里来的时候呢，我们让他跳转到。 哦，最后一下实际上也是一样的，也是复制这个代码，让浏览器渲染一下，保存看一下， 往后往前 没有问题啊。 这里比较难的地方就是我们让他瞬间移到那个我们复制的那个位置的话，复制完之后呢，我们让浏览器就是 request animation free 的话，又把它这个 这个设为默认的，要把这个传送 value 等于一个空支付算，等于空支付算的话，那他就会使用他原来的这个上面这个传说我们这个样式， 然后让他再执行一个这个选择性动画也加上去，最终我们执行下面这一句的时候呢，他就会有一个选择性动画效果。啊，对，就是这样的，我这个， 呃，还有个比较好的地方是我们这里给他指定了一个宽度和高度了，时尚这里的宽度和高度我是可以呃，让他那个全屏的是适应的，我们可以看到， 嗯，我们把它宽度给它一个 w screen h u screen， 我们可以看到我会做一个全屏的 宽度，可以随便改啊，把这两个车数移除掉看一下，就是我再也没有给他设任何宽度和高 的情况下，他都是可以自适应的。好的，今天的分享就到这里，关注我，教你更多潜端知识。

今天周六，然后花了一个小时去录制一下前端的 v 三快速入门，嗯，基本上一个小时就能去学习完， 然后主要是讲解了如何去快速的去创建一个项目，然后以及模板语法，就是 if s we got four 啊这的，然后就是响应式的一个实名，比如像 r e f v x t 五， 然后就是通过我们的插件去解决，我们去导入嗯 i e f 之类的，有大量的 import 的， 然后就是计算属性的以及鉴定器，然后我们写业务代码，难免会遇到我们的组件，我们去抽你组件的时候，然后我们要知道如何去引用，但这个比较简单。然后就是副子组件如何传尺，说子传父，父传子， 嗯，他传直方式，比如像 wechat model 以及拼掉 v 叉，嗯，方式都有很多，这里列举的比较基础的。 然后就是嗯，像复制组件如何去调用相关的方法，以及嗯插槽，然后分到嗯，比如像居民插槽，动态插槽啊，转运插槽等等。然后就是动态组件了，比如说我们可以通过以费钥匙去判断去显示哪些组件， 嗯，以及生命周期钩子，然后如何去触发，方法当然都比较简单。以及我们像嗯 r e f 生命的一个变量，我们需要掉弯钮才能去修改，然后我们也可以通过我们多道符号 r e f， 然后去解决我们的一个掉弯钮，就可以不用去写掉弯钮，直接去复制。 嗯，整体来说这个 v u 三就比较简单，基本上一个小时每一集就大概只有两三分钟，然后就可以去快速的去掌握我们比较重要的一些 四点了 v u 三的快速入门的文档版啊，放在了我这个仓库下面，然后这里有一个 v u 三啊，在这节有个第二版，然后就是我相关的一个文档了 对应的视频。嗯，这个，嗯，整体来说比较简单。嗯，感兴趣的话，嗯，想去学习卫浴三的话可以自己下台去参考一下。嗯，加油。

如果我们想让副组件的数据在子组件中显示，需要通过副组件给子组件传递数据。 和 v 二一样， v u 三同样支持 props 的组件通信方式，只是语法上出现了一些差异，副组件传递数据还是使用 v 杠班的指令。此组件通过 define props 进行接收，里面可以是一个数组或对象。 在父子组建通信中，这种方式也是最常用的。现在只要父组建的数据发生改变，子组建也会实现同步变化的效果。 当子组建希望副组建的数据发生改变，则需要通过方法 去通知副组件进行修改。调用 defining meets 并定义要发射给副组件的方法， 副组件则需要绑定此组件定义的事件和 v o r 简直是一模一样。 下期接着来看 vigo model 的通信方式。

大家好，上个视频我们讲了在 vivo 三中分装组件的时候，如何配合使用 vipod model 进行一个数据的双向绑定。 今天我们来分享一下，在未有三中我们如何来自定义指令去使用。那么在未有二中我们是怎么去定定义的呢？ 在 vu 二装 expose default， 把 d f l 啊 default， 然后在这儿直接是 drag to， 是不是 d r e directives， 然后在这里面去定义你想要定义的自定义之令。但 v u 三中，我们就在 v u 三中 c 踏步与法堂这种写法的情况下，我们就没必要那么麻烦了哈。在 v u 三中，我们非常简单直接 cos， 看似一个什么，比如说我这个指令名称，指令名称一定要遵循驼峰命名法，必须以小写的微开头，比如说我们要定义一个，让他这个音铺子让让，让这个音铺子自动获取焦点， 对不对？那我们应该怎么去做啊？必须以小写的微开头。 forecast 佛卡斯等于一个对象，这个对象下面我们需要执行未有三中 给我们那些生命周期，比如说我们 monty 的，对吧？ monty 的， monty 的接收什么？ monty 的接收一个 el， 也就是说这个实力我需要往哪放？那就是那个实力，我们可以跟搜一下 el， 对不对？那怎么去使用呢？我们这个命名是微小写的微开头，然， 然后大写的你那个职业的名，那个名字，对吧？具体你怎么怎么命名，根据实际情况去命名。怎么使用呢？ vgangfox f ocus 就行了。 大家看到没有？这里输出了那个音铺子对不对？这个音铺子是从哪里输出的？因为我自定义了一个指令， vicom focus， 然后在 monty 的这个生命周期的时候，我们去执行了一下 console 输出了，他这个是这个原型，也就是这个元素的本身。 那我们在这 el 我们可以设置下 el 的 v 六，他这设置一个值，一二三四一二三四，一二三四，对吧？这个时候我们大家就可以去看到我们这个音铺子绑定了 佛卡斯这个指令的自定义指令的音谱的就值就改变了，因为是我们在这里是改，是在这里去改变的，明白吧？那如何去让他在 在 money 的这个生命周期的时候让他自动获取焦点呢？很简单了，是吧？这个音铺子本身 本身就有一个佛卡斯的事件，那我们现在在刷新一下，看到了没有？是不是已经自动获取焦点了？如果看不清的话，我们可以在这里去定一下钥匙，对吧？ 比如说 input， 我们让他默认的报道为零，对不对？然后比如说我们在 forecast， 好小个帽哈，我们在 forecast 的时候让他 border， epx， s， o， l d， 井号，井号，我们拿一个颜色对不对？ 好，我们就用这个颜色， 这个写错了啊， if all see you， 这个是是对的哈， 我们需要去除一下他的默认样式， 看到没有？当我们自定义这个指令在 money 的生命周期的时候，让他自动去执行获取焦点的这个方法，那我们在这去绑定完以后，在这里大家就能就应该能看到，对吧？他已经自动获取焦点了。 好，今天就给大家分享这个在 vu 三中自定义指令的一个技巧，或者说一个方法，在 vu 三中是 非常方便，也是非常简单的，我们直接通过声明对象的声明对象或者说电量的方式去在下面执行他不同的生命周期来操进行操作就行了。需要注意的是，必须以小写的微开头。 我今天就先分享这么多，这个是我利用业余时间去做的一个 viu 三的 ua 组建库，现在呢？全网甄姬 贡献者，如果有兴趣的话，大家可以一起参与进来。

好，这节课呢，我们就来完成课程页的最后的这个条件筛选，这呢有综合最新课程最多购买以及价格。那首先呢，我们先来解决一个事情啊，就这个价格呢，它其实有一个上下箭头的在这呢，我们并没有啊，所以说呢，我需要先把这块先给它弄出来啊，行，那这样吧，我先把上节课这个笔记先翻过来哈，这呢有一个十六忘记，忘了，咱把这十六翻过来这个链接，然后那个十七的话是我们这节课内容啊， 不管是卸会选择老是弄好了，下面呢我们就先去调整他的一个上下线头这块，那调整他呢，我们就要打开这个地方的一个 cos 点没有是吧？然后我们找那个价格，找到这个价格， ok， 行，那这个价格呢？目前他这用的是 i， 对吧？用的是两个图标啊，那只不过我们这没有，咱们用的是按的这里边的啊，那这呢是有一个上下头的，我把拿过来这个上箭头，有一个包头，是一个下箭头，是吧？然后呢我们在下面需要给他做一个引入 啊，在介词部分引炮的这俩东西啊，那我们记得在之前那个公众的这个头，我们之前是引炮的过的啊，就这个地方啊，所以说呢，我们下边 gs 时候就引炮啊，然后把这两个呢都放到这，注意啊，一定是驼峰的，然后并且呢首字母一定要大写啊，千万记得啊，然后这呢就是一个包厢名 d o p t o m， ok， 把它们放到我们的 gs 部分。 好，那这样的话呢，这两个小图标呢，他就发出来了，这是我们的一个呃，字体图标。好，那下面呢，我们看一下我们的一个页面，好，在这呢就有这两个小箭头了。 ok， 行，下一步呢，我们就开始做这块的一个点击操作，点击综合，然后最新课程最多购买以及这个价格，是吧？好，那我们现在呢就跑到上面，哎，这块代码我往前调整一下， 好，跑到这行，那说白了就是你要点每一个，就要给每一个加实践，对不对？他们有不同的实验条件吗？好了，下面呢我就整体的加一下啊。来，我找到我已经写好的电话，然后给大家复制粘贴过去。呃，这有一个，哎，这地方的一个综合啊，这是一个实践。 好，这是综合的，然后再来，这是最新课程的最新课程。好，再来这呢有一个最多购买，每一个呢都是一个。呃，单独的 delete 啊，再往下有一个我们的价格，那也是这个 i 啊，也是 l i 啊， l i。 好，一二三四，没毛病，是吧？分别为来晚写写啊，这个和这个，以及它和这个啊。来，我们在下面呢写这个四个方法往下走。 首先呢是综合，那一旦制造页面啊，默认就是综合啊。然后其次是最多购买还是最新课程看一下啊？最新课程，然后再往下是最多购买和价格，复制一下最多购买和价格。 ok， 那就一项项的拿过来。好，我们写一下 cons。 好，下面都是一样的， ok， 加上。好，那不管点哪一个，呃，不管点哪一个，那么上来呢，他们都有一个这样的 class la， 对不对？比如说我点击了综合，或者说点击了价格也好，最多购买也好，他们都有一个 class lay， 那在这儿呢，我们就不用 class， 直接用 cell 吧，那我会定一个值啊，比如说我在最上边啊， 审美周期上面啊，或者说，呃，干脆直接在这。就是啊，价格啊，不应该，价格是综合最新课程这个最多购买和价格的一个 class， tension class 的一个样式。好，那我让他默认是一啊，默认 一，原理是说呢，一旦进入到我们页面综合，如果就是他，如果综合这块，他等于一，这个值，他等于一，那我给他加一个 s 类，对不对？或者说加一个 style 就行了。好，那到这我们就加个 style 吧。好，如果说他等于了一，那我们就应该给他加一个，否则就是空的。哎，过了啊，那这个颜色值呢？我就给他拿过来啊。 好，那这时候呢，我们来看一下吧，你看，一旦进入到这页面，我刷新一下，一旦进入到这页面，默认就综合嘛，对吧？好，然后呢，我点击他不断切换。那，那这节课程呢，我就让他是二至三至四和五嘛，所以说呢，我就可以把这个复制一下，然后到这啊，点击他就变成二啊，点击这个呢，就变成一个三，咱们先处理。呃，以上的三个是最简单的。 ok， 好，那我们往下走， 往下走，那如果说我点这个了啊，那么是不是让这个值，他的 v 六应该等于二，对不对？好，那点他的时候呢，肯定就是为一嘛，然后点这个呢，就为三就可以了。好，我拿这个一二三控制他，你看我点这个，点这个，点这个，对吧？他们就可以形成一个切换了。好，样式，切换一个问题了，下面呢，我们来做课程的一个筛选，那你不管怎么样，每一个都得调用一下这课程，对不对？调用下这课程好， 当然你可以把这个综合最多购买什么的挤到一个方法里边，但是呢那样的话呢就比较乱了，因为你还是要走判断的，所以说呢，单独的就每一个写一个方法啊，然后他们去筛选对应的课程，那么筛选课程呢？综合，那你刷新就是了啊，那最新课程是哪个字段呢？我们去看一下啊，找到我们这个呃项目里边，然后我们去找到对应的课程。稍等啊，咱们点击到这个 就这个 swift 的模图，然后再找下接口，然后咱看一下这个查询课程这块啊，然后它有一个啊这个类，然后我们找一下，呃，看看哪个最新课程啊？大家看这有购买的一个证序和道序啊，然后其次呢还有一个是时间排序，时间排序， 点击量排序好，也意思说是通过它来进切换的好，那这时候呢，我们就可以在最上边给他加一个这样的数据， 加一张数据，那如果说，呃这个数据因为我们要的是最新课程嘛，对不对？所以说它一定是等于那个最新的啊，然后我们把上面这个都给拿过来，这个是我们那个对象的 k， 是吧？那最新的是找一下啊时间的倒数 时间的证据啊，然后回到我们这个笔记里边啊，注意我们要的是最新的，而不要老的啊，也就是说他不用去做一个时间呃旧的和新的一个切换。好吧，那所以说我们这呢直接就去呃用一个就可以了，比如说这有一个呃 dsa， 对吧？咱用这个就可以了。好，来我们看一下啊，再自断一点。 呃，售价道序对吧？好，我们来看一下最新课程。那这个是最新的啊，可能说是今天发的，这是昨天的，是大后天的是吧。 e c a 就好了啊。综合，那综合是不是就应该没有这个筛选条件？有意思说我要让他呢为空啊，回到原来状态好点走，哎，回去。行，然后下面呢我们再来看最多购买，最多购买 那也是一个 d s c 啊，就这个子弹，我们看一下这个接口吧。呃，购买的证据，购买的道序啊，没问题。 好，哪些是购买最多的呢？这个好几呀？这好几百万人报名是吧？啊？当然有人就说了，哎。这有三百多的这有一百多的，那应该是三百多的钱啊。 这是后端去他后端的那个数据的问题啊，这和我们这显示没关系，可能后端呢是控制的某一个字段啊，那和这一个没有关系啊。怎么怎么理解这个事情呢？就是说，呃，他可能这个报名其实不是一个实际购买，就预览了，或者怎么着，所以说我们不用管这个。好吧，这是后端他们的产品问题，我们只要根据字段能把他呢对应的伸展出来就可以了，你可以看到明显的这是我们已经伸展后的， 你可以综合和增加购买，你看这个数据是有差别的吧。然后下面我们再看价格啊，再看价格，价格呢？是，呃，明显有商业线条，就是有高和低，就是正序和这个道序，说白了就是降序和升序，对不对？正序和降序这么一个排序。所以说呢我们要分辨出来啊，分辨出来，那怎么分辨呢？因为我们上面有一个这样的数据，他不是一二三四吗？啊？一二三吗？我们可以弄个四和五啊，所以说呢，在上边我们也是一样判断。呃，我们找到这个价格啊，好，把这个拿下来， 你看这个价格这两个字，它是不是需要有样式？你不管是升价格，升去降去，它都要有样式吧，对吧？好，然后呢，其次就是这个要加，这个要加。好，那我们就让它等于四和五就可以了。那上面这个呢？上面这个等于四，或者说它等于五是不是都亮了？哎，没错，好， 如果你现在肯定是不亮的啊，他不会这样的样式。好，那我们就到下边再做判断。那我们可以做什么样判断呢？如果说这家伙的白酒他等于四啊，等于四于他不为一个空，那当然你的不为空。哎，我们看看啊，我因为是刚才挡这非等于五就可以了，如果说你要判断空的话，那么一二三他也不亮，对不对？这还要判断一个不等于五 非等于五，那这个时候，好，我们来看一下，我点一下，哎，等会啊，我让它进行切换，那我就让它变为一个五， 是吧？然后这 air 四 if， 否则就是一个四，那这判断就是如果他等于五，好，这样就搞定了。来看啊，点击价格，哎，刷新一下 aj， 哎，怎么这儿呢？没有，如果它等于四或或啊， 好，你看是吧？这两件就可以了。那下面呢，我们就是无非判断一下他们的升序以及降序嘛。好，不管是升价格，升序和降序，我们都需要去请求这个课程接口。 好，那这块的一个功能就写完了，我们来看一下，搁这啊点一下走，哎，走，那就说了。哎，况且价格不对呀， 不管升去降去，这四百多，这这一分钱，这就是我，这不对啊，啊，还是还是一样的，是后端录入的问题啊，因为这些数据其实这个后端系统有很多学生在在做啊，所以说里边很多的数据可能不对 啊。就是，呃，我们有一个正常的售售卖价格和一个优惠价格，所以说呢，他显示不对，是一个数据上的问题啊，不是我们做的功能上的问题啊。行，那有关于我们的课程页的一个条件筛选，基本就全部搞定了。然后接下来呢，我们会做的内容呢，就是这个地方的一个登录啊，包括我们的一个课程的详情页啊和课程播放啊。 行，那么有关于这个课程页呢，我们就暂且说完了。好，那么这一课呢，我们就先说这么多。

好，接下来呢我们还是有组建相关的一些内容的，比如说有动态组建和一股组建。那这节课呢，我们就先把第一块搞定啊，就这个动态组建。那这呢先给大家讲一下动态组建可能在什么样的场景下呢？会用到，好吧，我们先登录到学习路线点私信这个网站啊，对了，说一下啊，就是咱这课程笔记是在这个这的啊，学习路线点私信这个网站，然后进去以后呢这有个下载资料，好吧，行，那我们就先说这个动态组件的功能了啊， 那我现在点击到这个简历这个板块进来以后呢，明显这呢是一个 type 切换，对吧？啊？那第一块呢是展示了三门课程，然后第二个呢会发现他和第一个布局就完全不同的，然后第三块和之前的布局就更不同了，对吧？然后第四块可能和第三啊，跟这个第一块是一样的，那我们就先不管这第四块了，好吧，我们就说这三块， 那这三块你要做的话呢，怎么去做呢？你可以把这个所有东西全部写到一个 view 这样的一个组件里边，是吧？全部写到这个文件里边没问题，但是呢如果说你项目比较大的话呢，肯定是比较难维护的啊，或者说呢，你后期呢这块改起来啊，或者说你的加载可能会慢很多，那这时候呢，我们可能要给他 进行一个单独的封装，是吧？我说的是开发环境啊，单独的封装哎，比如说这块封装一组件，这块封装一组件，这块呢封装一个组件，那么如果说按照第二种形式的话，我们可能在这呢要把 abc 这三个组件呢都引进来，那就是这块这块和这块是吧？然后上面呢就是一二三那个点击的，对吧？点击他，然后让某一个 它的，比如 v 杠衣服也好， v 杠数也好，为 force 处这样切换就可以了，那这样代码呢，显然不是特别好，所以说呢，在这块呢，我们就要说到这个动态总监了，然后大家下去呢，可以把这块内容呢读一读啊，我大致的要给大家说的就是他写起来呢是比较灵活的，或者说写起来呢不像之前这么容易啊，很方便 啊，并且呢就是呃，在于这个切换这块呢性能，你可以用 keep 啊等等这样一些东西给它包裹起来，进行一个提升。好了，下面呢我们就言归正传，来说一下动态组件这块的一个写法啊，那首先呢，我在这新建几个组件吧，比如说新建一个 b 点六吧，咱们就简单一点吧， b 点六， 嗯，然后这写这是 b 组件。好，然后保存一下，然后 a， 这呢我也改一下，这是 a 组件。行，我再创建一个 c 组件啊， c 点 view， 这是一个 c 组件。 ok， 三块内容都没有问题了啊，这个组件呢倒无所谓啊，就是这个子组件无所谓。好了，现在呢，我分别把这个 abc 这三个玩意啊三个组件全部给他做一个引入。 好，首先呢我肯定会有一个点击的过程，对吧？那我这呢就有一个微账号要去循环了，那我这呢先是定义一些数据啊，我这定一个叫 tfbes 吧，随便来了哈。然后这呢有一个你可以不写这 reaq 啊，或者说呢，你直接呃写上也行，是不写也行，这无所谓，我们写上吧， 毕竟希望它是一个响应的数据，是吧？好，然后这里边呢，我定一些对象，呃，内幕，呃，我这来一个 id 吧，算了， id 就不要了。内幕，我就来一个，呃，比如说叫准备好面试题，好往下走，嗯，然后这个准备好简历啊，然后我这儿加 a， 加个 b 的标识，加个 c， 这是准备好项目。好，那就是这么几大块了。 ok， 行，然后呢，我这呢需要去循环下这个数据啊，那我就来一个微钢 four， 等于，然后这儿有一个，因为没写 id， 所以说我这儿要写个 index， 另一个名称，然后这儿有个 k， 等于 index。 ok， 这儿呢，我就打印 item 的内容吧。好，那现在呢，在我们页面上呢，肯定会出现这么几个内容，当然布局我也不做了啊，就是点它呢，分别进行一个切换，是吧？这样 adc 呢？进行切换就可以了。当前我们要默认显示一个，对不对？默认显示 a。 好，我们这时候呢可以在这来一个，比如说 carry 吧， parent companies 或者 companies， 是吧？等于啊，然后我们这儿呢再给他写一个对象，嗯，我们这儿说啊，没有，没有问题啊，然后这儿呢，我就写成一个， 呃，这个名称就就跟那个保持一致吧，或者说呢，我们这儿写一个 swim 吧。好，然后呢，用的就是这个 a 组件啊，用的就是 a 组件。好，然后 呢，在这我就要去用的这 a 组件，是吧？那上来我要展示一个，那么这个动态组件呢？呃，其实呢，就是 com ponies 啊，就是这个内置组件啊，然后我们可以直接用他的 c m。 好，那这样的话呢，我们的 a 组件呢，就被引入进来了，当我点击的时候呢，要进行切换，对吧？那你这呢，可以弄一个实践， 我们就要称职吧，然后把这个 index 传过去，好，然后下面我们要写一下这个称职， 这呢有一个 i d x。 好，那这地方呢，我们要改变的就是这个值，是吧？等于好它的 i d x 得得谁呢？你这要切换，对吧？所以说我这呢，一开始就应该把这组件都给它加上啊， 这是 a a 组件，然后这 b 组件，这是 c 组件。好，然后你用的时候呢，这样呢，尽量去用它的下标零的 c m， 是吧？然后这个地方呢，放的 就是这个 som， ok， 那这样就没问题了，那相当于说点 b 点 c， 你看这样就切换了啊，所以说呢，动态组件其实就是，呃，这是一个内组件，对吧？ a 字，然后这啊是最主要的是切换你的数据，切换你的组件的，好吧，这样你组件的比较好理解哈，但是呢，在这呢，他就会出现一个警告，一个 worning 啊，我们可以看一下，详细一下吧， 点点点，每次点都会出现一个这样警告。好，这个警告大概意思是什么呢？就是你这个地方的一个数据啊，就是我们的这个 reactive 吧，它是一个 props 响应的一个数据，对不对？而你的组件是没必要响应的啊，所以说他这呢也给你做了一个提示，那我们该怎么办呢？我们应该要用到这个东西啊，把它包裹起来， 从而去提升它的性能，就是说这个组件别响应，是吧？绕过去它的 proper set 啊，你把它包裹起来就可以了，重新一下，那现在呢，就不会出现 word 那个警告了，然后你切换的时候呢，也是没有问题的，是吧，这样的话也是 ok 的，当然你也可以给它加一层 keep 啊，加一层 keep 好，把这呢给它包裹起来，扯紧。哎，那你看，这样切换是没有问题的 啊，所以说呢，你就完全可以采用这样的动态组件呢，去写你想要那个需求。好吧，然后呢，之前小伙伴问过一个问题啊，就是在六二中哎，不能这么写吧，是要有个复原数对不对啊？在六三中呢，是可以没有那个复原数的哈，你要记得。好，那这个是动态组件的整个内容，其实比较简单，就是你记得这个玩意得了。好，那我们把笔记呢也补充完整啊，就是我们这呢要进行一个切换，这是组件， 这个组件 ok， 然后呢，动态去切换它，去切换组件好了。那么有关于动态组件呢，我们就先说到这里。

我之前分享过一期关于 react 的自定义户口，那有不少粉丝表示想看一下 vo 三的自定义户口啊，我是第一次接触 voe 三，工作当中很少用 voe， 用的也一直都是二，我们来分析一下这个例子吧。首先这就是一个很不错 下拉菜单，然后呢，每一次请求一个用户信息的时候，都要去请求一个接口返回，这个用户到底是不是一个 vip 状态，但是已经请求过的话需要进行一个缓存。关于这个 vip 的状态，我是重新封装了另外一个自定义的户口，然后去使用优异，对于户口他没有一个前缀的这样的一个要求， 它就是一个普通的函数，这里边可以使用一些微有三的新增语法进行一些业务处理。这个主页面的逻辑其实不复杂，首先这里我们设定了一个数据列表，然后我们设计了一个锁引，这行代码非常关键，这个选中的用户 id 我们是要传给顾客，里边进行一个业务处理，但是里边要接 接收这个信息的改变，在这里我们必须用 r e、 f 进行一个响应，这样我们再去改它的 y 六的时候，里边就能接收到一个变化这一行。还有一个关键就是关于这个户口的返回值，这个 vip states 也要是一个响应的一个状态。我们看一下关于这个斯拉克特，这里我们直接把斯拉克特的 选中的这个值绑定给一个变量，我们需要监听这个变量的变化，当他变化的时候，我们去设置一下这个响应变量的值，然后这个响应变量的值被改变的时候，我们会去触发户口里边的，也就是这个值他会变在户口里边我们对他进行一个监听，因为我们最终返回的这个一字 vip 也是一个响应的变量，在这里当我们监听到他变化的时候，我们进行一些操作，我们直接改这个一组 vip 的值，我们的外边一对 vip states 就可以接收到他的改变，这个代码我已经上传到仓库了，想要的小伙伴直接去拉就行。

大家好，我是蒋编程的何老师，今天我们来讲一下如何安装。为把前端的开发环境学习，任何一门语言都需要先把开发环境安装好， 安装好开发环境，写出你的第一行代码并运行起来，你就成功一半了，然后不断增加代码，并随时运行代码，查看结果，就可以逐渐学会这门开发语言。 目前主流的前端开发框架是 voe 和 reactor， 今天我们演示的是 voe， 用的是目前最新的 voe 三的版本， voe 三的官网是 v 三点 cn 点 voegslrg， 可以在这上面查看最新的官方文档。 下面我们来讲解如何安装 vip 三的开发环境。首先我们需要安装开发用的编辑器， 可以用来做外保。前端开发的编辑器主要有维修斯六六扣的和 websome。 维修斯六六扣的简称维斯扣的是微软出品的，比较好用，而且免费。 websom 是杰特布瑞斯公司出品的， 这家公司非常厉害，为很多种开发语言都开发了便利器，都非常好用，但需要付费才能使用全部功能。今天我们演示用的是威斯扣的，因为免费而且比较清亮，现在微保全张开发大多数用的是威斯扣的。 现在我们打开浏览器来下载 vs 扣的安装包，打开必应点 com 搜索 vs 扣的下载， 搜索结构中第一个就是 官网的下载链接，点击进入，然后选择对应的操作系统的版本进行下载。我这里用的是温度式操系统，所以下载温度式安装包， 现在已经下载好了，打开安装包进行安装，基本上按照默认步骤安装即可，在这里不建议勾选这一项，不让他改变系统中文件的打开方式。 好，现在 miss code 已经安装好了， 接下来我们在 vice code 中安装 vue 的插件，点击 viscoe 的左侧的插件栏，在这里输入 vue volupt， 然后选择这个 voe vola extension pack， 这里面包含了十三个插件，我们可以把它全部安装进去，都是开发 voe 代码的时候可以用到的，点这里的 isol 进行安装。 安装的过程可能会有一些慢，因为这些插件需要从国外的网站上拉起。 我们可以开启一个贴纸工具来加快他的速度。后面我们的开发当中也会经常用到贴纸工具，贴纸工具可以去网上搜索一下， 有各种工具可以使用，有的是免费的，有的是需要付费的，付费的速度会快一些。好，已经安装好了，接下来我们安装 kit。 kit 是原 代码管理工具，今天这个视力中我们安装它的主要用处是为了得到一个拜师的命令行终端。 这个工具将来在开发代码时也会非常频繁的用到用来对代码进行拉取和迁入管理代码的版本。 get 的安装也非常简单，下载安装包进行安装即可。打开并点 com 搜索 get， 第一个结果就是官网的链接，点击进入，点击这里的下载， 然后点击对应的操作系统版本。我这里用的是 windows 操作系统，所以点 windows 进入，然后选择三十二位或者六十四位的安装包进行下载，可以 查看自己的操作系统来判断应该下载哪个版本。在开始菜单中点设置，然后点系统， 再点关于，在这里可以看到自己的操作系统是三十二位还是六十四位，我这里是六十四位，所以选择六十四位当中波进行下载。 已经下载好了，现在打开安装包进行安装， 这里选四，然后全部按默认选项安装即可。 好，按照好了，点击分离曲结束， 然后我们在 vice code 中配置默认终端，打开 macecode， 点击开始，在这边输入 vscode， 可以在 vs 扣的的图标上点右键固定到开始屏幕，这样方便下次找到他。固定到开始屏幕之后，下次点开始按钮就会出现在这里。打开 vs 扣的， 点击标题栏的中间这个图标， 点击这里的下箭头，选择 selective default profile， 然后这边选择第二个，这样就设置好了默认的终端。后面 在打开 vis 扣的时候，会在这个透明楼间里默认使用 get bias 的中单，这样会方便后面创建项目。

在 view 三中，自定义指令相比于 view 二发生了一些变化。 view 三中的自定义指令由一个包含类似组建生命周期钩子的对象来定义，简单的来说就是你可以在定义的指令对象中使用原来的页面生命周期函数。 官网提供了两种在组建内定义的方式，两种方式都比较简单，但是开发中往往需要自定义指令全局注册到应用层级， 所以下面来分享一下怎么独立封装自定义指令。首先在 utos 文件夹下创建一个存放指令的文件夹， directive directive， 下面则是存放需要定义的指令文件， 该文件用于创建指令以及编写操作逻辑代码。定义一个行餐，后面会在 men 点 j s 文件中传递一个 参数过来，然后就可以按照官网给的实力来写。比如定义 focus 指令是 v focus， 在所有组件中都可用，这是参数的具体含义和作用。 directive 文件夹下的 index 则是负责导入每个指令的文件，并且将它们一一导出。 接下来就可以在 main 点 j s 文件中进行全局挂载了。由于 directive 文件加下定义的是 index 文件路径可以省略 index， 调用 directive 时记得把 app 传过去。最后在组件中调用 页面有一个 input 标签，把 focus 指令加上，看效果。本期就到这吧，我们下期见。

what if i told you that this animation this one and even this one we're all made with just a single view directive well in this quick video we're gonna be taking you look at auto anime a zero config animation utility that adds really smooth transitions to your app it works with any jobs for the application， but it has great first party support for view so let's go ahead and install it and then we could install a globally in our view app to register directive called v auto animate we also have the options imported locally by importing v auto animate and this was helpful for me because the alarm view demo site runs on astro， so i don't have a global view instance， but no matter how we set it up it's really easy to animate things so what exactly can be animated essentially auto animate is a function it accepts a parent element and then triggers animation on the parent end it to media children on three different events when a child element gets added to the dom removed from the dom or moved in the dom， so let's say that we want to have a collab section with a heading and a details paragraph and clicking it will toggle the visibility of this paragraph the element changing is our paragraph and its parent is our rapidive so if we add v auto animate to the rapidive we already have a really nice effect if you've tried to build this in css and or javascript you know how messy you can get when dealing with animating heights， but v auto animate covers all of that out of the box if you don't want to globally install a directive it also has a composable usage so let's import use auto animate and when we call it it returns a template ref that we combine onto our wrapper element and we still get the same animation effect although the primary use case for auto animate is to give you smooth animations out of the box there's still a few ways to customize it like specifying some options on the directive or if you want full customization you can do this through pug ends which kind of serve as an escape patch if you want to override what's happening by default really wanted to get this on your radar？ i think it's super smooth to use and honestly works a lot better than i expected for a drop in utility and if you like the d x of auto animate the same dove team is also creating form kit which was previously view formulae it's a pretty sick way to make view three form so i thought i throw it out there if you're interested oh and one more thing if you like quick。

animations are a great way to make your web app come alive and feel more interesting to visit in a common place where we see animations is when scrolling down a website elements get animated as we scroll down our page and one of the easiest waste implement this is using view users motion library which uses pop motion to give us easy animation directives and composables so this is a quick look at what we're gonna be building and let's go ahead and get right into it so the first thing we want to do is inside of our view 3 app install at viewu slash motion then we can add support for v motion globally by going to our main js importing motion plugin and saying app dot use motion plugin and now we're ready to go ahead and start using it so there are a few different ways we can create animations we can use one of v motions powerful presets we can write custom animations with directives or we can use a composable and declare animations in our script so first let's start off with some of the presets inside app dot view let's clear out our script and template and inside of our template let's just create a div with a class of target and some text then as a quick example let's go to our styles， let's add a width height margin， center， artives content and a background color to our target class just to give it some styles and since we're using some of you use motions presets we can head over to the documentation and see a ton of different options and the one that i'm going to use is v motion slide visible once right which will slide our element in from the right the first time that becomes visible in the viewport if we run our app and look at our browser as soon as our page load， we'll see that we're getting that slide transition because it's already visible and if we go ahead and copy and paste this component so that we have another instance of it as we scroll down we'll see that our second component will only animate once， we reach it in the viewport and for a lot of use cases these presets give you more than enough to add that transition effect into your app， but if these presets don't offer exactly what we wanted we have two different options and the first one is declaring our animation directly inside of our template， so let's create another div with a class of target and add the directive v motion onto it once， we put this on an element the v motion allows us to write our animations as props on this element and the supported props are initial， which is the initial state of our component enter， which is the entered state， which uses the intersection observer api to detect every time our component becomes visible visible once， which only runs the first time it becomes visible over focused and tapped so these are the different style states that our component can have so ours we want to use initial invisible once， so we'll bind these to an object contain style properties and transform properties so let's say we want our opacity to be zero and our y value to be a hundred then the first time it becomes visible， so visible once， we want to set our opacity to one and our y to zero， so， that we will fade in and move up now if we reload our app we still have our first two elements and our third one will slide in from the bottom and also fade in at the same time another way that we can use this library is by using a composable called use motion so we can import that in our script and let's also import ref from view we'll say cons to target l equals ref and then inside of our template let's create another div with a class of target with a ref of target l and this is going to be the element that we're going to transition using our use motion composable finally inside a script setup we can say use motion and pass it to argument the first one is our template ref so target and the second one is a javascript object which has similar properties to the props that we just passed we can set initial and visible once and the values of these are the same that they would be in the directive now if we refresh our page as we scroll down we can see all of our elements smoothly animating in we're actually using three different ways to achieve this i'm curious to know which one's your favorite obviously the presets are super powerful， but it's also nice that it's easy to customize so we can get exactly the looking feel that were after， but i just wanted to share this library with you because i found it。

哈喽，各位观众朋友们大家好，今天我们来学习维三的第十八章义不组建代码分包以及撒斯判死。那撒斯判死跟胎力泡车是一样的，都属于维三新增的一个内置足劲， 只不过嫂子判死呢，目前处于这个实验性阶段，未来呢可能会有些变动，但是变动呢不会很大，所以说大家使用的时候呢，一定要注意一下，那这个异部组建呢，一般应用场景是什么呢？那我们来看一下这个 alemluy 提供的一个案例， 其实这个东西呢可以配合我们这个股价品，可以做一些小东西，我们来看一下，那就是我们有这个数据请求，那请求之前呢，我们可以先给他展示一个股价品， 然后数据请求完成呢，再渲染我们这个真实的一个数据，那这样用户体验呢就会非常非常好。那今天的话，我们就来写一个股价平的一个案例，配合一部组， ok， 然后我是提前把这个布局呢，已经是给大家做好了，就是这个 sink 点 vivo， 然后他大概是长这样子，那主要是节约这个大家时间，因为 css 大家肯定也是会写的，就是一个卡片，然后呢是有一个头像，这， 然后下面是有一堆描述，这，这有一堆描述，然后还有一个名字啊，年龄啊，大概就是长这样子的一个呃卡片，然后把这个骨架屏呢也是做好了，就这个 skyline view， 然后就跟这个 animus 其实是一样的，大概就是长这种东西， ok， 那我还把这个数据呢也是准备好了，在这个对待人阶层是放到这个帕布里下面，因为放到这个帕布里下面呢是不会被编译的。其次的话就是可以直接去访问到，然后我们定义了一个对象，然后对象里面有这个内属性以及 a 制，还有这个头像， 还有这个描述，那我们可以来实验一下啊，就是通过杠等于它是结算对，它是可以直接去访问到的，所以说我们就把它放到这个趴窝里下面， ok， 然后我们再写一个这个封装一个请求吧，就一个 xo 啊，或者大家直接引入一下这个 f 也可以，然后我们就来带大家去封装一下这个原声啊耐克斯吧，然后我们可以通过 export const 这个 xo， 他是一个对象啊，然后我们请求这个数据使用 get 请求就好了。 ok， 然后我们会接收一个 usl， 他是一个真类型，然后呢他还可以接收一个范型，然后呢我们来通过这个 promise 给他包装一下哈，就是你有一个 pro miss 这个，然后 pro miss 呢？还有两个回调，然后一个是这个 resort 和一个 rejects， 那瑞金的话我们就先不写了，然后我们就直接用这个瑞造就好了，然后呢我们再封装这个原声阿卡克斯，我们来一个 constantxhr， 就等于你有一个叉 mlhttp request， 然后通过 xhr 点 open 呃，去第一个是这个请求的方式，是一个 get 请求，然后第二个的话就是这个 u r l 请求的一个地址，然后他还提供一个方法，通过 xxr 点 on reidsc 的称职， 那这个毁掉里边呢？他就是根据那些状态去做一个判断的，那比如说这个 release state， 就是通过 x h 昂点 release state 等于等于一个四， 呃，他是一共有五个状态，零一二三四，那最后一个就是这个完成了，还有是这个 xhr 点 stouse 啊，不是这个 啊，这个等于二百，说明我们这个数据呢，返回是一个正常的，然后我们就可以读到这个接生里面这个信息了啊，他返回的是一个，他返回的是一个文本类型，我们需要通过接生点 pass 把他转换成这个接生对象， 对，因为他返回的文字我们是没有办法用的，然后他返回的是 response tax 的，然后如果那么有传送的信息呢？可以通过送的去给这个后台去发送一些东西，由于我们请求这个接送文件没有任何东西可以发，所以说直接传一个闹就好了。 ok， 然后我们再做一下这个延迟吧，通过三胎帽子给大家模拟一下这个 e， 不然请求太快看不出来这个效果了。然后这的话我们变成两秒钟，然后再通过这个 zoe 做一个返回就好了。 ok， 也是非常简单啊啊，大家如果不会去不会写这个原声，阿贾克斯的话可以写 一个一个 xo 也是可以的。通过 npm miss 到去装一个 xo 去引路一下，其实是一样的，然后我们返回的是一个 pro miss， 然后他的发型就是我们这个 t。 ok， 然后我们这个 xo 呢就已经封装完成了，封装完成之后，我们在这个 sitterview 来给他引路一下， 就是艾特下面的这个 solar， 然后下面的这个 exo， 然后这是他是一个对象，也是一个 x， 那如何把这个组建变成一个亿，不组建我们可以使用这个语法里面新增的这个顶层 ov 的技术，就是直接可以使用 ov 的， 这个东西一般不是配合这个声音可使用吗？在 es 七之后呢，是可以直接使用这个底层 lv 的技术，它下面所有的代码都会变成一个异步的， 然后我们就通过 excel 点 get， 然后去访问一下点杠这个 data detect， ok， 然后这儿的话可以接受一个范形，我们刚才定义了，然后这个范形我们可以定一个樱桃儿 face， 就是一个 det， 然后他会返回一个 get 对象，我们再来看一下这个 jcs d 的对象，有内 aa 制、 u i l， 还有这个 dsc， ok， 就是一个得的对象，然后 name 呢？它是一个 string， a 制是个 number， 还有一个 uyl 也是一个 string， 还有一个 dsc 也是一个 string， ok， 然后把这个发型传给这个盖子里面就好了，然后接收一下这个纸啊，它里面会多一层这个 data， 然后我们直接给它解构出来吧，对方便一点啊， 这的话就是这个 data， 然后把这个数据呢给它展示到这个页面上，然后这个头像冒号 src 就等于这个 data， 这是 url， ok， 然后这个的话我们放一下这个名字，就是 data 点内，然后下面的话我们就放一个年龄，这就是 a 制，然后最后最下面这个放一个得他点 dsc， 也就是这个描述， ok， 那么这个数据呢？就已经填充上了，那这个组建呢？他就会做成这个义务组建，因为我们使用了这个 顶层额为他技术，然后我们在这个 app 者 vivo 呢，就把这个组建给他引路一下，然后我们叫什么 const， 也叫 singkwheel 吧。啊？引路的时候一定要使用这个 define 和 singhcompotent 的，是用这个函数去做一个引路，因为它是一个易部组件。那这个函数呢？他有两种 书写风格，我们先来展示第一种，第一种的话就是直接传一个回掉函数，就是一个箭头函数，然后呢通过箭头函数再使用这个引炮的函数模式，注意是引炮的函数模式，不是上面这种。上面这种引 potfrom 形式呢，只能写在最顶层。这个引炮的函数模式呢是可以写在代码逻辑里边的。 然后我们再请求一下这个路径啊，就是这个 compotents， 然后下面的这个 sinke dev。 啊，这个就是一个意步组建，然后怎么把这个组建去给他展示出来了？注意要展示意步组建必须使用这个撒次判死， 就是我们这个 v 三新增的这个类似主劲撒子判死，然后撒子判死，他会提供两个叉槽，那个弹力弹破力，对，他会有 两个叉烧，我们再把这个摊牌再粘一个，那第一个叉烧就是一个 defaut， defaut 是什么？就是我们要就是这个展示的这个组建，就是这个 sink 点 view。 那第二个叉烧是干什么？是一个非要贝壳，那非要贝壳他是干什么？就是比如说我们刚才延迟两秒钟， 对，我们延迟两秒钟，就是在加载的时候，你可以在这个非要贝壳里面去做点什么，我们就可以把骨架屏给它放进去，显示一个加载的一个效果，哎，非常好，就是这个 scalent 点儿 view， 那给它塞进去就好了，那这个组件我们不是一步登，所以说我们就可以使用这种方式去做一个引入。 ok， 那我们再来看一下这个页面效果，哎，发现我们这个股价平呢就已经展示出来了，两秒钟之后呢，选择我们这个真实数据，那这个的话就是一个一 部组建的一个基本场景啊，我们再来看一下啊，一点问题都没有。 ok， 然后我们再来演示一下他的第二种书写风格，就是他呢可以接收一个对象，那这样子，然后他里面属性是非常多的，我记得有个 漏的 compulson 啊，这样子，还有一个什么 ilocompulson 的，就是加载失败的一个组件，还有什么 tamlot 超时时间。 不过这这个方式我们可能用的比较少一点，我们一般还是使用这个箭头函数直接去返回，这个总结用的比较多一点，所以说大家只要记住他有两种输液风格就可以了。 ok， 这样的话我们还是使用这种方式 好的，也是没有一点问题啊。然后我们再来演示一下这个代码分包，就是凡是通过这个引炮的函数模式所引入的东西，他都会做一个代。 先把拆解，我们先先注掉，我们先注掉，先看一下， 对，我们先住的我们先不移，然后我们先给他进行一次打包，我们先来看一下 这个会涉及到这个性能优化，面试的时候也是经常会问，我们先打包一下看看啊，通过 npm 装 b 的就可以了， 他会打出一个迪斯特包来，我们找一下啊，稍等一下，他应该还没打完。 ok， 他已经打完了，就是迪斯特包里边，那他默认呢会把所有东西都放到一个杰斯里边， 然后我们先把这个组件，我们可以把它变成这个同步的啊，我们再重新引入一下啊，就是这个新客 vivo 啊，注意我们现在是使用的这个同步方式，去给他做一个引入， 然后在页面上给他渲染一下啊。 ok， 然后呢我们再给他进行一次打包 来，发现他还是只有一个职业字，那如果这一个职业字比如说很大，那你打完包可能出来 五兆或者是十兆左右，那这也是首次加载的时候，那摆平的时间呢，就非常非常的长， 所以说这时候呢，我们可以使用这个异步逐渐去把那些没有用到的包呢先给他拆出来，就是比如说我们这个组件呢，可能在后面的页面中呢才会使用，我们就不要把它打到这个主包里面去了，我们就可以使用这种方式，我们再来使用这个异步阻键方式来给他演示一下， 然后我们就把上面这个给他解开啊。 ok， 然后我们再 来给他打个包，通过 npm 装 beauty。 哎，此时你就会发现发现这个信科威武这个 gs 呢已经被单独拆出来了，所以说他只会等用到这个 gs 的时候呢，才会去做一个加载，他就不会 都去放到这个主播里面了，所以说我们这个主播呢，他就会变得比较小，那手屏呢就加的的快一点，所以说可以使用异步组建技术去优化我们这个项目。 ok， 那以上的话就是所有的知识。

嗯，先欢迎大家一波，在我们的直播开始前呢，我先哎就是欢迎一下大家啊，来到我们的直播间，这里是朝夕教育，我是芳芳。那我们今天聊什么？ 在我们前两天的直播课程中呢，是跟大家聊到了应该说 view 里面比较经典的功能啊，像什么无限极啊，对不对？哎，包括像面包蟹啊，哎，对，先导航啊。前段时间呢，我们跟大家聊到了文件的上传呀，多文件，单文件，大文件，包括权限管理呀， 其实一套项目实战中，如果啊把我们刚说到的这些都连贯起来，那么哎作为一套完整的项目呢，他就可以满足了。所以我们今天也同样想跟大家聊一聊，在我们的哎，很多大型企业项目实战中，国际化他的一些运用啊，因为国际 话呢，是现阶段开发的项目中，也可以理解为是一个必备功能，对不对？比如说中文，英文哎，或者其他一些啊，国家语言的切换，那我们今天呢也来跟大家就着这一块呢，详细的说一说，让大家把这种多语言切换，也就是我们提到的国际化，哎，把它弄明白。 那今天的核心重点呢，会跟大家从以下几个方面啊，首先呢是我们要进行这个 i 幺八 n 的安装，包括配置，包括我们在项目里面具体去用，那我也会跟大家那个聊一聊，比如说我们中文英文 啊，这个繁体，包括哎，你要当然要切换其他国家语言都可以的啊，这个语言的一些切换好，这些呢都是我们在今天的直播中呢，将会给大家那个涉及到的相关知识点。我在聊到国际化以前呀，先给大家从我们的这个文档 啊，简单的说一说啊，由于要给大家用到的是 i 幺八 n， 那有一部分小伙伴就不明白啊，你说为什么咱们这个名字啊，要称为叫这个 i 幺八 n 呢？ i 幺八 n 呢，其实是我们的这个英文单词啊，哎，大家可以看到啊，这个英文单词，它的首末字母 i 和 n 同样呢，中间包含了有十八位，哎，这个中间字符，所以我们简称呢，就是刚才给大家提到的 ii， 中间有十八位，后面是 n， 所以它的来源是这样的， 那我们刚才看到的这一串哎，这样一一那个一长串的字母，它代表的是什么呢？它代表的是国际化，所以国际化为什么叫 i 幺八 n 呢？希望大家能够明白。那么国际化为什么在我们现阶段开发的很多大型那个项目中呢？非常重要啊，其中有一个非常非常那个关键的点，因为我们开发的项目啊，你不可能说仅仅只是比如中文或者英文， 那我们希望他能够走向更多其他的一些啊，用户对不对？使用率呢，会变得越来越普及，这个时候我们要考虑到啊，世界的各个角落呢都能用，所以说国际化呢也是非常重要的一部分。那有一些小伙伴会误以为国际化呀，他的实现是一个 哎，比如说自动的过程，甚至于我在跟他今天啊聊到就是我们要去讲这个国际化的时候，有一位同学还跟我留言说啊，国际化我们还需要自己去实现吗？那国际化不应该是你当前 能进入，比如说你这个浏览的过程中，他会出现一个是否需要翻译或是否需要干嘛浏览器的一个默认行为吗？那我们还需要对他进行啊，这个处理或者说需要对他进行翻译吗？是的，我们是需要的，所以我们要通过这个 i 幺八 n 呢来进行。 那这个翻页的处理是由前端来做呢？还是由后端？或者说，哎，那个前后都要去做啊，当然这一块呢，我们重点啊是在前端啊，前端给大家去完成。 好，所以接下来呢，我也给大家拆分为了一二三四五五个部分，我们来分别聊一聊这个 i 幺八 n， 他呢具体应该怎么去做 i 呀吧，那个 i 幺八 n 呢？首先我们要明白的是，他是在我们的 view 里面有一个 view 杠 i 幺八 n， 哎，我们需要把这个三方库呢先安装进来， 所以我们的第一步啊，大家一定要记得。我们当前的第一步呢，先安装好这个安装啊，我简单问一下有没有小伙伴针对这块有什么疑惑的，安装的话大家是否都理解？嗯， 好，刚才像我们呆瓜同学安装的话，有没有小伙伴针对这块有问题的？哎，躺在怀里，同学啊，现在是进入到我们直播间，哎呦，欢迎你的加入啊。好，那我问一下大家刚才提到我们的这个，哎幺八 n， 嗯，安，那个安装，有没有同学针对安装不太了解的？安装都明白的，咱们就六六六来一波可以不？嗯，像刚才回复我的漫天星辰喽，哎，还有我们一些其他的小伙伴 好，安装这个应该都没有问题。那有，同时我要是没有安装或者安装了，我们在哪个地方可以看到呢？好，我来给大家看一下，在我们的这个 pike 的节省里面呢，是可以看到的，你看我跟他安装啊，不过我安装 的版本呢，应该不是现在最新的啊，在给他安装的过程中，我的这个版本呢是九点二点二的一个版本啊，有些小伙伴你们可以按刚才啊说到的方式呢安装一下，安装完了以后呢，同时也可以看一看你安装的这个具体的一个版本啊，哎，你们现在安装的版本是多少哎，对，如果有些小伙伴 现在是那个最新安装的话，你们可以装一次，装完了以后看一下你的版本，像漫天星辰，还有我们立明同学。对，你们可以安装一下啊， 版本呢，如果你指定，比如说我指定他的版本是九点几几几，那我们的版本就是他，如果你没有去指定版本，那咱们的版本呢就是最新的版本，对不对？好， ok， 刚才给大家提到这块呢，这个一定要记得啊，我们在里面呢啊，先要把它呀安装进来， 那如果我们要是已经安装成功了之后，接下来我在里面要进行什么样的处理呢？下一步呢就是我们具体的配 制啊，我们要在里面去配配，我们要配什么是不是？好，我们首先在进行相关这个配置的时候，有一点呢，我们需要弄明白，因为这个配置它究竟在哪个地方去配，我们怎么样去配 啊？安装，由于前面我已经给他安装过，所以我们来跟大家重点聊一聊如何进行相关的这个配置。好， 进入到我们的 src， 由于我要去配置这个 i 幺八 n， 所以我决定在里面呢先添加一个文件夹啊，好，名字我跟大家都写进来啊，幺八 n， 那我直接就跟大家这样写了。 好，把这个 i 幺八 n 添加之后，这个位置呢，小伙伴们一定要先看明白啊，他家的位置，然后我在里面呢给大家添加了一个啊，好，咱们就直接写一个 index 点 js 啊，这个当然随你，你说你要换其他的名字， 那，那肯定是可行的，对不对？好， ok， 那我在刚才给大家呢创建了我们的 i 幺八 n 文件夹，添加了这个 index 点 g s 以后，我们首先先要明白一下在它里面具体要去配什么，来我们来看一看啊， 好，当前进入进来以后，那个不是把这个文件已经给大家创建了吗？那么我们进来啊看一下呢，它里面具体的一个配置信息， 配置信息里面呢，我们要分为以下几步，第一步呢是先把它导入进来，第二步啊，就是我们在里面哎，相当于创建这个 i 幺八 n 的过程中传入以下三个参数，看明白没？我们在里面呢要传入一二三三个参数， 那这三个参数呢，它分别代表的是什么？好，我们先把这块呢来跟大家先那个写进来再说啊，好，这个位置呢，我还是哎给大家那个复制粘贴 一份啊，我们一会呢把它添加它呢，代表的意思就是先那个导入进来吗？导入进来了以后，我们刚才不在里面，那个给大家定义了一个 i 幺八 n i， 这个呢相当于是我们的对象，这个对象呢，我们通过哎这个 crit i 幺八 n 呢去创建， 你在创建的过程中，我们里面呢是一个对象，看明白没？它里面这个时候是一个对象，那在我们的对象里面，它包含了以下几个参数啊，这个位置一定要记得，第一个呢是什么 lexie a l e 啊，这个 g a c y 啊， let's see， 这个的作用是用来干什么的？那么它里面包含的值呢？是一个布尔值，这个大家要记住了哎，它是一个你在里面可以写入为真或者为假，一般默认情况下呢，我们的这个 liksin 呢，它是为真的 状态，但是呢，在我们的 vivo 三年级的项目中呢，我们建议呢是把它变更为为 first。 那有一些小伙伴就不理解说为什么这个地方默认，呃，就是我们要改变他的默认值啊， 他呢作用是用来干什么的？是用来哎，我们的处理报错，嗯，报什么样的这个错误信息呢？ 啊？好，我跟大家这样去说啊，啊，可以这样去理解，因为在啊，比如我们当前吧，也就说 vivo 二和那个 vivo 三， vivo 二和 vivo 三，大家知道了一个我们叫什么选项式，也就是 a person api， 还有一个那个组合式，对不对啊？ company 型 api， 那么选项是 api 和我们组合式 api， 由于你当前这块呢啊， vivo 三他默认使用的是咱们的这个 哎，就是刚才给大家提到的组合是 a p i 吗？对不对？那么我们需要把它定义为为 first， 如果你没有定义的话，他会报那个错误信息，就是在我们的传统模式下呢，他是不可以使用的。所以有些小伙伴 你要是看到这样一个报错说在传统模式下不可用，那代表我们这个呢要变更为 refers， 哎，所以这个呢，大家要记住啊。好，这个也就说你现在要是没有看到，比如说我们当前在使用的过程中啊，你要是版本为那个二年级或者说三年级这块，我们要把它变更为处根 force， 有一些可能啊，没有太那么，哎，常见的 bug 出现或者报错出现的时候，大家知道了啊，这个呢我们需要把它变更一下。好，第二个呢，我们在里面还要给大家设置什么第二个呢？我们里面有一个哎 lok， 它的那个 作用是用来干什么？也就是说你默认，也就是我这个时候当前我们默认的语言是不是。那这个默认语言呢？我们在里面一般情况下会给大家分为有以下几个啊，比如说我现在要设置的是矮中文， 你在里面如果设置 z h， 那么代表的就是中文，那如果我要设置为 e n， 那代表的就是英文，哎，都是我们中英文的，这个相当于缩写啊， 所以在里面你要先把这个默认的呢先添加进来。好，我在里面呢我默认情况下呢给大家来了一个尾尾中文。好，我们把这个呢先给大家写好， 那写完了以后我们在里面还要写什么呢？第三个就是我们的这个语言包，哎，这个呢就非常重要了啊，来给大家把这块写一写。什么叫语言包啊？我们为什么 要在里面定义相关的这个语言包呢？因为国际化，它本质上呢是我们啊自己一步一步一个一个单词一个一个句子去翻译的， 没有说浏览器帮我们自动去解决这个呢，国际化，不是的，所以你变更为中文，那么我们就需要有中文语言包，你要翻译有英文，那咱们需要英文语言包，如果还有其他的一些国家的语言，那么我们还要对应的其他国家语言的这个语言包， 所以语言包它里面就包含了我们相当于刚才给大家提到的各个不同的这个翻译文件， 一般情况下呢，我们会在里面去直接的包含。好，所以这个语言包呢，我在里面跟大家写一个啊，那么我们直接的写一个什么？哎，这个 mercy， 那这个 mercy 里面它会包含什么？好，我在上面呢也 跟大家写进来啊，这把我们刚才给大家添加的这个 merst 技能先添加它里面呢，由于我们最开始默认的是，比如说啊中文对不对？好，完了以后呢英文， 那这个中文和英文这两个文件咱们需要导入进来吗？他肯定是需要导入的，你要不导入，我直接这样写，他会报错，所以我还需要在里面呢去单独的引入，比如中文的这个圆包， 那既然我们要添加相关的语言包，所以你看我刚才在给大家写到这块的时候啊，我决定在里面呢先跟大家添加一个语言包进来。好，所以我再一次强调一下，我们要实现国际化 里面的翻译的具体文件，那是需要我们自己呢手动一个一个添加的。好，我先跟大 把这个聊了以后呢，我们再来详细的说啊，它里面的具体包含了什么？好，你看我现在里面是不是跟大家已经写好了我们的这个圆包，那么圆包里面我们先简单一点啊，直接给大家添加，第一个呢是我们的哎，中文圆包， 哎，具体这个呢也一样的写到是 gs 啊，好，你看我当前是不是给大家已经写好了？好第二个呢，我在里面再添加啊这个英文，那如果你还要添加其他一些国家的这个语言，我们也同样的方式呢，在里面进行追加， 语言包一旦写进来了以后，我们在里面是不是就可以寻找到了？你看刚才给大家添加的语言，好语言里面我们要寻找到的，比如说中文呀，英文呀，对不对？好，把这几个呢给大家添加进来， 那么添加完了以后，我们接着在里面针对于这个国际化，他还要进行一些什么样的处理呢？来，我先把这块给大家先说完啊。 首先在我们刚才给大家写到的 i 幺八 n 文件中，我们需要的是把我们的这个创建 i 幺八 n 呢这样一个，那相当于方体一个对象呢也入进来，那么在我们的对象中呢，它是需要传入一二三三个参数 啊，参数呢核心重点就是我们刚提到的这个语言包，把这些都写完了以后，那么语言包里面啊，他具体又涵盖什么？也就是说以后大家如果再看到你看像我们进行相关这种语言切换的时候，我来给大家先看一下啊，你看我们当前的效果图 啊，在里面呢有一个中文完了以后呢有一个英文，那当我的中英文在不断切换的过程中，我们的这个内容他会随着你的中英文的变化而去变化，比如我现在选中 文爱他的内容，你看全都变更为中文，你要选英文，那这个时候我们看到的这些内容都会变更为英文。那有些小伙伴就会问，你说，我们的中英文在进行相关切换的过程中，哪些是需要我们前端来添加语言包的？哪些咱们添加不了啊？嗯，有没有同学考虑过这样一个问题， 为什么我在翻译的过程中，表格里面的这个数据他没有去翻译呢？啊？你看他翻译了没有？我们写到的张三李四这个数据呢？他并没有进行相关翻译。为什么？ 记住了？因为我们实现相关国际化针对的是静态的一些数据，如果是动态，什么叫动态？服务端返回对不对？当服务端返回这个数据，这个数据他不是有我们前端可控的，那我哪知道用 写的是什么？我哪知道当前返回的是什么？所以说这个像动态数据的处理呢，我们是需要呢后端来完成的。所以国际化其实除了我们前端以外呀， 服务端呢，他也是需要进行。好，我刚才给大家看到这块相关的效果图呢，我们已经看到了，那么看到以后我们就来给大家呢，把这个啊，比如说圆包设计到的格式哎等等给大家呢，先写入进来。好，我们先回过头来啊， 好，我刚才在里面创建的过程中，进入到我们的这个圆包圆包里面呢。啊，大家在定义的过程中一定一定要记得啊， 因为我们定义相关语言包的时候一定要有规律，什么样的规律呢？就中英文他的位置，他的键的名字是一定要一样，你要不一样的话，那到时候咱们在里面导 的过程中，爱很难得去寻找是不是？好，首先我们在里面呢需要给大家添加的是一个爱大的对象，那么这个大的对象里面，好，我就跟大家都添加了一个这个 mercy 级啊， mercy 级里面呢又一个对象， 比如我这个时候要在里面添加的是什么？咱们随便来跟大家写一个。好，假设我现在要跟大家写到的是我们的这个 i 登录， 好，我继续再往后面跟大家多写几个啊，完了以后我还要在里面写到的是啊，好， user i 这个 name 啊，比如说我们的这个用户名，好，我把这几个呢先给大家这个都那个添加进来， 那当我在里面写入了啊，也就是说你这个时候在你我们的这个对象里面写入了这个之后，大家一定要记得我们还要对他进行什么样的处理，一定一定要对他进行的是什么？哎，导出，因为你不导出， 我们在别的地方呢，是没有办法呀导入进来的，所以语言包里面他会把你要翻译的所有内容全都写进来， 你在里面翻译了这个 looking， 那么我们到时候中文他就显示的是登录啊，如果是英文或者别的语言，他就会显示其他啊，我在里面写到了 username， 那如果你当前要是调用我们中文语言包，那么他的内容就是用户名，哎，你要调用的是我们的英文语言包，那这个时候可能就是其他的明白没？好，我刚才给大家在说到这块的时候，中文包啊，咱们已经添加好，那接下来呢，我来给大家呢添加一下我们的这个，哎，英文包， 那英文包里面他这个时候又应该怎么样去写内容？其实都是一模一样，当然这个右边呢，就是你具体翻译啊，好，我图方便，我就跟大家都写 是一样的啊，哎， use the name， 好，等等，那也就是说当我们前面写到的这个，哎，他会匹配你具体的内容，所以 实际我们的国际化，他的这个处理呢，是需要靠我们前端自己在语言包里面添加翻译的， 你到时候模块比较的多，内容比较丰富，那么我们的语言包呢，他也会随着这个变化呢而去变化，对不对？好，行，刚才给大家说到这块这个思路呢，你们已经清晰了，没来清晰的小伙伴可以先给我回复一下， 我刚才聊到这块啊，如果这个思路已经清晰的小伙伴呢，可以给我来波六六六，按一下刚才回复我的漫天星辰，利民同学好，还有我们其他小伙伴啊，像经常关注我们的，想不出更好的名字呀，同学，嗯，好，时间降，同学啊，你的回复呢，我已经 get 到了，非常棒，好，还有我们 这个大海同学啊，漫天星辰同学说，感觉像那个字典，那个词，对不对？是的啊，呃，那个字典的值，对的，实际上他在这一方呢，就添加了一个我们能够解析的名字，对不对？所以你像有些同学会说啊，这个国际化呢，是默认的或自动，不是的， 我们的项目中当添加了国际化之后，其实很多地方呢，会变得复杂的很，哎，复杂多了，因为你要考虑到他的数据来源， 包括我们还要对他进行更多的这个内部内容的一些翻译，对不对？都需要我们自己呢手动去完成。好，包括我们风雨啊 sw 同学你的回复呢？我都已经 get 到，那既然大家听课没有任何影响，我就继续呢跟大家往后面去练。