vue组件声明方法

好，注意看，我们静态页面上呢，有这么一个星级评分，它的 atm 呢，非常简单，就这么几行，它的 c， s， s 呢，也非常简单，就这么几行。 现在我们考虑一个问题，就是我们的页面上啊，到处都可能会用到这个星级评分，还不光是这个页面，将来别的页面也会用到，那怎么办呢？那按照过去的做法，我不得不去复制这一块代码，多复制几遍呗，对吧？复制一次，那就用了一遍呗， 这样子做呢，也不是不行，只是呢，恶心，这只是一处星级评分而已，你考虑到页面上这么多的区域，你能都这么干吗？ 而且呢，现在还不涉及到 gs， 涉及到 gs 更麻烦，你光复制个 atml， 那 gs 咋办呢？他控制的到底是哪一个区域呢？所以呢，按照之前的分析，这应该进行怎么样主见化？那么既然我们讲的是 view， 那么以无忧的主见化为例，看一下在无忧里边，如何来把这个区域提成一个主见。首先呢，我们写一段 gs 啊，导入这个无忧。 好，接下来我们来定义主见。定义主见呢，你可以把它想象成为函数，声明你得先有一个函数，然后再去调用，再去使用他，对吧？主见也是一样，你先得有这么一个主见，如何来定一个主见呢？其实主见的本质就是一个对象，你可以用个变量来接受一下。 其实严格来说，这个对象呢，叫做组建的配置对象，真正的组建呢，实际上是一个无 you kongpoint 的实力，所以很多人呢，把这个玩意直接把它当做组建，这是不准确的。 严格来说，它应该叫做组建配置，通过这个配置，唯有会自动帮你创建，唯有 component 的实力， 这个玩意才是真正的主见。不过一开始呢，我们先暂时不考虑这个，以后我们分析到 vivo 的进阶部分呢，再去详细聊这个东西。好，那么这个玩意既然是一个配置对象，他到底配置啥呀？其实呢，你们在之前学习 ville 的时候，刚入门的时候是不是一定用过这么一个代码？这个玩意是不是就是一个配置对象啊？ 这里边是不是可以配置 el， 还可以配置什么 data， 还可以配置 message， 对吧？那么现在我告诉你，在组建的配置里边跟这个玩意差不多有一些区别，但大体上差不多，我们在一开始学习组建的时候，不仅要学习组建的各种概念， 在代码层面呢，就是要学习这个配置该怎么去玩好。那么首先呢，我告诉大家第一个配置就是 template 组件用来干嘛的？来抽离页面中的一个区域的，对吧？那么这个区域里边不得有 atm 吗？ 那么这个 it 面在组建里边可以表现成为一个字符串，这里边其实有些深入的东西，我们后续再聊，你先可以简单的理解为他的 it 面就是一个字符串， 所以呢，我们既然是一个星级平分的组件，我们就把这个组件的 itml 给他粘过来，好一个最简单的组件就制作完成了，这个组件里边其他啥也没有，就封装了一段 itml， 整个形成了一个配置对象。好，写完了之后保存，我们来看一下页面上有东西吗？是不是啥也没有？ 为啥啥也没有啊？因为你只是写了一个普通对象而已，这只是一段再普通不过的 gs 代码，它里面有一个属性叫腾不列车，怎么样嘛？不会发生任何事情的。 所以说接下来呢，你要使用这个组件有一个前提条件，你就必须得让吴佑知道。哦，原来这个玩意是一个组件的配置，我还以为你写着玩的呢，对吧？ 让无忧知道。那么这个让无忧知道的过程呢，就叫做组建注册，得告诉无忧他是一个组建配置。那么如何来进行组建注册呢？有两种方式，第一种呢叫做全局注册，我们可以使用无忧构造器里边有一个方法叫 component， 传入两个参数，第一个参数呢是一个置物券，给组建取一个名字。 第二个参数呢就是组建那个配置对象，你可以把对象直接写到这，也可以呢，像袁老师这样子，把它定义成一个变量，把变量名写到这不一样吗？然后就是给他取一个名字，取啥名字？你随便呢，比方说我给他取一个名字叫 star read 啊，用短横线命名法。那么这句代码的作用就是告诉无忧，听好了，我现在大声的告诉你，有这么一个组件，他的名字叫做这个，由于我是全局注册，所以说将来在任何其他组件里边，只要你受无忧的控制都可以 使用这个组件，如何使用呢？啊？到界面上去，只需要以组件的名字作为标签名， starrate 完事了，你看是不是就出来了。目前天文的感官呢？就是他会把这个组件里边的 atm 代码渲染到这个位置，没问题吧？那如果说我们要做多个星级评分呢？接着写呗， 保存，你看这里多个了，哎，这这样的代码结构是不是更加的简洁好，这是第一种组建注册的方式，第二种方式呢叫做局部注册。 局部注册如何来书写呢？我们需要在具体用这个组件的地方，比方这里我们要在唯有实力里边用这个组件，那么我们需要在这里边去写个配置，叫 component， 写的方式也一样，用他的属性名作为组件的名字，用组件配置对象作为属性的值，对吧？你看跟这里说道理是一样的，给组件取个名字，然后呢， 组件的配置对象，这里也是给组件取个名字，然后组件的配置对象，那么这样一来，在这个实力里边也可以使用这个组件保存，你看仍然有效。那么至于说这个全局注册和局部注册到底有什么样的区别， 将来我们在开发当中到底使用全剧注册好一些呢？还是使用局部注册好一些呢？这个问题先暂时放一放，因为这一块涉及到一些工程化的知识， 袁老师可以暂时的告诉你，在开发当中尽量使用局部注册，少去使用全局注册，将来呢我会进行详细的解释。 路得一步一步走，知识呢得一口一口吃。主见是一块非常庞大的知识，不过呢，通过这节课，我们已经能够初步的体验到主见的威力，就这么一个简单的主见，他就可以减少我们很多的代码。当然这个主见里边还有各种各样的问题，我们一步一步来处理。

