vue2动态加载方法

然后上一节课呢，咱们在这里啊导入了一个 logo 的图片啊，然后呢，我把这个图片把设置给了咱们这个盒子啊啊，设置给咱们这个图片啊啊，作为他的 s 二 c 属性，我们希望能够把 加载过来这个 logo 图片来展示到咱们这个你妹子标签里面啊，给用户呈现出来啊，那当前呢，咱们在这里写完这两行代码以后啊，发现中标里面就包错了，哎，为什么呢？因为很明显啊，然后派克在进行处理的时候，发现这个文件的后证明是点 狗屁 g 啊，他们是处理不了的，是不是还要找对象 loder 啊？哎，要，那要找什么 low d 啊？咱们需要呃去配置一下 url 刚 loder 啊，以及一个 fil 刚 loder。 那么其中呢，这个翻压缸漏点，他也是一个内置依赖相。大家发现啊，在底下这里配置的时候 有指定这个非要杠 lod 吗？哎，没有，那我们只是指定了 ul 杠杠的啊。就是，那咱们这个这个包是必须要装的哎，但是装上以后呢，不需要在这里手中去声明他啊，他内部就是 ul 杠 lodo， 在内部呢，会自动去找这个包去使用到他 这是一个内置依赖相。好，那接下来呢，咱们就在相中来安装这两个楼的， 并且呢去添加一个对应的匹配规则啊，这次呢，咱们要匹配图片类型的文件，那于是啊，我们在这里需要用 test 来指定这么一个正词格啊，咱们匹配的是点呃， gpg 出现代表或者对不对啊，或者是 png 或者是 gm 这种图片啊， 如果有其他号令人的图片，大家有需要的话，也可以在后面继续再加受限啊，继续往后货就完事了啊。当前呢，咱们就只匹配这三种最常见的图片类型啊，是 gpg， pg 还有 g， 呃，然后如果发现是这种后车名结尾文件，咱们都叫 url 杠 loder 来进行处理啊。啊，后面这个问号是一个参数啊，咱们暂时先不用管他，一会呢，我们再来演示这个参数 let me 是什么意思， 反正现在我们要安装和配置这两个 loader， 帮大家去处理这种图片类型的文件，来复制一下，先把咱们的服务器先停掉， 让我们来懂吧。 好，这个包呢，装上以后，接下来呢，我们需要找到娃娃派的配置文件，找一下啊， 就是根部里面的这个 wild pack dear convey gs 来找到他。我们呢需要新增引啊，来写注示，这是处理图片文件的 logo， 那么和尚和上面的都比较类似啊，也是有 test， 有 youth test， 是电影的正义资格 啊。咱们要匹配的是点图片类型的文件啊，第一个就是点啊，这匹 g 首先代表或者的意思啊，或者去匹配点对 png 啊，再或者对 jf， 他们结尾的文件呢，我们都可以匹配到。那如果找到这些文件了，那咱们用什么都来处理呢？来用柚子啊，用柚子来，大家发现啊，上面的柚子 指向都是什么呀？数组来想象，为什么上面都是数组呢？因为是不是他需要掉多个楼的呀， 比如说咱们要处理 c s s， 还需要连着钓这两 logo 才可以，那因此呢，是一个数据。但当前啊，我们发现只需要钓一个就够了吧。哎，在只需要钓一个 logo 的情况下，其传不传 速度都无所谓了。传速度也行啊，那其实更简单的，咱们传一个字幅串啊，因为只有一个嘛，传一个 url 杠搂着就可以了，而且不是哈，如果需要调用 the loader 只有一个，怎么 只传递一个字，不串也行，那如果有多个 我都会录的。行了，必须指定数字， 多个的情况下只能是数组，单个的情况下数组或一个普通自助站都可以。好，那么到这咱们这个 logo 也就已经安装和配置好了。最后呢，我们来看一下啊，看这两个代码，呃，就是我们重新跑一下，看有没有什么问题， 看这有个小图片能够看到，是不是啊？然后呢，咱们右键拆开元代码，呃，看中端嘛啊，我们现在看中端 是不是也没有红色的错误啊？嗯，好呃，这里给大家去介绍一下啊。就是呃，我们在王欧派克这个项目里边，如果要导入图片的话，那就像正 去处理这种图片，咱们也需要去安装啊，和配置对应的加载图片的功能啊。那么在这里呢，咱们有同学会有疑问啊，就是老师你这个 logo， 你这个图片，你在这不让我们去导入，用 logo 来接收它是个什么呢？我们可以来看一下，对吧？来 打印一下这个 logo， 看看是个啥呢？ 小心是个啥。导入那个图片得到的是一个贝斯六十四的自顾串吧。那然后咱们把这个贝斯六十四的自顾串怎么着了？ 作为作为这个图片的 mc 属性，值了吧。所以说最终 我们在页面上我们可以使他元素啊，来看他的 ic 是一个真正的路径还是一个 base 的， 哎，指定的是一个贝斯流色的字符串，哎，这样的好处就很明显了。这不咱们这个小图片不需要发一次额外的请求，能理解吧？

我们在做数据查询的时候，为了用户体验都会做这么一个加载动画，每一次都在 h t m l 里面写一次组建名就显得很麻烦， 我们可以做一个全局指令来实现，不用在 h t m l 里鞋组建也能出现加载动画， nice。

v u e 二、性能小优化目前代码块中包含了两个子组件，他们在符合条件的情况下才会渲染，采用了最基础的方式进行导入。页面刷新后会加载五个文件，在点击显示两个组件时只会新增一个文件，加载的是 illam 的字体文件， 也就是说在页面初始化时就已经加载了组件文件，现在我们把它改写成一步组件，再来做个对比。 当我们显示组建时，控制台会新增一个请求，这时才会从服务器请求的需要显示的原文件。另外一个组建也是同样的原理。这样做的目的是 在手屏渲染时减少加载文件的数量，在需要用到一些组件时才会从服务器获取，而且不会重复请求，可以有效的减少白屏的时间。接着来看一下路游览加载，目前这种方式项目到后期 dravascript 包会变得非常大，影响页面加载。 而揽加载简单来说就是延迟加载或按区加载，即在需要使用到路由的时候才进行加载。常用的路由揽加载一般有两种， view， e 部组建和 e s 中的 import。 不过这样写还是不够太简便，我们可以写一个方法，将路由组件一次导入，需要将目前的代码注视掉。需要注意的是，配置存件下的组件将会一次性全部导入，可根据需求来选择方案。 这里的 rose name 需要与组建名称一致，不然无法导入， 最后将路由导出即可。以上就是本期的小分享，如果有不对的地方，欢迎在评论区指出。

先来描述一下 vo 二的响应式原理吧，主要就是通过我们的这个发布订阅嘛，我们这个的 dfine property 来实现的。首次加载的时候呢，我们就会去给他的那个，给他里面搜集他的依赖 后，在我们去获取的时候就会去通知他的这个依赖更新，后面就是涉及到什么一不更新这些了，那个，哦不，这个的地方 pop 他的函数的签名是什么样子的？就是他有几个参数，三个参数，一个是可美举，一个是可杯子，一个是可写的。你刚刚说那不属于那三个参数哦， 第一个就是他需要监听的，一般传的就是那个你需要监听的东西吗？第二个就是传的他的 k， 第三个就是传的那个函数。三个传的函数吗？就是函数啊，一个对象吗？一个对象花括号，然后我们在里面写东西啊，一般都是。那，那就是传了一个对象是吧？对， 行，那你那六三那跟这有什么区别吗？嗯，这个我没有详细去了解，这个我知道，他是用的是 plus 吗？就是那个代理，但是具体是有什么区别我是没有了。