好，这里呢，我用一节课几分钟的时间，让你彻底搞清楚在 view 里边使用样式的几种常见做法。首先呢，它自然就是在组件里边直接写一个 style 标签，然后把所有的样式给它写到里边去。 这种做法呢，看上去可以实现这个效果，但是呢，这样做容易导致内名冲突，因为将来呢，我们组建一多，你保不齐这些样式的名字有冲突了啊，管你使用什么样的命名规范，都不是一个特别稳妥的方式。 那么这里应该怎么做呢？我们可以给这个 style 元素啊，加上一个属性，叫 scout， 当然了，不要忘记啊，这些东西啊，全部都是交给构建工具去看的，并不是放到浏览器里边执行的，没有哪个浏览器能够认识这个玩意， 不要说这玩意了，他连这个玩意都不认识，还有这个玩意是啥也不认识，所以说一定要记住工程化的知识哈，这些玩意都会经过编译 变成正儿八经的 g s 代码，这些 c s 代码呢，会被提取到一些文件里边去。好，当你加了这个 stop 之后啊，我们看一下效果，效果呢，仍然是没问题，为啥这样就可以避免内鸣冲突了呢？我们来看一下这个 vivo 脚手架，他做了什么事情。 从这里可以看到啊，当你给这个组件加了 scopter 之后啊，他会为这个组件里边的每一个元素加上一个特殊的属性。这个属性啊，他能够保证不同的组件他是唯一的。 这个组件里边的所有元素，你看，里边的哀元素也被加上了这个特殊的属性，而且值呢，也完全一样，他要干什么呢？他加上这个特殊的属性，就是为了给这个组件里边每一个选择器啊， 给他带上这么一个属性选择器。你看这个类选择器，他被带上了一个属性选择器，那么这样子呢，就非常精准的选中了这个组件下边 这个 starrate， 他就不会对其他组件造成影响，因为其他组件这个值不一样啊，这个选择器选中不了他这个选择器，他只能选中这个组件里边东西，懂这意思吧？ scops 这个单词的意思呢？就表示在某一个范围内的意思，那么这些样式呢，都被限制到了这个组件的这个范围内。 好了，有朋友说我不仅仅要用它，我可能呢，还想在主线里边使用一些欲编意器，像什么奈斯啊，萨斯啊， style 斯啊，那么这些玩意如何在无忧里边做呢？其实啊，无忧可的呢，他已经帮你考虑好了这一点， 你要做的就是去安装这些预编仪器就够了。比方说吧，我们要使用 sas 作为预编仪器，那怎么弄呢？安装两个东西， sas 和 sasloder 啊，这是 sas 的核心库，这是 sas 呢，跟外派的结合的库。因为我知道 view 颗粒啊， 它里面就用的是 vipad， 你把这两个库一安装啊，就可以直接使用了。那么具体怎么使用呢？你只需要给这个 style 做一个标记啊，叫 number， 给他设置为 size 就完事了，这里边就可以使用 size 代码了。比方说我们把这个玩意给他加到这里来去啊，这个玩意也给他加进去。好，咱们来看一下效果啊，行不行？ 你看是不是也没问题，能够正确应用进去，当然了，你就可以使用砂石里面各种神奇的操作了啊。这里顺便说一下啊，就是如果说你这个 style 标记的 scout， 由于他每一个选择器后边呢，都会带着一个属性标记，所以说呢，你这个欠套呢，其实就没多少意义了啊，就不用写欠套了， 因为写签套的目的不就是为了避免重名吗？那现在不会有重名问题了，那你可以不用写签套了，没问题吧？好，那么就剩最后一个问题了，有些公司呢，他希望把这个样式啊，不要写到单组件里面去，每个组件单独形成一 样式文件，专门来写这个组件的样式，因为有可能这个样式比较多，写到单文件组件里面呢，可能会使得这个代码呢比较臃肿，希望单独提出去。那怎么提呢？非常简单，一提就完事了。比方说啊，我把这个代码复制一下 好，然后在这里呢，新建一个文件，给它取名为同名文件吧， starrate， 当然你取什么样的名字都可以啊，叫 c s s， 如果说你是萨斯的话，那就是 s s s s 啊，都行了啊， c s s 吧。然后呢，把这个样式呢给它转过来， 好把样式提成了文件之后啊，我们需要在组件里面去引入他怎么引入呢？我们可以写一个 style 元素，还是熟悉的配方，是吧？然后他提供了一个 src 属性，可以引入，这个 css 好保存， 你看是不是又出来了。但是呢，这样一来呢，他又出现了这个问题，就是没有特殊属性了，容易导致内名冲突。那怎么办呢？可以再加上 scout， 你看是不是又出现了啊？这些呢，都是在无釉里边使用样式的几种常见做法啊，你们以后公司到底用啥？那我不知道，大概率呢，都是这几种，如果说超出了这几种的范畴，那比方说要使用什么 pose css， 再比方说要使用什么 css 啊？使用一些别的方案的时候呢，就需要一些工程化的知识了哈，需要自己去做一些配置，都是可以实现的。因为整个这个无油颗粒啊，他就是用 vipad， 你如果说懂 vipad， 那就无所不能了，想咋玩咋玩。不过呢，常见的方式呢？就这么一些啊。