清晰，好，行，那如果说这话都已经理解了，以后呢，我们再来进入到我们的下一步。不过呢，在提供给大家的文档中，针对于刚才说到的 静态数据的加载，包括我们的这个公共数据的副用。好这一块呢，我在整理的文档中都有跟大家写啊，有些小伙伴，如果，哎，像刚才聊到的这些知识点，还有一些疑惑的话，你可以拿到文档以后可以好好看一看， 像静态的呀，动态的呀，是不是附用的呀？我在里面呢跟大家基本上写了，我看有整理了，有几个一二三，还有下面一个是动态数据啊，这个呢，你们都可以看一下啊，完了以后把它呢放在到你的公共数据中。好，行，这个应该说都听 明白了，那我们就进入到我们的第二个啊。呃，刚才给大家在聊的过程中，应该说针对于权限管理，我们要涉及到的文件呢，是已经有了一个比较清晰的认识了，但是现阶段的问题呢是 我们虽然把那个导航数据和我们的路由数据变更为公共，但是毕竟这个数据呢，它还是一个静态的数据， 而且这个数据呢，我们会发现呀，哎，相当于他应该是有后端给我们返回什么，那我这个时候就应该展示的是什么， 所以我们的下一步处理就是想办法把这个数据变更为公共的动态数据，是不是？哎，后端一会给你返回什么，那我们只要把这个数据发生 变化了，那咱们的权限管理就已经，哎，基本上差不多了，为什么？你想一下后端给你返回一二三，那我展示一二三吗？你后端给我返回四五六，那我就展示四五六，是不是？好，所以我们要想尽一切办法呢，把它变更为公共 啊。那这个地方具体要变更为公共的话，我们首先要碰到的第一个是不是应该开始写具体的请求啊？ 对不对？好，首先啊，进入到我们今天第一个要跟他聊到的重点啊，有从说现在才开始吗？不说现在才开始啊，现在才进入到我们真实的权限管理，刚才前面给大家聊的半个小时，都是为了让你把 这个路由和我们的导航关系呢，先把它捋清晰，捋清晰了，哎，我们这个时候就可以开始知道如何动态添加，要不然有些小伙伴最开始一听到我讲动态添加，哎， 你会觉得比较懵，不是就是数据吗？那为什么跟路由又扯上关系了？是不是现在呢，他们之间的关系知道了以后啊，我们就好处理了。好，那我们先看第一个啊，就是请求响应，哎，他的拦截处理，哎，我说为什么要加请求响应拦截呀？ 我平时在开发的过程中，如果要引入这个 xiros 方式很简单呀，我在里面不就是直接的，好，我来跟大家那个写一写啊，像有些小伙伴平时用到的方式，哎，导入这个 xiros 完了以后呢， 我在里面呢，去全局啊，比如说这个 view 啊，那个他的这个圆形对象中添加某个，完了以后把他添加进来。好，我跟他说一说这种方式呢，其实在我平时跟大家讲一些小呆萌的时候呢，还挺常见的，但是呢，他不 符合于企业开发的那个需求，为什么这样说呢？我们不可能，因为在六三点二里面呢，有一句话叫做强调按需加载，我们不可能在加载什么的时候都会统一再骂你 gs 对不对？ 你会发现后期打包部署，那第一次项目启动估计得要个七八秒钟吧，这个其实用户体验是非常差的， 那么按序加载他表达的是什么呢？就是我们不要在第一次啊，那个相当于加载的时候把全部的文件呢？哎，都放在里面，你需要哪些我们才加载哪些，所以我们要慢慢的把这些东西呢，相当于包立出来。 那么请求响应拦截器，他的整个处理思路是什么样的呢？我跟他简单的说一下，其实这块呢，在很多地方我也跟他有聊过，那首先 也就是说我们会我先给大家添加的第一个文件是什么呢？哎，这个 reques 的第二个文件呢？我还添加了一个 htt 的简介 s 文件，哎，对于数据交互请求这一块不了解的小伙伴可以好好听一听啊。那么我们当前要处理的是什么？把这个 xiros 呢？ 同样的方式先导入进来，导入进来了以后，那我也需要在里面去配置，因为有同学说，为什么我们在这个地方要去配置好，我先跟大家写一写，就是我们的那个地址呢？ 地址为什么要配置啊？啊？我想问一下大家，为什么我们要把这个地址单独的给大家踢出来，你说写在每一次发送请求里面不好吗？为什么要把这个地址给大家踢出来呀？这个不是。嗯，昨天就有位小伙伴问我吗说，哎，每一次好像看你写的时候，都需要把这些地址呢给那个完全的添加出来， 我们在每一次请求的时候啊，直接的写在里面，哎，这种方式不好吗？那还更加简单，一般问这个问题的小伙伴呢，说白了是缺乏团队合作的，同时呢，应该说没有太多的一些啊，像比如具体项目开发的经验。 所以有些小伙伴为什么在我们的实战中，稍微的一两句话可能就暴露了很多呢？因为像你如果在实际开发，比如说团队合作过程中，我们， 哎他的那个开发的环境是不断的发生变化的，你平时像自学或者说自己写一些小项目的时候，这个地址啊，你要变更呢？哎，那你就是啊，比如说那个现阶段是测试环境，线上环境，我们只需要把这个 ip 地址和端口地址变 话就行，我觉得这个是一件很简单的事吗？无非到时候改变一下这两个地址不就完了吗？但是呢，我们的项目开发，实际企业开发那非常的庞大，设计到几千个组建或者有的更多，那至少也有几百个组建。 如果我们的每一个组件中可能都会有两到三个请求发生的话，你的这个 ip 和我们对应的端口地址发生变化，那是一个非常非常大的工作量。是不是我们经常说 企业开发对于你的要求是不捣乱，同时能够去提高一些性能方面，比如说，哎，像扩展性啊，可维护性，那我现阶段跟他聊到的这个呢，他就是其中的一点， 因为后期不管在测试环境还是在上线环境下，我们要变更的永远只是这 这个全局的变量，而不需要在每一个发送请求的地址上面去改变他的请求地址的值，所以大家一定要记得请求后期的地址都是相对地址，并非绝对地址。这个呢，我再一次跟他强调一下，因为这个问题，其实在每一次跟他聊直播的时候都聊的特别多， 所以特别是有些小伙伴是自学的，或者说现阶段呢，还比较缺乏项目实战经验，爱团队合作这一块呢，还没有太多参与的小伙伴，一定要把这一块话呢给记下来。好，那给大家聊到这一块，像我们刚提到的请求响应拦截器，他具体应该怎么样写呢？这个我就跟他简单写一下 啊，我们首先在里面写呢，会给大家分为有两部啊，第一个呢是什么？第一个是请求拦截器，有同学说什么叫拦截器啊啊？第二个呢是响应拦截， 好，我先跟他把这个写完啊，请求也好，响应也好，拦截器呢，他就是你在发送请求或者在拿到数据的过程中进行的拦截处理，是不是？那一会我可能还会给大家聊到路由拦截，路由拦截呢和我们的请求拦截，他都是属于 在你发生某一种状态的情况下进行的拦截处理，如果是请求拦截，就是你在发生请求的时候拦截， 响应拦截就是后端返回数据的过程中我们发生了拦截，那么路由拦截就是当你的 uil 地址跳转的时候发生变化的拦截， 所以拦截器都是同样的一个意思，只不过针对的是你不同的场景而去定制的，这一块大家一定要记得，那么请求拦截器我们在里面要干什么呢？好，行，我先给大家把这 这个写一下。第一步请求拦截器呢，哎，我们在里面实际要处理的就是瑞，那个瑞 cross 的是不是拿到相关数据呢？他要进行处理。这个写法呀，我建议有些小伙伴呢，可以先那个，哎，就是默认死记一下，为什么呢？因为 啊，如果说你不需要在头部那个统一的传入什么偷肯的值啊，或者说我要在头部设定什么呀，那么我们实际返回，比如说坑费一个，他也直接按他来就行，这个呢，相当于默认的啊请求的处理， 那响应呢？响应就是后端给你返回相关数据之后我们要进行的处理，记得啊，他这方应该写到的是什么？ response 对不对？ r e s p o n s e 哎，对，要把它写进来，那么它具体拿到的数据呢？好，行，我在这一块给大家也聊一聊啊，我们来看一下它返回的 数据是什么样的。首先他会直接的给我们啊，这个返回的是 r e s 的数据，但是呢，在我们发送请求的过程中，有可能也会出现一些突发的状态，比如说错误了呀，或者等等其他的，所以在我们的一些配置里面呢，会把这个写进来。 当然有同学说了啊，请求也好，响应也好，具体要在里面添加什么，你当前这块应该说，哎，什么都没有去写。一般情况下，请求里面呢，我们会公共的处理，添加头部信息。 响应呢，一般会公共的处理哎，比如后端返回的错误码，包括你要添加的各项动画等等等等，所以这块呢要根据你的具体需求来。那么把这个写完了以后，大家一定要记得在我们的 vivo 项目中，哎，他是通过这个模块化的方式，所以 说最终我们还需要把它给进行导出，你如果没有导出的话，我们在其他的这个组建中是没有办法去导入的，明白没有？哎，记得啊，一定要把它给导出， 它里面呢相当于进行的都是一些公共的配置。好，这个写完写完了以后呢，我们的下一步要干什么？阿宇同学这个时候要干什么？相当于我就要在里面具体开始去导入进来发送请求。 那么导入进来呢，我现阶段给大家写的方式呢，是单独的添加了一个文件，我们在公共的一个文件中去写。有同学为什么要这样啊？你在每一个页面中写不一样的吗？ 这样做的目的呢，是为了后期有相同的请求，你可以去附用。好，行，我把它呢先给大家呢添加进来。那我们这个时候应该怎么样写？由于我们写到的每一个函数都需要 供其他的组建去使用，所以说大家一定要记得在里面写的时候一定要把它给导出去，如果你不导出去的话，别的组建呢是没有办法导入的，就像有些小伙伴不是平那个，平时经常问我们说啊，我在微博里面要写一个公共的，那么其他的微友组建如何去用呢？ 一定要导出，你只要导出了别的就可以用，你不导出他是用不了，是不是？好，行，我们把 x 呢先给大家引入，引入进来以后我们来看一下它里面的请求啊，第一个呢是请求类型， ok， 这个呢是盖的请求， 第二个的话就是我们要传入的具体的那个参数信息，这块呢没有任何的区别啊，你原本的请求怎么样写的这块写法呢，全都是一模一样的。好，行，我一会跟他把这个导航的那个数据信息呢，我们先给他获取一次。好，我刚给大家聊到这块呢，由于写法上面的 相对比较简单，但是呢大的思路都在这啊，你到时候再去进行具体需求的时候可以进行一些扩展。好，那这一块都已经能听懂的小伙伴呢，可以给我回复一下。如果说对于像我们刚提到的导入导出这一块不太了解的话，可以看一下 es 六里面的模块化 input， 这个 export 包括 export 里面的 dfart， 他的处理为什么要你看一下我们在写的这块，为什么有时候导出没有加这个 dfart， 有时候加了呢？这些呢都是属于 es 六模块儿画的知识点啊，这块呢可以好好看一看。 好，行，刚才给大家聊到这一块的时候，还有哪些小伙伴能跟上我们的节奏哎，能跟上节奏的那个同学呢，可以直接的给我来波六六六。

上个视频我跟大家说要用一个视频教会大家简单的 view 开发，大家把这个视频看完大概率是能学会的。所以话不多说，我们直接开始 看过我发的静态内容网站和动态内容网站有啥区别？这集视频的朋友应该知道，一个最简单的传统静态内容网页代码是这样的， 那么一个最简单的 vivo 页面代码是怎样的呢？首先，对于静态内容网页来说，网页上所有的内容都是用代码写死的，孤零不变。 如果把页面上一些需要根据数据请求结果动态变化的内容，用一个变量或者叫站位服代替，那么这个网页就变成了动态内容网页。而 vivo 开发的页面一般就是这样的页面，就像这样只是 vivo 的这个站位 或者叫模本语法是用这种双大括号的写法而已。为了让这种双大括号的模本语法起作用，我们需要给这个传统网页引入 vivo 点 gs， 也就是 vivo 的安装部署。 最简单的 vivo 页面就是这样的，每个 vivo 应用都是通过用 vivo 函数创建一个新的 vivo 实力开始的，就像这样，搞明白这三个参数，你就能开发一些简单的 vivo 页面了。 el 其实是 element 的缩写，指的是 html 元素，就是告诉 view 要把这个 view 实力作用到哪个 html 元素上。 在这个视力中，很明显就是把这个 view 实力作用到这个一句 tm 元素上。这个是页面模板上的变量或者叫站位符，也叫模板语法。这些 页面模板上的变量或者叫站位辅的值会根据 data 里对应值的变化而变化，而 data 里面各参数的值得变化，靠的是在 masses 里定义的各个事件处理的方法， 这些事件处理的方法可以被绑定在某个 html 元素上，让用户通过点击双击、长按干 html 元素等操作方法触发。就像这样， 或者把某个事件处理的方法放在某个 vivo 实力的某个生命周期函数内执行。比如就像这样， 美式页面加载后，这个唯有实力的生命周期函数就会被出发一次，就将服务器请求页面的数据后，再复制给 a 的里面的哥哥参数。 这也是三大框架开发的单页微本应用页面 su 效果极差的重要原因。再配合 view 的 class 与 style css 样式绑定、表单输入绑定、条件渲染、列表渲染，生命周期空利润， vivo 几乎就能随心所欲的控制页面内容和仕途的动态更新变化。 因为 view 的 class 与 style css 样式绑定、表单输入绑定条件渲染、列表渲染也是根据 data 里对应的某个值得变化而变化。这样基本上控制了 data 里面各参数的值得变化，就控制了整个页面内容和仕途的变化。 基本上没有掌握到这个程度，已经能满足大部分 unif 开放网站或小程序的场景了。 再学个主见单文件，主见计算属性和真经期以及 vox， 基本上已经能满足开发一个简单的实际可用的网站 app 小程序的需求了。就像这样的，所以 用 vivo 开发页面，简单来说就是在做两件事，一、把这个页面上要动态变化的一句， tm 代码和 vivo 实力中 dead 属性内的各个参数相互绑定，这个时候你手动修改 dead 里各参数的词，就能让页面内容和视图更新变化。 但实际用户访问页面的手，我们不可能自己手动修改的一个一个参数的纸，而且也做不到。 而让用户访问页面的时候，加载数据后自动修改的这里对应参数的值，或者让用户访问页面的时候，点击页面上某个地区天猫元素后自动修改的里对应参数的值，来实现让页面内容和视图动态更新变化。 又需要在 masa 这里写，用于代替你手动修改爹地里个参数值的代码，也就函数或方法这么 一个最简单的 vivo 页面怎么开发，你学会了吗？左下角零基础全站开发课还会详细的教你这些东西。通过上个视频我们知道，学完 vivo 再配上 uline app， 我们就可以开发出一个简单的现代 wifi 应用了。 而这个课程中 vivo 学习的内容也是专门为 uniaba 开发网站 app 小程序设计的。下个视频告诉你为什么有必要给大家制作一套专为 uniaba 开发用的 vivo 学习课程， 这也是为什么不用由你 ipad 开发的 vivo 项目，不能直接打包为 ipad 的原因。