接下来讲什么问题呢？什么是主教化开发和模块化开发？他是两个概念，两个概念啊，哎，因为这个咱得分开啊。啊？先说这个主教化开发啊，主教化开发，比如说我现在写一个这个 应用，比如说这个系统里面是一个这个页面，然后呢？他有什么呢？有一个海底有个头部，有他头部，然后他还有一个侧边栏，侧边栏是一个菜单啊，菜单呢？咱就叫啊，一个耐还得有一个主体内容，对吧？这主体内容呢就叫 啃趁他那一个应用系统，基本上好多应用性都是这样的，大家大家可能看你们什么学校的一个选课系统啊，或者说那个办公司的欧威系统啊等等，基本都是这个时候啊，上面那个嗨点里面可能会有一些啊，比如说一个登录啊，一个一个用户的一个头像，然后这里有注销菜单， 个人信息等等等等，然后这个菜单呢显那个什么呃基础数据啊，什么各种业务啊等等等等，然后你点击这些菜单的时候，呃，主要的内容会不断的更新，对吧？基本上系统他都是这个思路，是吧？啊？所以说 咱们就用这个思路来给大家讲一下。呃，什么是组件化开发？组件化开发，大家想一下，我现在这个这个这个程序的话有几个组件啊？按刚才人的思路是不是有三个呀？一个是 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 二零一五提供的 模块化的语法啊，所以说我们通过这种模块化的方式就可以把程序拆分成不同的。呃，功能啊，有的时候大家为什么混呢？就是说， 哎，你这个主件化开发也是拆分，模块化开发也是拆分，那他有什么区别呢？啊？这个简单介绍一下，就是说主间化，他其实说的拆分还是页面层面的拆分啊？就比如说这整体的页面我拆成了三个主件啊，那组件化开发其实就是拆页面，那模块化开发呢？是拆功能啊， 拆功能我可能一个主件我可能有多个模块，而一个模块呢，我也可能用到了多个主件之上，所以说这是他们之间的关系，这就是主件化开发和模块化开发，模块化开发的一个基本概念了。

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

哈喽，大家好，今天我们来讲一下 view 三中的属性透传呢，之所以要讲这个，是因为最近有个粉丝给我提了个问题啊，我看了他的问题，我觉得很有必要讲一下这个属性透传呢。 神拓展示 vivo 组件中一个非常重要的技术啊，掌握他对我们熟练的使用组件，二次封装组件都是非常有帮助的。我们来看一下他的问题， 这是他给我发的图片的，这样图片就是说我们不能使用 propo 作为那个 model 来使用的，就是这个意思啊，就是我们二次封装主页的时候呢。呃，我们可以使用那个属性拓展的。 我们先还一下他这个问题啊，我们新建一个 delob 怎么样？ 这里我们同样使用这个 elem plus， 我们可以看到现在错误已经出现了。好的，图片上提示的错误是 一模一样的，那这个问题该怎么解决呢？就是最好的做法是我们这里不要使用这个泼泼，我们直接使用一个 v 杠半的等于一个， 多了一个 attrs， 把下面都删掉，回到我们这个页面主页中，把这个导入，引入一下， 直接写一个 dollow 微杠 model， 等于 sure， 在这里引入一个 r e f bones 的一个袖的一个， 下面放一个按钮，点击这个按钮时候打开这个对话框， ok， 没有问题，这个对话框里面应该是有内容的，我们写点 内容啊，你点击没有显示啊，没有显示是因为我们这里没有接收他，就是我们二次封装组员时候要注意啊，如果他有那个默认卡头， ok， 当然他还有可能有其他的卡槽，这个是 标题 template， 他好像有福特卡槽，是吧？这个是福特卡槽， 没有反应。同样的，我们这里也要接受一下这个福特卡槽。 ok， 没有问题，他好像也还有黑的卡槽，我们黑的卡槽也复制一份呢。 ok， 没有问题啊，当然你可以写一个呃方法去编 立出来，比如说你喜欢一个 important， 一个 huge slots 方式的 slot， 等于 slot， 然后你可以在这里把它便利出来啊，我抄一下这个代码， 你们看一样的啊，默认卡头对一样的，刷新一下，打开 这个就是一个简单的二次封装主页呢，我们来看一个复杂一点的，呃，像这种页面呢， 这里我们点击他跳出一个颜色选择器，那这边的这个 是跟着对应在变的。这里时尚它使用了三个组件呢，一个是这个 text fire 组件，第二个是这个 menu 组件，点击这个，这个是 menu 组件， menu 组件弹出之后，这个这个组件是一个 colorpick 组件，就三个组件写在一起，都是 beautify 组件的， 我们来实现一下它，我们在这里新建一个 colorpeak， 首先这个肯定是一个 we got text fear 的这样的 自读的黑的 dtax 啊，保存的，然后在这里面应用一下啊，卡了，第一个，再传一个 label， 选择颜色保存，看一下， ok boost 的一个卡了， 把这卡了传给他微杠 model， 传一个卡了进去，要毁了我们这个封装酒店。这里面的 这个 text file 上面有一个 template 叫有个卡槽 prepond 音的啊。嗯，我们在这里面放一个按钮啊，微杠微扭这个按钮，然后复制一下这个按钮的这个用法呀，这个按钮里面有个 激活器啊，这个也不是卡槽 propose， 我们写一个 div 自闭合一下，给他写一些样式 class， ok， 我们先给他设一个默认颜色，比如说 f 五二六， f 二幺，那我们怎么让这个默认颜色填充一下这个颜色？这个 style 你可以看到， ok， 然后我们要点击这个时候呢，让它弹出一个颜色选择器啊，你在下面写一个 v 杠 color pick， 这里面的这个同样微杠棒的一个多了 attis 你可以看到， 那我们现在点击一点击就关闭了这个有，这上面有个 cloud 空灯的颗粒格，然后传一个 force 进去 啊，同样的，他后面还有个那个 template， 有个叫 open 的音呢。我们要在这后面放一个复杂按钮啊，我们去找一个图标啊，我们要点击这个图标的时候复制这个颜色啊，写一个 复制颜色啊，复制颜色其实就是一个。 呃，我们要在这里面怎么实现获取它的 a t t r s 呢？这里面我们要使用一个 input 的一个 use a， 呃，他提供了这个后壳，这样我们可以在这里面拿到 atss， 拿到这个 model y 六，你们可以在这里打印一下这个 attrs， 我们可以看到它这里有个，呃，外面是传了一个 label， 对不对？传了一个 we got more 的一个 color we got more， 实际上它就会变成一个 model value， 还变成一个 on update， 一个冒号 model value。 呃，这里也充分验证了这个被刚摸的，其实上就是一个语法堂了，然后选择一个颜色复制粘贴一下，没有问题。 然后在这里的话，你还可以调整它的 warrant 奥特曼，你可以看到他会变成这样了。 plus， 我们给他加个拍点的选择颜色 复制，他会把这个颜色复制出来，你可以看到。那我这里封装一个颜色选择器的话，他这十项这里面就使用了三个组件呢，当然你可以封装更多的组件进去啊 啊，但是目前来说，这个使用属性透传封章组件的话，他有个缺点就是 他好像没有代码提示了啊，不知道有没有办法解决这个问题啊，有知道的兄弟可以评论区给我留言的。好的，今天的分享就这里啊，关注我教你更多 vo 知识啊。