好，那么接下来就是我们了解了贝斯六十四的这个格式以后，那我们在项目中呢，在捞派里面去体验一下，就是怎样打包处理这个图片相关的。这个路径 要演示了啊，我慢一点啊，不知道怎么讲课了突然，哈哈哈，来，接下来呢，我们在 src 目录下放一个文件夹，文件夹啊， 一妹热死，然后呢，把这个 logo 小图片我们呢复制一份放到一妹热死里边 来展馆啊来，这 体型的很小，就一 k b， 看到了吧啊，呃，然后呢，我们放过来以后，大家发现啊，在 soc bmaze 是里边有一个 logo 的啊，狗屁精啊。那然后呢，我们有这么一个需求，就是在 页面的结构中啊，在结构中呢，我们放一个 dna 的盒子，我们希望呢能够把这个图片给炫到盒子里边啊，去炫到盒子里边啊，或者我们在这放一个迷妹的标签也行啊。来，需求 把咱们 s 二 c 下面的笔妹之词里边的 logo， 第二应该是勾匹 g 啊，勾 p g 设置给 s l c 属性， 就我们希望呢能够动态呢为这个移妹的标签呢， s 上 c 复直直，是不是就咱们这个图片啊，直，就这个图片。那接下来呢，咱们呢能够拿到这个移妹的标签，咱们给他加一个 class 叫 box。 好，现在标签有了，只是 soc 没有指向咱们这个图片啊，那么接下来呢，咱们需要通过这种哎 gs 的方式，是不是给他去动态的复制一个，还像些路径啊，你看动态是路径啊，咱们看怎么做。 首先呢，需要导入 图片，得到图片文件， 然后 给姨妹纸标签的 s r c 动态复制 分成这两个步骤来实现啊，首先第一步咱们需要导入图片，那用咱们之前所学的是不还是引炮来导入吧，来导入啊，啊，我们说过啊，一切阶模块啊，所有东西都可以被导入过来，引炮去， 来个 logo 吧，来个 logo from 给，这个路径啊，是和我 ins 一平齐， 有一个文件夹叫一妹纸，里边有 logo 夹给我提醒。 嗯， 好，拿到以后呢，我们需要把这个 logo 作为这个标签的 soc 属性给它复制上去。那么首先这个标签拿到这个标签呀，对，咱们拿标签， 是不是咱们已经安装过这块了呀，就是个盗墓操作啊，就像拿到这个标签就是刀了一个选择器吗？是不是来刀了， 哎，这里是不是有个 class 叫 box， 哎，点儿 box， 拿到这个元素了，然后给它设置哪个属性啊？ s r c 属性，那就是点儿 at r 哇，对吧？点儿 a t t r 啊，给 src 属性复职。直是谁呀？哎，直就是这个 logo 啊，直就是这个 logo。 好，现在呢，大家发现我们又用 input 导入了一个模块，那这个模块呢？后证明既不是 css 也不是 last， 而是一个图片的后缀，是点儿 group pg 啊，就是 gopg， 那肯定会报错嘛，是不是这样来一保存，我们来看终端看， 搞错了啊，其实咱们在这个模块被夹子的时候呢，产生了错误，然后又提示我们需要一个合适的 logo 去处理这种文件类型。 好，那现在呢，我们也知道了，在加载图片的时候是不是也会有这个 logo 的问题啊？嗯， ok 啊，那么咱们休息会回来之后呢，来看咱们去处理。