前端 vivo 必会的副组件向子组件传植的三种方式，第一种方式就是用 v 八语， 首先我们声明一个变量 marry， 把这个变量传到子组件去，然后在子组件通过 plus 接收，直接渲染到页面，为了方便查看，通过写一个方法，每次点击那本都会加一看一下效果，试着改变一下没有问题。 第二种方式是使用 tfboy 和 engi， 这种方式无论组件层次有多深都生效。首先在副组件 pose 返回一个对象，然后传个 carry 到此组件去，在这个里声明一下。同样的也写个方法，每次点击 marry 都会加一切到子组件，通过 engl 接收一下，然后渲染到页面上，我们 打开浏览器看一下效果也是生效的。 第三种方式是使用 usb 插头，首先 在此组件里写上插槽的标签设置，如果没传默认就让它显示不就好了。然后再复组件里找到插偶组件，把我们的那个电量写上去，这就可以完成了。同样打开浏览器看一下是不是生效了，也是成功的。好，下期我们讲一下子组件相互组件通信的常用方式。

好，上节课呢，我们说过了，这个组建传职的父传子，然后这节课呢，我们来说一个相反的，就是子传父哈，来到这呢，我们就写一个四小时，然后这是一个子传父啊，正好是一个反的操作。 行，那下面呢，咱们就来回顾一下，二点差的时候，就是选项是 api， 我们具体怎么做的啊？行，那当然呢，我们先把这个组件给引进来啊，就是引 prot， 然后有一个 list， 这有一个 from 第二杠啊， con pony 四下的啊，这个 list 点六 ok， 然后这呢有 astrot 啊，比方 好，然后这个地方呢，有一个 ctrl phone 意思，然后这里边有个例子，是吧？那这样的话呢，我们的词组件呢，就引入进来了，那下面呢，我们来回顾啊，就是，呃，在二点叉的时候，有选项是 a p r 的时候，我们怎么做呀？是不是通过 a b 的去传呀？对吧？那这样呢，我们可以定一些数据啊，比如说就叫 a m 吧， 那就 sport， 然后这儿有一个 defense， 然后这儿有个 date， 是吧？这儿有一个 a o m 啊，随便写一个十啊，然后呢，下面呢，我就写一下这个事件啊，比如说有八个按钮，然后这呢有一个 click， 然后这是一个按钮，随便写个名吧，叫称至，呃， l m 啊，称 l m ok， 然后往这走， 那我们传的话呢，无非就是通过倒数 a 米的去传，对吧？记忆的一个实践名，我就叫 fn 了，其值呢就是 am 好，然后其次呢到负这呢，我就可以通过圈 afn， 注意你这写的是 fn， 那我这必须要写 fn， 是吧？然后这个名呢叫称之哄吧，随便写一个好，然后到这呢有一个 messy， 然后有一个，甚至 home 啊，这儿有一个 n， 然后可以 console 点 log 打这 n， 而这个 n 呢，就是刚才我们传过来的，你这地方是 十，那我这呢，接收到的肯定就是十，对吧？这 n 就是十，好，我们来试一下啊，来打开我们这的一个控制台，我刷新一下页面啊，打开一下控制台， 好，点一下，走你。哎，这个十就拿到了，对吧？当然你也可以做一副值，比如说你原本呢，是有一个 n 的，对吧？那你这呢，有一个 n， 他为零，然后点下呢，做一个复制操作啊，乱七八糟都可以啊，比如这样的，是吧，来刷新一下，然后点，哎，这样复制过来了，是吧？确实呢，我们的副组件已经拿到了，这是我们过去的一种写法。好了，我就把这注了。啊， 那现在到 vivo 三中该怎么去写呢啊？有两种形式对吧？咱之前也说过了，一种呢，是通过 set up 这种语法旁的形式啊，另外一种呢，也是通过选项是 a p i， 只不过呢，你直接可以在 set up 里边去写，比如说这样的， 这样，哎，可以，是吧，两种情况啊，那我们 set up 一会再说。好，如果说你要通过这样，虽然说也是选项是 a p i， 就不用 set up 了，该怎么办呢？一样的，比如说我在这呢，有一个 light， a m 等于 r e f， 随便写个一百吧，行吧。 然后这呢，有一个称至 n m， 那就 cost， 哎，等于好，然后这地方该怎么写呢？好，那就看一下 api 呗，然后我们找一下这个赛踏好， 那上节课我们说了， set up 呢，它有两个参数，一个是 pros， 这个就不用再介绍了，对吧？还有第二个参数，那这个参数呢，其实是一个对象啊，我们可以往下看， 那你可以直接传这个对象，然后就可以点，比如说 a b 的就等同于刀尔夫 a b 的，或者说呢，你可以直接把它结构出来，大家看看吧，直接可以结构出来啊， e s 六的结构负值嘛，那刀 我们可以写一个 pros， 然后逗号，对吧？一个 amy 结构出来，那我这个地方啊，就可以传了，比如说就叫 f n， 其值呢，就是 n m。 好，那我们就可以把这个 n m 以及甚至 n m 给它 return 出去啊，就是我这儿定义的这个变量和这儿的这个函数。好， 然后到这地方呢，也是一样啊，你用到它了，你就可以去接收，比如说这有个 light， 他，然后或者抗死，无所谓哈，这样呢，就可以打印那个 n 了，就是我们那个 lm 啊，就一百，好 reach 他， 那这样写起来呢，就相对来说比较繁琐了啊，但是呢，确实也可以实现哦，我们这的这个组件没有去引入，要把组件引入进来，要不然那个组件都展示了，是吧？好了，来看一下啊，来点一下，好注意，这也出来了，对吧？这也出来了， 只不过呢，他是这个一百在歪六里边，所以说呢，你要点歪六啊，点歪六啊，去打印，来到这点点点点，是吧，也就都出来，好注意，这呢，其实有一个警告的啊，有个警告的，大家下去呢，可以看一下这警告大家大体是怎么回事啊？你看这个地方啊，他有个警告， 那正常来说呢，其实也不会这么去写啊，就是我们在项目里边或者在公司里边做项目呢，几乎都会用选项。是啊，那个组合是这一篇就赛大法与法堂的形式，那赛大法与法堂的形式呢，就要换一种写法了。好，那我们这呢就先写上这个赛大法与法堂啊，这有一个赛啊， ok， 然后这呢也是一样。 好，我们就先来说子该怎么去做啊，那首先我肯定有一个这个 a o m， 对吧？它的值呢，我就写二百吧，啊，值就二百。然后呢，我要，呃把这个试卷也写到这啊，那就是 cons。 好，那我就要这儿写，应该按道理来说应该要写 emit 了，对吧？那这儿 f n 之类。好，咱们来看 set up 这种语法堂应该怎么去写，大家呢？可以点击这个 a p i 参考。然后呢在最下边这呢有一个 script， set up 好点进去， 然后在这呢他有很多的一些说明，比如说啊，他说了这个底翻的 probs 和底翻的 amys， 对吧？其实用就是他啊，用就是他，那他有很多写法，比如说你可以不用 ts 这种去写或用 ts 方式啊，都是可以的啊，用 ts 呢，就是你需要写个语言了，我找一下啊， t s 的啊，就在这个地方啊，你就需要这么去写。好，那我们就可以这样写一个语言，比如说叫浪 t s 啊，后面会学到哈，那你在这呢就相当于说这么去定义。好，那我这呢给大家说一下这个地方的 内容啊，就是，呃，称职呢，是一个名称，你可以换成叫称职 am， 或者叫也叫称职 am， 叫 fn 就行了。然后其实 id 呢，它定义类型是吧？就是一个 number， 就说白了是数值啊，所以说呢，你要用它的时候呢， 就这么就用啊，然后名就是 f n 啊，名就是 f n， 然后其值你可以随便定一个，就这个意思啊， 当然，其实呢还有很多很多写法，比如说你可以直接这么去写啊，啊，都是可以的，那当然这样的 props 呢？就是，呃，我们要传，然后进行接收了啊，这是 inits 啊， inits， 好，那么在这呢，咱就可以直接用它啊，比如说我这儿写 fn， 呃，这是定义的 fn， 然后其中的值呢，我就随便写一个吧，比如说就是走 am， 那 am 的话呢，就是二百嘛，对吧？就是 if 的这个二百。好，那这样写没有问题，注意你的名呢还是 fn 啊，那到这呢，我们也是一样的 去用，那就在这个地方要写的是 f n 啊，名称就是叫称之 home 吧，称之 home 啊，然后到这儿我还是要把那个子午线引入进来，那我们就可以直接 constant 写这个了，然后这儿有个 n， 好，我们可以 ctrl 点 vlog 去打一下这个 n 好，刷新，应该拿到二百就对了，对吧？好，这时候呢也是一个他，然后这呢有一个 y 六，是吧，你可以点 y 六去打印这个最后的值来走这二百。 好，所以说呢，有不同的写法啊，有不同的写法，那我们后面呢会讲到 t s 就是 tax 的啊，到时候呢，我们会用这种方式去写啊，那就提前熟悉一下啊，后面也会讲， 那让大家知道，其实呢他有很多的写法，反正还是原来的道理，对吧？就是通过 amit 嘛，只不过这 amit 呢是换一种写法啊去写， 然后至于他的思路呢，都是一样的啊，负呢，就是通过这样去接啊，我把这个呢就整体放到这了啊， 然后下去呢，大家尽量要把它这儿的这些什么 a p a 啊，都挨个儿去看一看，是吧？它其实呢也说明了就是仅限 type street 的功能，然后这儿呢也说明一大堆，大家下去也可以看看。 那后面呢，我讲 t s 就会用 v s 扣的这样的编辑去给大家去看它的里面的原码啊，那我这呢就先拿这种轻量级的去写吧，就是这个 sablin 啊， 行，那大家以熟悉为主啊，换汤不换药，还是那点东西是吧？好，然后呢下面本身要讲的是兄弟之间的一个传职了，那这个呢，我们就放到后边好吧，因为还有很多很多一些概念，比如说依赖猪肉啊等等这样一些东西啊。 呃，我们就放到后面去给大家讲，那父传子以及子传父，我们就先说到这里。

其实无忧的核心就两个东西，一个是数据响应式，一个是逐渐化，这两个东西给我们开发带来的变化是非常巨大的，可以说天翻地覆。那么这两个东西当中内容最多，知识最密集的就是逐渐化。 说的再夸张一点，你学无忧的整个过程，百分之九十的时间都在搞定他的主见，那么主见到底是什么？为什么需要他？这是我们首先要搞清楚的一个问题，就是你学一个知识，你首先得清楚这个知识他为什么要出现。 在我们这个行业里边，没有任何一个东西是平白无故出现的，一定是为了解决某一方面的问题。你要理解清楚主见，你首先就要理解清楚没有主见的时候他到底有什么样的问题。我们首先来看，如果说我们没有主见 放在过去开发的时候是怎么开发的呢？当时我们开发前段的时候，是以页面为单位来进行开发的，你要么不写，你要写就得写一个完整的页面，你们过去是不是这样做的？写 atm r， 写 c s s， 写这个页面的 g s， 那么这样一来的话，就会导致我们的开发单元过大。你想啊，现在的前端一个页面是很复杂的，不要说一个页面呢，就把页面中某一个区域拿出来，都是很复杂的，而你以整个页面为单位开发，就会导致你的开发单位太大了，结果呢就是复杂度上升， 太复杂了，一个小的区域我还能 hold 住一整个页面，我 hold 不住了。然后更可怕的是在这个页面当中啊，他有可能会出现一些重复功能的区域，比如说我用一些同样的颜色把它标注出来了，这种区域呢，还不一定是出现在同一个页面里边， 可能不同的页面中都有相同的这样一个区域，他们功能逻辑是相同的，可能细节上呢，有一些小差别，但是大致上是相同的。你以页面为单位开发的时候，就很难去提取这些公共的区域。你们在前面学习的时候都做过传统开发是吧？应该是深有体会。 相同的 at 面怎么办？相同的 cs 怎么办？相同的 gs 怎么来处理都是问题。按照这种模式开发下去呢，我们的代码就极有可能写成这个鬼样子，你看的清楚吗？看不清楚，看不清楚就对了，因为太多了， 整个页面的 atml， 整个页面的四 ss， 整个页面的 gs， 结果这里的截图呢，他代码还其实还没有那么多，加起来还不到一千行，稍微上一点规模的站点，一个页面的代码那是非常之多的。那么出现这些问题怎么解决呢？ 就是要靠主见化。那么首先就要清楚什么是主见，你可以简单的理解为主见啊，他就是界面当中抽离出来的一块区域，比方说我们整个页面，我们可以把它看成是一个完整的主见， root 是不是一块区域？是一块区域吧。然后整个页面里边呢，他包含三个部分，头部、主区域和侧边栏。于是呢，我把这三个区域抽离出来，又形成三个组件， hill， me 和侧边栏和 set。 而主区域里边呢，又有两个区域，两篇文章一二。 于是呢，我们认为这个魅这个组件里边，他又包含了两个直组件，阿迪扣，哎，是不是感觉非常的自然，跟我们平时用 div 去划分页面是不是相当类似？而侧边栏里边又包含了三个区域，这三个区域是相同的哎，我们又把它抽离成组件，哎，头也就组件啊， 抽离出来之后啊，他跟我们的多母元素一样，他也会形成一个塑形结构，我们把它称之为组件数，那么这样子一来的话，我们的代码会形成一个什么样的格式呢？有了组件之后，我们的代码格式就变得非常的清晰了，当然这些代码呢，我后边都会一一讲解啊。现在我们先来感性的认识一下 表，整个页面就是一个跟组件，给他取个名字叫 route， 它里面包含三个区域， hitter， may 和 site， 你看就完事了，跟组件就写完了，这么复杂庞大的一个页面，几行代码就写完， 那么具体到黑的里边有啥呢？有可能有 div， 可能有 a， 可能有菜单，那么都是包含在黑的主建内部的，他只管黑的这一个区域，那么其他是一样的，比方说这个妹，他也是一个主建，而这个主建里边有一个 div， 然后呢，有两个阿铁口，又是主建，对吧？主 组件数吗？啊？题口里边呢，有可能有一些别的什么元素，懂这意思吧？比方说这个二赛的是一个组件，那么这个组件里边又用到了三个组件，这三个组件实际上是同一个组件，艾特它里边有它里边的内容，这样子一来，你看不仅层次结构无比的清晰了，而且重复代码是不是也没了 你两个 rt 口，那么使用同一个组件就可以了，一份代码可以无限次的使用， ita 组件使用一份代码就可以了。当然呢，具体来说啊，这里面的问题还很多啊，需要我们后续的一一学习。不过这个整体的感觉是不是蹭蹭蹭就上来了？所以说组件的意义在哪 四个方面？第一个，降低了开发的力度。我们不再是以整个页面为单位开发了，而是以页面中的某一个小区域，甚至一个图标作为一个区域来进行开发，这样的力度是 是不是变得更加细腻了？由于开发的力度变小了，是不是开发的复杂度就直线下降了，因此主线出现了。第一个最重要的作用就是降低了开发力度， 从而降低了整体的复杂度，就跟我们借式写函数一样，对吧？整个系统复杂了，那处理一些函数出去呗，每个函数解决一个小问题，所有的小问题累加起来就解决了一个大的复杂的问题。 那么第二个意义呢，就在于他减少了重复代码，相同的组件被抽离出去了，你只管重复使用就完事了，这跟函数的道理是一样的，你只需要定义一次，然后就可以重复无限的调用他 好。第三个点呢，是更加有利于团队协助，以前的前端呢，在分配任务的时候，是以页面为单位分配的，就你开发这个页面，我开发这个页面，他们之间要协助 是非常困难的，因为我也不知道我这个页面的东西，你这个页面会不会用到，怎么去抽离重复代码很难的，但是现在不是了，由于现在是以组建为单位进行开发， 来，张三，你给我开发这个组件。张三在开发这个组件的时候，他都不知道这个组件会被用到哪个页面，他只知道这个组件要干嘛。比方说这就是一个登录窗口，他把那个窗口好好做好就完事了。其他任何页面想要使用这个组件的时候，拿过来就用 以组建为单位来进行分配开发，开发的单元更小，开发的周期更短，整个组织管理呢，也变得更加清晰。第四个点呢，就是容易抽离为公共库，我们页面上有很多效果， 什么导航栏啊，轮播图啊，甚至一个小按钮啊，我们完全可以把这一个一个的小区域抽离成一个一个的组件，下一次开发的时候不用再重复开 开发了，直接拿过来就用，而且很多的机构已经这样做了，比方说饿了吧，他就抽离了一个 vivo 的组建库，拿过来就用，我们来体验一下吧。 比方说我们要写一个漂亮的按钮，以前得自己去写什么 atm l， 然后写上 css， 甚至还有可能涉及到 gs， 现在不需要了，已经有现成的组件库了，做好的组件拿过来就用，提交保存，你看这个按钮不就出来了吗？还可以更改它的样式， 你看不就出来了吗？是不是就无比的方便？这些都是组建化开发给我们带来的好处，这些玩意呢，你们以后都会一一学习哈。我们这里呢，对组建就有了一个基本的认识了，虽然很基本，但是 他是组建最核心的概念，我给你传递了这个组建的意识，对后续学习组建开发是极其重要的。好了，有了这些东西打底之后，我们后边就一一来学习如何在代码层面来实现一个组建开发。