好，先演示效果，然后再进行一个讲解。我们用数据库存入图片路径的方法来读取图片，展示静态资源读取的速度与便利性。我们用 michael 的一个账号来登录 看就这样的效果。这个图片加载的是非常快的，而且我这个图片是四 k 的图片，它是瞬间加载出来的。那么这个是怎么实现的？ 我们的数据库中要填入什么样的内容才能实现这个功能？这就是本节课程的主要内容，下面则是实现步骤和一些注意细节。本节课我们只需要知道资源加载，一个是我们的头像，是 一个单文件，而另一个则是我们的个人图片资源，是一个 u r l 图片路径的数据，它是多个图片多个文件，所以这里其实是一个难点。我们这里看数据库存入的图片格式， 我们的 appleta 就是我们的头像，显然他是只存入了一个文件名。而我们的多图片数据则是多个图片路径，中间用空格隔开。如果你有经验的话，其实能立马看出来我是如何渲染这些图片的。 其实就是用 split 切割后，让文件的前面加上静态资源的 url， 再加上文件名，使用 v 杠 four 循环就能实现此功能， 也就是这个功能。不过关于图片的加载还是有些需要注意的地方，我们看我们的前端原代码， 比如我们的图片是放在静态资源 s s 文件夹中的，然后，然后这里使用的是 require 来加载图片资源，使用差值语法插入我们后端传过来的 or waiter 数据。 当然了，关于后端向前端发送数据的代码，这里我们再演示，然后微杠半的数据绑定即可正常下载单个文件。 下面是难点的数组图片文件资源在在这个地方，我们在 compute 的计算函数里面定义了方法 来截取 usercover 数据，然后在 v 杠号中便利渲染即可。这里关于这个数组的切割，我们做了一些判断，逻辑判断，这个逻辑判断是防止一些异常的， 当然我们剔除了空格和点的 replace， 使它能够正常的切割。这些就是这个功能的核心代码了。呃，然后也没有什么可讲的了，这里看一下代码就明白了。

先看这个评论，他想封装一个组件，然后呢动态设置里边的背景颜色，那我这写了一个呆萌，我们简单来试一下啊，现在这是一个静态的颜色，大家看很简单，就一个颜色，那首先我们先把这个颜色提取成一个变量，我们在这 笔记卡拉，我们换一个不录，然后呢把这换成这个变量，我们来试一下。打开蓝色了，然后接下来呢，我们想既然他能写在这，他是不是也可以写在行内啊？我们试一下 style， 好，我们再换一个颜色，当然变了，那接下来我们验证一下他这个样式变量会不会串，我们再来一个不声明这个样式的，然后呢叫 bg 二 kes 的二。然后下边呢，我们再来 一个笔记啊，看看这个边量不会串，只会用到第一个上面，所以没有问题。那我们是不是可以考虑把这个 style 里边这一串声明成一个计算属性呢？ 先来试一下啊，我把这块改成一个迪卡利尔卡伦，然后呢把它改成这个，好，然后在下边我们先声明一个贝塔瑞滩，这就叫比基卡兰，这是这个样颜色，我们先是墨，是红色的，然后呢我们再写一个更漂亮的属性比卡尔比迪卡兰，然后瑞滩有做出来就好了， 最远的杠杠一级卡拉，等于类似的一级卡拉。好，我们再来试一下，看看红色，我们把它改一下蓝色 blue， ok， 没问题，我们再来试一下，把它绑定到一个 印铺子里面，印铺子，然后那边也不懂要用笔记卡了，看看蓝色，红色，然后我们再改一个色号，好，这样就可以了。