好，接下来我给大家展示的东西，它不仅仅是无忧的知识体系，同时也是无忧的学习路线。袁老师不能在抖音上把每一个无忧的知识点面面俱到的全部给大家讲完， 我只能占一小部分来讲，因为时间有限。但是呢，我会给你们指明一个 view 的学习方向，对于一艘正在航行的船，航向永远是最重要的。 首先我们就是 view 的入门，在入门阶段呢，我们要解决一个问题，就是你得知道 view 它到底是个啥？ 这边涉及到了无忧的一些基本知识，像什么模板的基础语法呀，属性绑定该怎么写，大胡子语法写在哪，事件该怎么注册，然后还涉及到无忧实力里边一些基础的配置，像什么方法配置在哪， 数据该怎么配置，当然还涉及到一些数据响应式啊，虚拟多么的一些基本的知识，那么经过这一块你无 就算入门了。接下来就进入到五六的重头戏，也就是我们这十几节抖音课给大家介绍的内容就是组建。我们这十多节课呢，主要是集中在这一块，组建的基本使用方式，怎么创建，一个组建怎么注册，以及它里边的属性和事件， 这是我们这十几节抖音课搞定的事，但是组建没完哈，组建里面还有很多的知识都需要大家一一去学习，这里边的每一课知识都是为了解决实际开发中某一方面的问题，技术领域里边的东西没有任何一个东西出来是搞着玩的，全都有它的使用价值， 到底他是啥，到底怎么用，他解决什么问题，就是同学们以后要学习的目标，好入门和组建。你学完之后啊，你就可以使用五一做一些小的东西了，但是距离真正的企业开发还差得远。接下来呢，你要完整的理解五一 模板里边各种语法的细节，在模板里边，他还给我们提供了很多东西，什么修饰服啊，过滤器啊，指令啊和 rife。 随便举个例子，比方说你们以后在五一开发过程中可能会用到一些跟接跨瑞相关的库，接跨瑞跟五有冲突吗？一点也不冲突，怎么结合？很多时候都要靠这个东西。 还包括我们有可能会抽离一些公共的功能，比方说图片栏加载，那么这些功能我们会把它作为自定义指令。无忧给我们提供了很多指令，像我们平时用的 v band 就是一个指令，什么 vivo 也是一个指令，包括事件注册那个 at 是吧？他是个语法堂，他实际上呢，是 vr， 他们都是指令，我们还可以自定义指令来完成一些我们想要的操作。好，当你把前三课学完之后啊，无忧本身就没啥东西了，但是我们学习无忧就学一个无忧本身吗？那也不行， 我们说无忧是一个全家桶，尽管他的生态不形容艾特那么多，但是呢，内容也不少。首先就是脚手架，官方给我们提供了两个脚手架，一个是 viewcalley， 一个是位置。到底学啥呀？小孩子才能选择成年人全都要，因为有些公司用的是 viewcalley， 有些公司用的是位置，全都在学。 如果说这两个玩意还不能满足你们公司的要求的话，那你就得自定义无忧工程这一块呢，就涉及到工程化的知识了。还有就是调试无忧要用到的 day two， 你不能啥都在控制台里面去打印吧。我们知道对于一个开发者而言，调试的时间几乎占到每天开发时间的百分之六十，如何来提高调试效率，得借助一些工具，那么 do two 就是一个非常好的工具。然后就是路由用户又开发了，往往是开发单页应用程序，但是在功能上呢，整个系统它又包含了多个页面，每个 页面实际上就是一个组件，如何在组件之间进行切换，如何根据不同的地址显示不同的组件，以及页面挑转的时候如何进行健全和拦截，这些都是 rooter 要解决的问题。 还有一些数据共享的问题，在整个庞大的主线数里边，我们如何在两个毫无关系的主线之间进行数据共享，他们使用同一块数据，而且那个数据变了之后呢？用到这个数据的主线全部自动重新渲染，他是如何做到的？我们应该使用什么样的技术？ 就是这一块要解决的问题。那组建库就不用说了，特别是在开发一些中后台应用的时候，我们不可能有那么多精力去一个一个自行编写组建，我们可以使用一些现成的组建库来提升我们的开发效率， 比方说像什么 animate ui and d， 还有移动安的命程 ui 啊等等等等，非常之多，选择哪一个不 成问题，因为你只要精通了一个，其他的都触泪旁通。好，那么接下来就是无忧三了，很多同学说这个无忧三，无忧二，我到底选择哪一个呀？你为啥要选择呢？就像无忧和 rex， 你为啥要选择呢？ 你全都要不行吗？ vo 三是这几年比较火的一个版本，基本上的新项目啊，大部分是用 vo 三搭的，但是三年前的项目咋办？不要了，三库跑路了， 升级别再没有动力，升级运行的好好的，我为什么要花几十万的成本来升级呢？所以无忧三将会和无忧二长期共存， 所以学习顺序上先精通无忧二，无忧三水到渠成。那么在学习无忧三的时候，你重点关注他相对于无忧二做的哪些变化，你只要精通了无忧二，无忧三非常简单，同时呢，我们也会有一些面试题，对吧？像什么无忧三和无忧二有什么样的区别啊？从这几个方面去回答，就涵盖了数 左右的点了，那么最后搞定框架的笔面式，在无忧这一块会出各种各样的笔面试题，对于别人不会的呢，你得会，对于大家都会的呢，那你得回答的比别人更加精彩。你没有这些能力，你怎么去拿高薪啊？ 凭什么呀？好，那么对于整个无忧的知识体系，在咱们的课程里边，袁老师的做法是通过多门无忧课程，从不同的角度来对无忧做一个全面深刻的解析。首先在最开始的时候是一个无忧的零基础入门，在这一块我会使用一个贯穿始终的项目来对无忧的整个知识做一个全面的讲解。 然后我会针对这个项目的后台应用使用 view 组建库，这里我用的是 elements ui， 向大家介绍组建库的知识，然后接下来会使用一个单独的 view 三的课程，在 view 二的基础上给大家介绍 view 三跟 view 二到底有什么样的区别。在入门这一块，重点介绍 company， 写 api， 这是五又三的一个重大更新，然后再去介绍五又三和五又二的其他方面的差别。那就完了吗？还没结束，我还会带着大家对于一些主建库的源码进行剖析，自己尝试写一个主建库，看会写成什么样子。 那就完了吗？还没有，在第三个阶段，就在比面试环节，我还会针对无忧的各种比面试题，写出一个能够惊艳所有人的答案。常见的无忧面试题就这么一些，随便拿个看一下吧。比方说常见的生命周期，来看一下我写的生命周期，答案是什么样子。来看一下， 我都不用详细给你解释，你看一下，感受一下我这里写的他的步骤，看一下这些步骤跟你平时接触到的一样吗？你面试的时候不要说百分之百了，能够回答出百分之五六十。如果说是大厂的面试官呢？还稳得住？遇到一些中小型企业的面试官，那就被吓死了，他没见过这场面啊，为 为啥我们的学员能有百分之七八十的面试通过率，因为这样的回答吓死人的。他不是说一道面试题是这样子的，所有的都是啊，随便再看一个吧，你要看哪个吧？比方说 def 也是常见的面试题是吧？我跟你讲到啥程度了？语言嘛，拍你脸上了，而且还会给你解释，这个还需要做什么？这个还需要做什么？你看他到底要干什么？ 我给大家讲的面试题绝对不是让你去找一份工作了事，让你找一份工作就了事的话，我不用这么麻烦。我的目标就一个，要惊艳到大厂的面试官， 惊艳到什么程度呢？随便给大家找一个咱们同学的一个聊天截图，这是一位同学给我们的面试反馈，他目前呢，在未来汽车。面试官跟他说，他是唯一一个以大专生的身份去参加面试的，因为看到他的简历呢，还觉得不错，给了他一个机会，然后惊恐的画面就出现了，他的面试回答远远的超过了面 面试官的预期。面试官最后跟他说，虽然是一个大专生，但是他对知识的掌握的程度和深度已经远远超过了很多二幺幺的学生，这不是个例，来看一下这样的例子有多少呢？ 来吧，我们来随便玩一个游戏，随便划拉一下，看一下薪资范围，十几万的薪资在我们这那是白菜价， 二三十万是起点，五十万以上是目标。现在什么字节呀，百度啊，腾讯呀，都快成为杜一的老巢了，到处都是我们的学员。 所以咱们这个行业啊，有一个铁律，你想要多挣钱，你想要往上发展，就一个办法，就是学习，并且只有学习这一条路可走，没有别的办法。这些过来人呢，都是明白的，是吧？学多少你就能挣多少，多学一点呢，你就多值一点。说白了，能学习 这个行业的唯一晋升手段，而反过来，不能学习是这个行业的唯一淘汰原则。所以能跟着我学到这集视频的同学，我发自内心的跟你们讲，你们以后肯定不是一般人，我培养过上万的学员就业，能做到在短视频这种环境下边 还有定义去学习的，在我的学生里边，年薪都在四五十万以上，说实话，连我都很难做到在这种环境下边进行学习，但是你们做到了， 有这个镜头我告诉你，跟着我学，要求职的，我能保证你进大厂，在职提升的，想跳槽的，我能保证你年薪稳稳的过三十， 过三十算个啥呀？所以呢，我也想借这个机会啊，宣传一下我们自己。我由衷的建议啊，一直跟着我们学校的同学，你来了解一下我们的课程，袁老师肯定能够帮到你。整套课程呢，都是我主讲的，主 要帮助的就是在求职和提薪的同学。如果说你正在为这两件事努力，那么你不妨来看看，袁老师带着你系统的学习，至少能省你几年的功夫，而且还能够确保你高薪就职，这点实力袁老师是绝对有的。 咱们的课程呢，也不贵，如果有需要了解的同学呢，可以进咱们评论区第一条，进粉丝群，按照提示来找我们就可以了啊。其实买不买无所谓的，我们不强求，但是你可以先了解了解，职业生涯这么长，以后有需要随时可以来找我们。最后呢，也希望每一位不甘平庸的同学， 在前端这条路上，能够秉承终身学习的习惯，稳扎稳打，厚积而薄发。