观众朋友们大家好，那今天讲一下这个 v 二自定义这个全局，这个这个组件啊，让我们先新建一个这个什么啊？项目。好吧， 脚底膜 讲基础，我这个我不知道算不算基础，你可以看一下， 我先建个项目， 怎么这么多？ 那我用这个吧， 我想新建一个项目啊， 今天研究了一下那个什么，那叫什么？前端性能监控，这不是准备要开源一个吗？然后看这个技术方案设计一下。 看着是有点头疼，挺麻烦的，进大厂要不要学高速前段的话可能用的不是很多，反正我这是基本加减乘除就够用了。 这基本加减乘除就差不多了，然后给他拖进去。 这个海绵宝宝是哪位？ 太卡了，不卡呀？ 不卡，你们看着卡吗？ 我先把他这个这个， 对，我也觉得不卡呀，这怎么又太卡了，兄弟快换个手机吧。 对，我这东西给他扇一扇， 把这个图片给他删了吧。 and a boat who？ 哈喽，沃尔特啊，就这， 这就叫 logy 吗？就是你们一般用过那种饿了么 ui， 是吧？ 然后他那个应该叫什么？麦是一只。 对，他这他这不是有这个吐司吗？是吧？然后直接通过啊， z 点到了 mac， 他不是就可以调到吗？ 对吧？然后今天我们是服装一个这个楼顶，就是直接通过这种方式去给他调用，就是类似的什么什么什么到了楼顶，然后调一个楼顶出来， 就不用去，再去在页面上写个楼顶主见了就很麻烦，每个页面用的时候都要写一遍，挺麻烦的。我说直接封装一下就完事了。 然后我们在这建一个这个啊，楼顶， 哦，有一，还有一个 gs。 呃，随便给他布个局吧。 呃。费克斯的话，然后给他那个什么给他铺满， 这个给他铺满。你们你们一般会怎么写？ 什么奈布特林瑞特林吗？包他们林。是吗？ 我看你们一般铺满是怎么写的。 给个背景颜色吧。 被颜色算了，先不给吧。 贴贴什么？搞个 tax 给个蚊子，蚊子得给吧。 那我这边就用这个 有一四层，然后零，然后是把这个字给他稍微集中一下吧， 然后是给他一个白色吧，稍微大一点， 这来一个背景颜色吧。 ok， 大概大概这个楼顶就是长这样子啊， 这是那个楼顶的组件，那我们先试一下吧。 这个是 sauce， 没有啥事 啊，大概就是这样一个效果。好吧，大概就是这样一个漏漏的一个效果。到时候你们可以在美化嘛，是吧？我就讲一个视力，就是直接通过这这种方式，什么点击的时候给他加个点击视频， 就直接通过这种方式把这个东西给他调出来，因色而特没有用过，是吧？ 看到吗？这个这个音色特是什么意思呢？给你解释一下，他呢就是这个意思， 他这个这个流量器不行， 可能比较好一点，浏览器他如果识别到是这四个，他自己就转成一色的一色，他就是就是这个意思。对对，缩写，缩写就不用写这么一堆了， 这个拉满好用吧？对，这个就这个就是银色的。 那我们现在就不影了，我们直接封装了，直接就用这种方式就给他掉了。好吧，那我这就不影了， 就是看一下这个是长什么样。 那么就在这个 解释里边去去给他操作啊，首先得引一下这个维维利 w 一对一， 嗯，这个这个赌劲也得赢，这两个得赢， 这个没什么问题吧？然后呢往外面暴露一个对象， 然后我们再慢点接上面给他拧一下吧， 这个是艾特下面这个扛破难事下面的 楼顶，下面的楼顶， ok， 就是一般我们去注册这个插插件吗？不就是通过这个微微点 yous， 是吧？把这个插件给他放进去，对吧？这种，这种都见过吧？ 这种，对，然后把我们这个这个节色给他放进去，然后这个插件呢，他会接收一个这个阴石道，一个函数，那我们这得对，你得搞一个阴石道， 然后呢他第一个参数呢？是这个，呃， ve， 那么叫 vm， 他会把唯有你的实力，就是那个勾到函数给你，帮第一个参数给你传进来，你就可以读到了， 就这个他的构造函数， ok， 这个阴斯道，这个是固定的，他会自己自己去调你下面这个阴斯道方法， 这个又不明白呢？ 然后我们需要用那个无忧郁的，这叫什么？扩展，扩展方法， 就是一个字称的去给他追加，追加进去，把这个组件对他默认的话，是你可以写一个组件，但是呢也可以同样使用一个已经有的一个组件，就是我们这个楼底不是已经有了吗？ 同样也可以放一个已经有了呢，也可以自己写，都可以，他这种就是自己写的，地里边也可以自己写，那也可以放这个已有的， 那我们现在就已经有了，所以我们直接给它放进去就可以了。 把这个 logo 给他放进去，他会返回一个新的实力， 默认就有什么东西， 直接看他那个本道 extend 有点慢， 在这在这 他会返回一个，这个是这个新的 一个实力，他这新的实力呢？需要扭一下，然后需要找个东西去给他挂载。 那我就叫什么到了楼顶吧。 啊？需要给他扭一下， 然后需要给他搞东西给他挂载。 都是 mont 啊，他这里他这里可以接收两个东西啊，一个是这种啊， strysty， 就是应该是那种什么点点 class， 型号 id 那种，或者是一个元素， 那我们就直接给他创建一个元素就就可以了。 对，我直接给他给他挂到这个 div 上面，然后给他挂到那个，再给他挂到那个包里上面。 呃，他现在是一个赌劲，然后他的高人医疗可以看一下。 对，现在是已经给他挂上了，就这个我们应该是默认先给他先隐藏了， ok 啊，这样就看不见了，然后我们点的时候去把它调用一下 这个，那么就需要在阴死道里边去给他做处理了。那我们能读到这个 vm， vm 就是他那个过道函数，只要是函数他就有那个 pro 太阳，那我们可以给他直接给他挂到上面。 应该是这个吧？ 这个这个，这个方法明就可以自己定义了，就能瘦，是吧？ 这叫什么害的？ 嗯，差不多。 r e f s 的写法是什么意思？ 这其实就那个赌劲，然后你看这个 visbo， 那我们就可以去控制他了， 就是这个，那如果瘦的话就给他设为处 害的就是 false， 那大概就是大概就是这样一个流程， 然后是我们在这给他调用一下， 然后就出来了，然后我们再给他来一个 三秒吧，三秒就给他关了， ok， 然后我们点一下 logo 啊，这这这个全局方法在哪都能用。你可以在接口里边，比如说你这要掉接口，是吧？ 然后你可以点一下这个东西去掉，然后接口，接口掉完之后再给他害的，对吧？然后我们里边呢可以传 参数，比如说我们这个啊，楼顶是吧？他要自己去定 你，我不想叫这个名，我想叫别的，对吧？可以穿餐吗？ 比如我叫加载中，然后我这个背景颜色我也想自己定， 给他来个 酒啊，稍微黑一点，然后我们这需要改造一下啊，参数的话就从这接收到他是一个对象， 对象的话我们可以通过这个 oppo 这个点 k 去给他便利一下，然后这个 pomeres， 然后再给他 foe 意思一下， 然后我们给他把这个其实就是一个覆盖， 把他的属于就是把他的属性给了你，这个不是把新传过来的属性覆盖到这个原来，把原来的属性给他覆盖了，就是这个帕萨摩斯 k， 这样就可以动态了。就是你你这定义什么属性，我那就可以传什么了，然后如果没有的话也不会影响，是吧？ 我们可以再试试啊，这个稍微黑一点，然后这些字能变，就每一个组线里面，你就可以去给他字第一句传三个，然后可以听一些很多很多别的东西，是吧？我这就举个势力 啊，大概就是这样一个思路去封装一个这种选取组件，这是楼顶，还有别的吗？什么吐司啊那种啊，差不多都一个思路， 在任何页面都可以掉 啊，没有问题。然后我们可以再给他来个动画， 就这样感觉是吧？有点生硬哈，给他改造改造 啊，由于是微钢艺术，可以我们可以用这个， 然后再给他一个内容， 动画的话我因为我这直接你写过了，我就直接拿来用，太长了，就这个， 然后调这个，你没事，就是 一个渐入渐出的一个效果，看起来没那么生硬， 是吧？这样稍微好一点，然后过一会就没了。然后这的话你们可以再再来点什么 icon 啊？再给他转一转，是吧？ 然后你们也可以再封装一个，比如说上面这个进度条啊之类的， 这样就感觉比较完美了。 这是 v 一二的封装方法。方法那 v 一三的话又不一样，到时候我们可以再抽一集 v 一三的， v 一三的也比较稍微麻烦一点， 就是看大家有没有什么问题。