Vue3怎么用vant表单组件

大家好，我是老王。呃，今天我给大家讲一下，呃，小程序使用 vip 总结库。 首先咱们到外特租借库的这个官网上，我把链接也放到咱们这个文件上面，嗯，就是这个地方包到这里，大家可以看一下 袜子组织裤，这是一个针对移动端的组织裤，这个组织裤还是很可以的，大家可以看一下，看这边是一些按钮， 各种样式的按钮，还有单元格， 还有这个啊，这个是 配置一些介绍，来看这些小图标啊，引入左节库，能够更加简化我们的代码， 这上面有很多不错的样式和布局什么的， 我给大家看一下，看这个是一个日期选择的， 这个是输入框， 搜索框上传文件， 还有什么啊？还有这个环形进度条， 这个进度 宫格格布局一般使用的 还有这个上面卡片，这个比较多。呃，我就不一一给大家看了，大家下去可以自己呃，看一下 我们的项目使用的是就是这个 rap 组业库，我给大家讲一下这个怎么使用的，我们要把它怎么导入咱们的项目， 看一下这个快速上手。这个地方，呃，咱们使用的 是 ntm 安装，这个咱们先把这个 考虑一下，然后咱们的项目是在这到咱们项目的这个地方，我用的是 windows 系统，输入 cmd， 呃，打开终端， 首先就是初始化一下项目 npm， 呃，给你，然后我回车，我这里就不给大家演示了， npm 引力回车初始化， 说实话项目我给大家看一下，我之前做的，我这边写的比较详细，在这个地方输入 cmd 回车技术周端，就是这个地方 npm ex 项目初始化，然后到这里结束，然后他这里会提示你这个项目的名字，你把你自己项目的名字写入这里就可以了，然后一直回车，回车，回车到这结束。 刚才咱们不是在这边复制了一个 npm 的指令吗？就是这个 npm 的指令，把这个复制下来，然后 然后到咱们的中端那里直接呃，把这个指令粘贴到这个地方，然后回车，然后他就在呃装咱们这个外套，外套的这个包 装完包之后呢，咱们到 a p p 点 j， a p p 点 j 三，然后把这个 style v 二这个东西去掉， 这个是因为外侧组件和这个有一些冲突，把这个去掉就可以了，这个是在啊，这是一点，这个地方哪了？对，在这个 windows 下面，这个地方会有一个三维二，咱们把这个干掉就行了，我这个已经干掉了。 呃，安装成功的时候，这个地方会出现一个漏的 models， 这个包 大家一步一步跟着来就可以，然后出现。呃，然后呢我给大家说一下这个地方， 这个构建 npm 这个地方，我这个地方我把那个包干掉了，因为一块有一点问题，大家先一步一步跟着来，出现那个包 之后，然后这边吧详情，然后本地设置，这边把这个基础库调成二点一，六点零的这个，然后勾勾上这个使用 npm 模块，还有 不掉页合法域名，这个这两个勾上，还有就是工具这边啊勾结 npm， 然后确定这样就 ok。 这两个讲的就是我刚才说的步骤。呃，还有就是引入，引入组件，对，我给大家找一下， 这个是这个不用管，他就用我感觉 呃哪去了？黄泉安装安装安装安装 主页啊？对，引入主页，他是在这个 app 点 j 森里面引入的这个东西，把这个呃跨币下来，二 c 跨币下来，然后放到这个地方， app 点 j 森下面的这个地方， 这个就是刚才咱们口碑的东西放到这个地方，咱们因为咱们做实验呢，用的是一个呃把铲用的是一个按钮， 引入这边之后，你在哪边想使用的话，你就在那边写上他的这个组件， 使用组件，这不是吗？把这个东西拷贝下来，然后呃放到你要使用的地方，就是这个地方，大家再放一个按钮， 按点二吧。 来，大家可以看到这个按钮就出现到这个地方了。 啊，这个地方还有点问题啊， 这个是我调整了之后，调整了之后他才能出现的。呃， 对，我给大家说一下这个地方，刚才我说我把那个包删掉了，干掉了是吧？ 不干掉那个包的话这边不会显示出来的，不干掉那个包，这边不是不会显示出来的。他会报一个错。 报什么错呢？就是这个他会报这个错，他说，呃这个组件不能找到，嗯，我觉得应该就是外的更新和这个咱们我的一些和咱们呃现有一些冲突吧，出现录取问题，我设计四也没有成功，但是我找到了另一个方法， 就是把那个，大家看一下，安装成功之后他会出现这个 nonodows， 咱们把这个，把这文件干掉，然后呃使用， 然后使用这个，呃，对，这个 mini program 高 npm 这个文件， 用这个文件替换掉那个就可以了。使用这个文件，这个文件呢我已经放到呃，这个百度网盘里了，大家自己提取就可以了，放进去之后这个报错就不会出现了，这边也就可以 可以渲染出来了。我再给大家找一个其他的吧。找一个什么好呢？嗯， 找一个商品卡片，对，使用哪个的话就把他就把他的这个呃，这个路径给他拷贝过来。放到哪合适呢？啊？我给看看 放到这个地方，他们是统一放到这个地方的 app 点这个放到这个地方，然后你要在哪里使用？对，这个你要在哪里使用 啊？我给你看一下，咱们还是在这个页面使用吧，放到这个地方， 哎，大家可以看一下，这个就出现了，这个地方是一个图片的一个 l， 咱们 我看行不行吧？我试一下放到这个地方， 然后从百度随便找一个图片， 啊？ 这个吧， 复制图片地址放过去看行不行 啊？放错位置了，放到这个里面行不行？ 哎，大家可以看一下，这个效果就出来了。 好的，这节课就讲到这里了。

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

今天我们抱着休闲态度绑一个小程序的页面，目的是为了更好的掌握我的这个主角库。我先来看一下人家做好这个小程序页面的排版，我觉得这个排版和布局非常不错，上面有个轮毂图，然后功能模块最后 详情一个展示，这个还是做的非常不错，所以说今天我们来模仿一下这个小程序。我这边呢准备是模仿三个模块，第一个就是这个摸图， 那么第二呢就是这一块功能模块，最后就是模仿一下下面这个商品。其实做这个小程序，我觉得第一步首先要下载整理一些图片素材，我这边呢通过适量的一个科技和横货搞了一上午啊，总算是把素材都拿到手了。 当然了，凡是你在网上能看到的这些视频了，或者图片文字这些内容，百分之九十呢，我这边都能帮你搞到手，剩下 百分之十当然也是可以的，但是就看阁下这个愿意出多少音量了，这个 车远了啊。第二步的话，其实就是结合站着这边过写一下这个代码，就可以把这些给做完了。我们看一下这个万的这个这边挂他其实这个样子啊，我觉得是不错的。最后我们来展示一下最终这个效果，首先呢首页嘛， 这个六张的摩托一模一样，然后下面呢就是些功能模块，不能说一模一样吧，对吧？一共百分之九十吧。然后 这个功能模块的展示，最下面的话，因为这个福利中心啊，因为他这个我为什么没写，因为这个我没有用到这个 y 的主角，所以说我觉得如果说写是可以写出来，但是没必要，因为我主要是想掌握一下这个外的主主价，如果没有用到我就不会写这个东西，包括下面这个门店比较简单， 想弄看一下下面的验货机啊，看一下这个他这个图片啊，这个字包括下面这些乱七八糟这些字啊，不想调了，一直不想弄了，简单的物理下去，其实这些东西稍微调一下都可以，跟这个 百分九十九一样，这个其实就用到这个外的这个主角库，我觉得这外的主角库还是非常不错啊，确实人家这个做的确实好，我当然这些素材素材其实都有啊，这个水杯 都有，但是怎么说呢？没必要做的东西，因为这个这个都一样，参数只要传过来之后啊，都都 我这边看速度都在这边都模拟出来，到时候我直接连接这个后端啊，在后端随便写写的调调个方法请求一下，就比如说像这个随便请求一下这些数据就可以请求到，因为现在我个我这个云开发里边聚库，我这个聚库还有这个云海处 乱七八糟都没写，是有，之前是有写过一些东西啊，怎么说呢？他这个和这个 不太符合，所以说我没写，因为主要是图片不一样，所以说没弄就难弄，所以说就弄了一些假数据，但是这个数据直接放到云端啊，直接到时候都可以放不出来，没有什么太大问题，包括下面这个 像这个商品一些详情，这个我都做了，这次给你弄一些假数据，这些假数据放到这个数据库里边，到时候 就变成等数据了，这边呢我也同样用，我们这个都都用到了，便利啊，都便利出来了，包括下面这个都通过便利啊都获取到这些数据。我觉得这个其实做出来还可以吗？我觉得其实做的这样其实和这个真的大差不差的，你可能一下 看出这个差距差太多，反正做的挺有模有样的。我只能说做的还可以吧，马马虎虎。其实当我写完整个页面，看到最终这个展示效果，我觉得还可以啊，其实有朝一日能够给我提供一个这样平台，我觉得我一定可以写出来比他们更好的一些代码， 但是当下还有很多小程序等着我去写，而且我目前这个计划是争取春节之前把这些都写完。突然想起这么一句话，世人慌慌张张不过是为了顺阴脊梁，偏偏这是顺阴脊梁，能解世间万众收藏， 能保这个老人万年安康，儿女入得学堂，柴米油盐，五谷杂粮。所以说上脸加油吧！把今天呢就分享到这里，没有什么可跟各位聊的，我觉得这个壁纸还蛮蛮不错的。 这壁纸还挺好看的。这个我今天新找的一张笔，我觉得非常不错，大家有空的话也可以看一下这个。这个主角布我觉得还是不错，良心推荐一下，可以玩一下这个。行，今天就到这里，咱们下期再见。

各位同学大家好，指甲的话我们主要给大家讲解一下这个 voe 三点插珠的组件以及自定义组件。 首先的话我们给大家看一下这个组件的一个简单介绍，组件的话可以拓展 h t m l 标签，解决 h t m l 标签构建应用的不足。 v u e 项目的话是由一个一个组件组成的，就比如说我们前边给大家讲的这个 a p p 点 v u e， 它其实就是一个组件儿，它是一个跟组件儿， 那在这个 a p p 点 v u e 这个跟组件里边，我们又可以挂在其他的组件，比如说挂在这个首页组件，挂在用户组件， 然后在这个首页组件里边又可以挂在这个头部组件哎底部组件，然后形成一个单页面应用。那接下来的话我们就给大家看一下在我们这个 v u e 里边如何自定义这个组 件，以及把这个组件挂在到我们这个勾组件里边。那这时候的话我们打开我们这个项目啊，打开以后给大家运行一下，这就是我们最简单的一个 vue 项目啊，最简单的一个 vue 项目。看一下啊，这里边的话输出一个 app 勾组件啊，因为这里边的话我们定义了一个 message ac 制的内容的话，就是 app 跟组件，最后把它渲染到我们这个页面上啊，那这样的话我们这个页面里边就输出一个 app 跟组件，然后接下来的话，我们首先自定义一个首页组件，那这时候的话，我们在这个 src 里边首先新建一个文件夹， 那这个文件夹的名称的话，我们叫 copynos 啊，然后接下来的话在这里边我们新建这个文件啊，这个文件的这个首字母的话建议大写啊，比如说接下来的话我们要新建一个 home 组件，那这时候的话就直接写个 home 点 优异，那这样的话我们这个 home 组件就设计好了，也就是我们这个首页组件就设计好了。设计好以后，然后接下来的话我们需要在这里边配置内容啊，那一个组件的话是由我们这个模板、业务逻辑以及这个 css 组成的，那这个的话我们在前边也给大家讲过啊，那这里边我们首先把这个模板复制过来， 复制过来以后这里边的话，比如说写一个叫首页组件啊，这里边我们写一个呃 h 五，然后这里边来个首页啊组件，这就是最简单的一个组件啊。当然正常情况我们这个组件里边的话应该有这个业务逻辑，所以这里边的话我们还需要定义这个 script 啊。 script 在 script 里边的话，我们把当前这个组件暴露出来，也就是通过 export default 进行暴露。在这里边的话我们可以定义这个数据啊，定义数据，那这个的话啊，和我们前边给大家讲的 在这个 app 点 vue 里边的写法是一样的啊，以前如何定义数据，现在的话也是如何定义啊？那这里边的话我们瑞托一个对象，对象里边的话比如说有个 title 啊， t i t l e， 然后这里边的话叫首页组件，最后的话我们可以把这个 title 绑定到我们这个页面上啊，绑定到这个页面上， 接下来的话我们在这里边也可以改一下这个 c s s 啊，那这时候的话叫啊 steal， 然后这里边的话我们给他指定这个 s c s s 啊，在前边的话我们已经把这个什么呢？ 呃，把这个 sashaller 啊，以及这个 notices 给它安装了，安装完成以后，我们就直接可以在这里边来配置我们这个 sass 了啊， 这时候的话我们配置一下这个 h 五的样式，然后它 test online 啊，一个 center， 那这样的话我们一个 home 组件就写好了啊，然后在这里边的话啊，你也可以定义方法，比如说这里边 话我们继续写啊，继续写，然后这里边的话定义一个叫 get title 的方法啊， t i t l e 的方法，然后在这里边的话我们偶尔提一下 this 点抬头啊，也就是这里边的代码和我们前边给大家讲的是一模一样的啊，然后这里边的话我们写个 button， 然后这里边的话触发这个方法 at 一个 click 啊 click， 然后等于我们这里边这个 get title 啊， get title， ok， 那这样的话这个组件就定义好了啊，定义好以后，然后接下来的话，我们需要在这个 app 点 vue 里边来挂在这个组件， 那这时候的话啊，我们首先需要在这个 a p p 点 v u e 里边引入我们这个 home， 点 v u e 啊，然后接下来的话我们找到这个 script， 然后在这的话引入啊，引入组件的话通过这个 input 来引入，然后这里边的话写你这个组件的名称，比如说就叫 home 啊，然后接下来 from 什么呢？ from 我们这个 home， 点 v o e 就是点杠，哎，点杠表示当前目录下边这个 components 里边这个 home， ok， 那这样的话我们就把这个 home 组件啊引入了， 比如以后，然后接下来的话，我们想在这个 a p p 点 v u e， 也就是跟组件里边来挂载它的话，哎，我们需要注册组件啊，注册组件的话，你就在这个钉头下边啊，然后和我们这个钉头评级啊，然后这里边写个 components 靠碰到词，然后这里边的话他是对象啊，稍等一下，叫靠碰的词啊，靠碰的词 com p o n e n t s， 然后这里边的话是个对象，对象里边的话，我们直接把这个 home 组件放到这，这表示挂在组件啊，挂在组件 啊，也就是我们要用一个组件的话，首先需要引入啊，然后接下来的话需要挂载啊，首先第一步这叫引 入组件啊，这里边给大家备注一下，引入组件，然后接下来第二步挂载组件。挂载好以后，然后接下来的话，我们就可以在我们这个模板里边来使用它了，也就是把这个 home 当做一个 html 标签来使用它。这里边的话，比如说我们写个 a 叉， 然后接下来的话，这里边直接把这个 home 标签放到这啊，这就是我们这个 v u e 里边的组件，它可以干什么呢？它可以解决 h t m l 标签构建应用的不足，然后拓展我们这个 h t m l 标签 啊，那这里边这个 home 的话，它其实就是一个组件，在这个组件里边的话，呃，是不？呃是不写了个 h 五啊，然后这里边写个按钮，那接下来的话我们给大家运行一下啊，那这里边运行一下，运行完成以后看一下这里边有个首页组件，对吧？在我们这个 a p p 跟组件里边，然后下边的话有个首页组件，那这个首页 组件的话，就是我们在这个 app 跟组件里边挂着的这个 home 点 voe 啊，然后这里边的话我们叫获取这个抬头啊，获取这个 home 组件， home 组件里面的抬头，那这时候的话我们给大家运行一下啊，这时候的话运行一下 啊，预计完成以后点一下，看一下首页组件是不获取到了啊，这是首页组件里边的开头，那这样的话我们就可以获取到了，这就是在我们这个 vue 里边，如何去定义这个组件以及挂在组件啊？那接下来的话我们再继续， 那在我们这个 home 组件里边，也就是首页组件里边，我们还可以挂在其他的组件，比如说挂在这个头部组件，或者挂在这个底部组件。那接下来的话我们再给大家演示一下啊，那这时候的话我们再找到这个 copynos， 然后再新建一个头部组件啊，这里边的话叫 handle 点 v u e 啊， h e a d e r hand 点 v u e。 在这里边的话啊，我们配置我们这个模板，模板的话就叫 capitate 啊，然后接下来的话再写我们这个业务逻辑，业务逻辑的话就是这个 script， 然后这里边再定义我们这个 c s s c s s 的话就叫 still 啊， 在这个 style 里边的话，我们可以配置它用这个 sass 还是 less 啊？那这里边的话我们用的是 sass s c s s 然后在这的话我们还可以给它加一个 scope 的属性啊， s c o p e 啊，这个表是什么意思呢？表示让我们这个 c s s 只有在我们当前这个组件里边有效啊，也就是这里边这个 scopt 啊，表示我们这个 c s s 是一个局部作用域啊， 啊？表示我们这个 c s s 是一个局部作用域啊，那这时候的话我们把它放在放在哪呢？放在这啊，放在这， ok 啊，那这时候的话 我们在在这再写啊，比如说这里边的话，我们定义我们这个头部在我们这个 voe 三点叉里边啊，你这里边的话不需要定义这个根，也就是直接写啊，以前在这个 voe 二点叉里边的话，所有内容要放在一个根里边， 在我们这个 v u e 三点叉里边，你直接写我们这个代码就可以的啊。这里边的话我们定一个 hide， hide 的话写一个，我是一个头部组件啊，头部组件，然后接下来的话这里边第一点钥匙，那这里边的话第一点钥匙给我们这个 hide 标签定这个钥匙啊。 呃，这里边的话来一个宽度啊，宽度的话来个百分之百，宽度来个百分之百，然后高度的话来一个四十四 px 啊，高度四十四 px。 然后再来一个 test alive 一个 center 啊， test go alive 一个 center， 然后接下来的话，呃，再来一个行高，行高也是一个四十 四 px。 来个背景颜色，背景颜色来一个黑色啊， bank girl 的一个井号零零零啊，井号零零零。最后的话我们再来个颜色，颜色的话让他，呃，来个 f f 啊，井号 f f， ok， 这就是我们这个头部组件就定义好了啊， 然后接下来的话，我们想要在这个 home 组件里边引入这个头部组件，那这时候的话啊，我们首先需要在这是不引入它，那这里边的话通过 input， 然后这里边来个 handle 啊， h e i d r handle from from 什么呢？ f r o m from， 我们这个叫点杠啊，注意这时候的话他俩在同一级里边，所以这里边的话直接点杠喊点。 最后的话我们在这里边注册这个组件，注册组件的话叫 coponent， 然后接下来的话这里边写个 handler， 那这样的话就可以注册这个组件了啊，但是要注意这个 handler 的话，和我们这个 html 标签里边的 handler 是不非 非常相似啊。所以啊，注册组件的时候你不要直接这样写，比如说这里边引入他的时候啊，你不要这样去引入，这样引入以后啊，你会发现这个标签和我们这个 h t m l 里边的标签是不是就冲突了，所以要注意一下啊。 还有就是我们注册组件的时候有两种写法，一种的话直接这样写，另一种的话我们也可以这样写啊，这里边的话我们可以写一个叫 vgar header， 那这里边可以写个 we got header， 等于这个 header， 那这样的话我们在这个页面上渲染我们这个 header 组件的时候 啊，就需要这样写了，这里边直接写个 v 杠 handle 啊， v 杠 handle 就可以渲染我们这个组件，那这时候的话我们再给大家运行一下啊，运行以后你看一下这里边是不是出来一个，我是一个头部组件，最上面的话是我们这个根组件啊，那我们也可以把这个根组件里边这个内容给他去掉啊， 这个去掉，那这样的话啊，看上去是不是就像一个什么呢？像一个呃完整的项目了，哎，这是我们这个头部组件，然后这是我们这个首页组件啊，这是这个首页组件啊，这就是我们这个 vue 里边如何去自定义组件以及挂在组件啊？ 那现在的话我们还没有给大家讲路由啊，讲完路由以后，然后接下来的话，我们就可以让这个 a p p 组件来动态的挂在这些组件， 这样的话我们就可以实现一个单页面应用啊。现在的话我们要挂载这些组件的话，需要首都挂载。比如说接下来的话，我们再新建一个 user 的组件啊，那这时候的话，我们在这里边再新建一个啊， user 调 v u e， 那这样的话又新建了一个 user 的组件，在这里边的话，同样的有我们这个 tappet， 有这个 script 以及这个 still 啊，那这里边的话我们给大家写一下 啊， user 组件，然后这里边的话我们就直接写个。哎，我是一个 user 组件啊，我是一个用户组件啊，我是一个用户组件，在这个用户组件里边的话，我们循环便利点数据啊，这里边啊写个 data， 然后这里边 reto 一个。呃， user list 啊，或者我们直接 reto 一个 list， 让它是一个空的数组，然后接下来的话，我们在这里边加载的时候啊，给这个 list 里边铺实点数据，那这时候的话，我们是不是可以写个 moti 的？ moti 的表示什么意思啊？表示我们这个组件挂在的时候，然后它触发的一个生命周期函数啊，那这里边我们写个 for 循环 啊， for 一个 v r i 等于零， i 等于零，然后让 i 小于十， i 加加啊， i 加加。我们给这个 list 里边增加点数据啊，这时候的话让这个 this 点 list 啊，点一个 push 啊， p u s h 啊，护士，然后这里边来个啊，我是 d 什么呢？ d i 条数据啊，那这里边我们也可以用一个模板支付串啊， es 六里边的模板支付串，我是 d 啊，然后这里边来个 dollar， 稍等，来个 dollar， 然后这里边来个 i 啊，后边再来个条数据啊， 那最后的话，我们把这个类似的渲染到我们这个页面上，那这里边的话写个 br 啊，这就是我们这个用户组件啊，这里边的话我们就简单的给大家写一下，给大家演示一下，在我们这个字第一组件里边啊，这个写法和我们前边的写法都是一样的啊，这里边写个 v 杠负 啊， we got four。 然后这里边来个 item or index 啊， index 应什么呢？因我们这里边这个 list 最后的话，我们指定这个 k 啊， k y k 的话等于什么呢啊？ k 的话等于，这里边这个叫 index 等于 index。 最后的话我们在这里 里边来渲染这个数据啊，在这渲染这个数据，呃，这里边的话应该叫什么啊？这里边的话应该叫我们这个 item 啊， ok 啊，这样的话我们这个 user 组件就搞定了啊，搞定以后我们这里边也可以写钥匙，比如说让这个 u l 啊 u l 的这个 list stealtep 啊， list 啊，类似的 style type 等于个闹啊，稍等一下，类似的啊 style 啊，类 style 等于个闹啊 o n e o n e ok， 那这样的话就搞定了啊，那这个用户组件定义好以后，然后接下来的话，我们再在这个勾组件里边引入一下我们这个用户组件啊，引入一下这个 user 组件啊，这里边叫 user， 然后接下来的话我们再注册一下啊，再注册一下，注册完成以后，然后接下来的话，我们给大家看一下，在我们这个勾组件里边能不能同时引入我们这个首页组件以及我们这个用户组件啊？那这里边的话 可以的，那这时候的话我们再给大家运行一下，看一下，上边的话是我们这个首页组件，下边的话就是我们这个用户组件啊，没问题， 那接下来的话我们再给大家看一下刚开始给大家说的这个，呃， scorpt 啊， scorpt， 就比如说啊，现在的话，我们在这个调上边不给他加这个 scorpt， 哎，我们给大家看一下什么效果啊？ 接下来的话，我们在这个 user 里边，我们也给他定义一个 handle， 仔细看啊，这里边来 handle， 然后这里边写，我是啊，用户的头部啊，我是用户组件组件的头部，然后接下来我们运行一下，你看一下 啊，在我们这个头部组件啊，在我们这个首页对应的头部组件里边，我们是不给他定义了这个 css 样式啊，在这里边定义了 css 样式，但是在我们这个用户啊， user 对应的这个组件里边并没有 写我们这个 hider 对应的这个钥匙。那这里边如果不加这个 scorp 的话啊，无论你在哪个组件里边都会应用这里边这个钥匙，那这时候的话，你看一下，在我们这个用户组件啊，和我们这个首页组件里边，是不都应用了我们这个头部组件里边的钥匙啊？ 如果我们想的是，哎，这个头部组件的钥匙只有在我们当前组件有效的话，那这时候的话，你就在这里边加个 scoff 啊，加 scoff 啊，这里边的话应该叫 sculpt 啊，重新写一下 s， c， o， p， e， d 啊， sculpt 这个的话，我们刚开始给大家写错了，这里边叫 sculpt， 那这时候我们再给大家看一下啊，看一下，哎，在我们这个头部组件里边是不是应用了这个钥匙啊？但是在我们这个用户组件里边啊，这个头部他是不是就没有应用这个钥匙啊？行啊，那支架的话我们就给大家先讲到这支架的话，主要给大家讲解 什么是我们这个 vue 里边的组件，它主要功能是什么？主要功能的话就是解决我们这个 html 标签构建应用的不足啊。然后接下来又给大家讲了在我们这个 vue 项目里边如何去自定义一个组件，以及如何去挂载一个组件啊。目前的话我们这个组件都是手动挂载的。 后期我们给大家讲完这个路由以后，哎，我们要动态的根据我们这个地址去挂在我们这个组件啊，行，那这样的话我们就给大家先讲到这。

哈喽，各位观众大家好，今天我们来学习一下第十五章全局组建、局部组建以及地规组建的一个用法。 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， 这个这个的话就是一个地规组建的一个用法。

叫表单主见啊叫表单主见啊，里面是定这些个表单啊标签的啊，我们一起来看一下啊还是呢在 ap 中啊，咱们俩去引入一个啊 from 啊 from 当前目前面的啊 from 啊，好，也是把它去注册出来啊注册出来，然后呢，咱们在 ap 中去使用一下 这一组表达那个主见，好，在这里面去新建一个放别 view 啊，好 template。 嗯，好，那表单主见呢就是用来定义表单标签的啊。首先第一个啊，叫这个万的 seuter 啊，万的 seuter 表示输入框啊，表示输入框也是啊， 哎，大家呢，以后在工作中啊，去这里面看，找到这个，哎主见，哎，看都有哪些属性对吧，哎哪些属性在下面在下面对吧，哎。 有没有叉槽啊？有没有方法，有没有射箭呢？有没有子标子这个主箭呢？下面都有啊啊然后呢右侧对应他的这个效果对吧，你看这个样式都给咱们写好了啊，对吧，然后呢上面是他的一个展示的一个用力啊，所以说大家呢，以后在工作中使用这个弯道的时候呢，把这个文档好好去看一看啊。 好了，那就是啊，哎 one 的 filter 哎，然后也是注意他的啊，这个内容就是前面这个文本在哪定义呢？嗯注意在他的这个里面去定义，在标签里面去定义啊，然后呢这个用法跟我们的音铺的一样，音铺的里面有 plates holder， 对吧 对吧，哎，这个莱宝比如做他的文案是吧，还有微钢包的绑定数据对吧啊等等都可以啊，比如说呢，我们给他一个啊，莱宝显示什么呢？显示啊，这个是啊，用户名啊，就出现左色啊然后呢可以 可以用 v 杠 model 把那个数据啊 massage 对吧哎咱们在下面来看一下啊这个差不多 massage， 哎然后这样的话咱们得在下面去定一下对吧哎定一下哎定一下。这个啊对的 嘴唇啊 max 也只吃一个啊。哈喽当然呢我们还可以给他定义 place hold 提示完是吧 哎等于啊，请输入用户名哎好，那么这样的话我们去刷新啊一看咱们输框就出来了对吧我们在这里面可以去输入哎都清空了显示请输用户名跟下面是不是实现一个数据所用把那个 哎这是这个 field 啊还有这个是力啊叫 wentcandancanda 也是直接去使用啊直接去使用 哎万的 candy 啊嗯好了然后呢此时我们要去刷新注意看啊注意看，一刷新他并没有出来此时赶紧怎么办。看一下他的这个约库会告诉你你想他出来怎么办他有一个属性控制他的嫌隐啊控制他的嫌隐。呃叫什么呢？叫 哎这里边有一个属性啊控制他的一个显影啊。看上面这个呃案例啊呃这是啊这这能看的啊这个不要点错啊有一个属性控制他的一个显影 呃我们找一下找一下。这个是叫呃搜索一下啊，应该是这个是瘦啊。 嗯呃 嗯来看一下啊这有一个 v 刚摸到是一个瘦，表示他是否啊显示出来啊表示他是否显示出来啊。呃 啊来看一下啊比如说呢我们给他一个微缸 model 等于一个一兽啊那么如果这个一兽是一个处哎他就显示出来了啊 啊是个处啊。嗯好了，那么此时我们一刷新注意看这个日历是不是出来了，对吧，哎，可以在这里去选择一个日期啊，总之呢，哎，用这个优越库非常的方便啊，啊，再来就是搜索框啊，这个万的色尺跟我们这个输入框类似啊，跟我们输入框类似啊，万的色尺啊，这是， 哎，搜索框啊，搜索框啊，好了，我们一刷新注意看搜索框，哎，在下面出来了，哎，我们可以带你们去输入搜索框有什么功能啊，对吧，哎，我们可以在这里面给他清除掉，比如咱们给他绑定一个数据啊，比如说给他绑定了一个叫煤钢 model 啊，等于一个， 哎， carry 啊，这个 carry。 嗯嗯，哈喽 啊，好了，这一看啊，我们在下面去输入啊，给他去啊，先给他清空，看后面有个小关闭按钮，是吧，我们一点击是不是给他清空了， 对吧，哎，总算是一个搜索框啊，哎，总是证明主见挺多的，哎，包括这个滑块啊，啊，评分啊，咱们看一个就行了啊，比如说给咱们做一个评分啊，一般我们一会点这个外卖是吧，都有这个评分啊，比如说五星好评是吧，哎，那么我们可以给他一个 啊， v 刚 model 啊，等于一个 number， 哎，啊，比如说给他评个三分啊，给他一个三啊，好了，那么注意看啊，此时这个评分你看是不是显示三个星啊， 对吧，哎，显然这个三个星啊平分，总之呢，这里面这个主见还挺多的，大家回去自己去看一看啊。嗯，行，这是这个表单主见啊。

好，注意看，我们静态页面上呢，有这么一个星级评分，它的 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， 写的方式也一样，用他的属性名作为组件的名字，用组件配置对象作为属性的值，对吧？你看跟这里说道理是一样的，给组件取个名字，然后呢， 组件的配置对象，这里也是给组件取个名字，然后组件的配置对象，那么这样一来，在这个实力里边也可以使用这个组件保存，你看仍然有效。那么至于说这个全局注册和局部注册到底有什么样的区别， 将来我们在开发当中到底使用全剧注册好一些呢？还是使用局部注册好一些呢？这个问题先暂时放一放，因为这一块涉及到一些工程化的知识， 袁老师可以暂时的告诉你，在开发当中尽量使用局部注册，少去使用全局注册，将来呢我会进行详细的解释。 路得一步一步走，知识呢得一口一口吃。主见是一块非常庞大的知识，不过呢，通过这节课，我们已经能够初步的体验到主见的威力，就这么一个简单的主见，他就可以减少我们很多的代码。当然这个主见里边还有各种各样的问题，我们一步一步来处理。

哈喽，各位观众朋友们，大家好，今天我们来学习这个维三的第十五章，那全局组建，局部组建和这个地规组建其实还有两个，还有两个是什么呢？是这个动态组建跟这个义部组建啊，那两个我们就到这个下一章来讲。那么今天主要是来搞这三个， 那全局组建他使用场景是什么呢？比如说我们在后台管理系统吧，他可能使用这个表格呀、按钮啊、这个文本框啊，这些用的比较多，然后我们就可以把它封装成这个全局组建，就是无需要在引路了，直接就可以去使用 啊，这个就是全局组建，那局部组建呢？局部组建可能就是使用频率不高的一些，那可能就在比如说我在 a 组建里边去使用一下这个 b 组建，然后我就通过引炮这种形式引入，然后去使用，然后我在 c 组建呢，也用一下这个 b 组建，然后我再引炮去引炮，他进来 去使用，那这种就称之为这个局部组建。然后最后一个是地规组建，地规组建他其实跟我们写界色地规是差不多的，就是自身去调用这个自身，然后需要一个条件的来结束这个地规，否则会导致这个内存线路 ok， 然后让我们来看一下这个代码，那么今天就简单的封装一个这个全局组建，封装一个 card， ok， 然后我们用这个 vu e 三，好的 靠的是什么？他其实就是一个小卡片，那他大概能长这样子，其实这个工作中用的，我反正我这用的是挺多， 下面呢是内容，然后呢上面有两个标题，这是主标题啊，副标题啊，这些都可以去自定义，大概就是长这样子，一个东西，如果简单来服装一下。好的，首先他是上下两块， ok， 然后上面他还有这个左右标题啊，这样子有个这个主标题，这两个标题呢，大家都可以通过我们昨天讲的 pops 去给他传进来啊，我这就先演示一下 副标题，咱们就只传内容，今天， ok， 我们通过这个底范 props 给他接收一下， 还是使用这种发型字面料模式，嗯， pros 是这个卡片卡，他是一个 three， 他是非币穿的， ok， 他是一个函数，然后我们把这个发型给他传进去， ok， 然后这我们就可以用这个抗态的这个，然后我们这加个条件啊， 就是当你传了的时候，我再去这个给你显示下面这块部分，不然就不显示了， 然后简单的布一下这个局。 card， 我们来使用这个 nice 跟这个 stop， 对，大家不要忘记按了 card， 这是头部 看的。嗨的， ok， 这块就是抗派克成的， 然后我们给他一个线吧，我们定个边料，然后包的，嗯， ccc 吧， 给他来个线手里的，然后是一个勾的， ok， 然后我们这个嗨的呢，我们先 dp like， 要把它变成一行，然后我们再让他靠边，我们使用这个 jastify content spice begun， ok， 然后我们再给他来点这个陪顶，再给他来个下边，下边这个线 还是使用我们这个包的， ok， 然后这个康泰克斯，康泰克，我们就随便给他来点胚粒就可以了。 好的，那大概是这样子，然后我们怎么去使用呢？使用的话我们就给他全局去注册一下，那我们可以在这个慢点 ts 里边，那或者呢你把它单独提到一个 ts 里边也可以啊，都行。首先我们先引入一下啊，这个 car 是这个 compart， 在下面这个 card， 然后是这个 index develop， ok， 那我们怎么去注册呢？是跟在这个可以的 app 后面，然后再点一下这个 compartent， 那就可以了。然后第一个参数是这个名字， 名字我们是随便写的，比如我们就就叫他炕，后面是跟着我们这个组建的实力，也就是我们过来这个炕了。 然后这两个门我就先弄得一样的，大家不能放到这个 mone 这个后面，这是一个链式钓友啊，就是这个可以的 app 会返回他自身的实力的，让你去做这个链式钓友。但是你放到这个 mone 的后面，他就没有这个抗炮弹的这个东西了，就是他就返回一个别的东西了， 所以说大家跟在这个 ktv 后面就可以了，那这样子就是全局入全局注册，然后就不需要再引入了，然后直接就可以使用了。我们先看一下我们这个页面， 那么就把这里边内容给他替换一下，那是在这个卡太克下面，那么直接在这写一个 car， ok， 然后这个 come tex， 然后我们给他写个这个模板字串，这种形式我是第几个？ 然后我们把这个艾特我给他传进去，这个艾特就是循环这个啊，一到一百， 然后我们直接保存就可以了。我们才发现那主标题副标题我是什么？第一个、第二个、第三个、第四个啊？出来，然后我们给他来个阴影， 这个鼠标划上去，给他来个 box 虾的，给他来个四边营养， 还是这个波的。对，我们划上去给他来个阴影，大概是这样子， 那这样一个小卡片就封装成了，就可以在任何地方去使用它，比如说我可以在这个 menu 里边，我这也能用 card 啊，这也是可以的啊，在哪都能用，这是没内容而已啊，这就是全局组建， ok， 那什么是这个局部组建呢？那其实这种方式呢？他就称之为局部组建，那我们只在这个 excel view 去用了这三个组建， 而且是通过这种引炮的方式去引入的，所以说他只能在这个引带子的微友去使用，你如果你要在别的地方去使用呢？你就再重新去引入 这种方式，就是这个局部组建， ok， 然后我们来讲这个地规组建啊，这个稍微麻烦一点，我们给他建一个脆， 让我们见一个，应该有点脑子。有这样子，咱们在初始画一下。 ok， 我们给他放到这个美女下边吧，就给他放这吧，那我们把我们这个吹给他引入一下， 咱们点点杠，点点杠，这个 ctrl 粉丝下面的吹这个， ok， 那我们给他下面注册一下， 然后我们给他定义一个数据类型，就是不确定层级的一个数结构啊， 就是为了演示这个地规，因为他的层级是可以不固定的。 ok， 然后我们定一个这个吹， 首先他要有这个内幕名字嘛，这个 ico 这个图标可有可无，还有这个丘准，那是他的子集，他的子集是什么类型的？那就是把这个对象呢？再给他欠套一层， 这是吹粒子头的一个速度，当然他还可能为这个空速度或者是这个丘准呢，他可以都没有啊，这样子， 然后我们去定一下这个数据格式啊，要对他等于这个 锤利斯村 一个数组啊，然后里面呢有对象，对象里面有这个内容，比方叫 no 点一， ok， 然后他下面有这个，求准， 丘准下面有这个内容， o 点一杠一啊，这样子，我看下面呢还可能再有丘准，这个反正这层级是不固定的，就呃有多少都可以， 再来一个一杠一杠一， ok， 那么再来个第二个 就是 n o 二，他下面只有一个球准，我们演示一下， 就是二杠一，然后呢再来一个第三层，第三层，第三层我们就什么都不写，我们就不写，求证， ok， 然后我们把这个 d 弹给他传进去。啊啊？这传单方式大家应该还记得，通过这种方式我们给他传进去，然后我们在这个书里边接收一下啊？还是通过这个，那抵发这个 prose， 我们接收一下。这个是推塔，他的类型是什么？他的类型我们给他粘过来吧， 他的类型其实就是这个，大家可以把这个提到一个介字里边去，然后给他导出就可以了，然后就不用去写两遍了，我这就 偷个懒，好吧，大家一定要把他提出去，那我这就给天丹他偷个懒， ok， 他是一个吹力，是他的一个数组，然后我们把它给他放进去， ok， 然后我们直接就可以用这个 date 了，然后我们刷新一点啊，这个已经传过来了，他是一个数组，数组的话我们肯定要干什么？肯定是要 v 杠 fo， 所以说我们这我们先来一次 v 杠 fo 啊， 循环这个得一躺， ok， 能说出来这个 it， 然后忘了给 k 了，那我这没有唯一值，我还是给这个你 nice， 就是大家如果遇到这种格式的话，后台一一般都会给个 id 的，大家给他搞 id 就行了。 ok， 那现在呢，其实就是循环了三次，这是第一层，这是第二层，这是第三层，但是里边呢，还有好几层呢， 我们肯定不可以在里边再套套这个微杠，凤凰，人家有一百次，我们还要写一百遍，是吧？肯定是不可以的，所以说这时候我们就要使用这个地规主界了。那么先演示这种第一种方式啊， 第一种方式就是什么？就是直接那把他自身给他引入，比如说我们的这个吹艾特，这个路径是哪呢？路径就是他自己，那就是 吹下面这个应该有点胃口，那我们再把他自己给他引一遍啊，就是这样子。那这个报错呢？大家可以先忽略啊，是可以用的。这样， 然后我们直接在上面写就行了。那我们传什么呢？我们这接收一个得他得他，其实是什么呢？其实就是这个。哎，他们里边这个丘准， 对，其实就是他里边这个丘准的，他让我们给他一个结束条件，结束条件是什么？他里边这个没有丘准的，我们就给他提， 这时候我们可以用一个语法糖，就是这样，这样，那我一会来解释一下这个问号，点问号 是什么意思？ ok， 然后我们先这样写，然后我们读一下艾特这个内部。 ok， 大家可以看到，其实呢已经把每一层的给他递归出来了， 你放大一点，我们给他来点这个编剧啊，麻汁这个 left 啊，这样看其实已经已经递归出来，一层一层的 l， 下面的就你，无论你下面还有什么别的，他都可以帮你去递归出来， 我们可以再搞一个， 比如我这来个四， 我给他来个空的，这样也是可以的。那完全没有问题，你有多少我帮你炫耀多少，直到你里边没有这个丘疹， 那我就停了。那这是第一种方式，但是这种方式的话他会有这个报错，而且非常不好，然后让我们来演示第二种方式。第二种方式其实就跟我们写一个一二是一样的， 给我们这个组建的第一个内部，但是这个赛道他是没有办法去第一内部，那我们怎么去第一内部呢？ 那我们只能再写一个死扣的标签，记住他这个语言要一样，你这用的 ts， 你下面必须也得使用，不然他们可以报错的。然后这时候我们就可以去一个 sport dfot， dfot 一个什么 default 内部出来，内部是什么？就是这个 tree item， 对，就是他自身。哎，这样子就可以了，那既不报错呢？然后我们这个组建的颜色呢？也变回正常了，也是完全没有问题的。这是两种方式啊，其实都 可以的，他对外暴露一个内部出来啊，这就是地规组建。然后我们还可以给他自定义一些事件，比如说我们可以给他来一个 克里克，嗯，克里克艾特，那我们把这个艾特给他穿里边去，那我们这儿需要定一下注册一下这个事件啊。 ok， 然后我们这接受一个什么？接受一个这个艾特，他的数据类型是什么类型的？他的数据类型其实就是这个吹例子。 ok， 我可以烙一下， 就点这个，点这个点这个， 那没有问题，然后我们通过什么底翻这个一米左右给他派出去就叫昂杠克里克，他返回一个是函数啊，大家应该还记得， 那我是尽可能多的给大家演示一下这些封装也组建，就是让他，让大家这个以后呢学会这些封装，还是这个。 ok， 那我们把这个艾特给他，再给他拍回去。 ok， 然后我们在这个美女里面就可以收到了，收到这个翠传过来的东西，这个叫什么来着？这个叫昂克力克， 就是一个 ok item， 然后手机类型还是这个吹裂。 ok， 那我们输出一下这个是不同线的 item， 然后是在这个脆啊，我们这的咳嗽已经删掉了，那么直接点这个就可以了。副组建的已经收到了，点这个点这个没有问题，当我们再去点里边的时候，你会发现有问题，比如说我点这个一杠一， 他还是这个一，我比如说我点这个一杠一杠一，他还是这个一，那这时候就出问题了，比如说我再点这个二杠一， 他输出的是二，而不是他，这时候是什么问题呢？我们可以看一下。对，其实我们点的呢 还是这个穿着艾特呢？其实只是当前这第一层的艾特，那我们这个吹艾特呢？其实这自身的组建呢？他并没有帮我们把这个事件呢派发出来，就是你自身掉自身的时候，记住这个自身的组建呢，要把这个 这个伊米特里边这个事件呢也要派发出来，就这个，那自己再派一遍自己这样子， 然后吃这个可敌可爱他， ok， 那这样子就好了，他又可以去读到了，因为我们我们如果不写这个呢，他点进的永远只是这第一层， 那么这第二层、第三层是什么呢？其实就是通过我们这个自身的组建呢，去往下进行的，所以说他也要去往外派这个东西，不然你永远在第一层没有什么用。然后我们 再点这个一杠一，你会发现这时候一杠一呢就出来了，再点这个一杠一杠一，那也就出来了，再点这个二杠一 啊，也好了啊，大概是这样子。好的，那我们再来看一下， ok， 发现是这个一杠一杠一，其实这样说出是没有问题，但是他为什么打赢了三遍呢？其实是这样子的，其实我们在这里边点的呢，不也是他自己吗？然后他冒泡了，咱们给他来个 stop 就可以了， 这样子就没什么问题，点他点他，再点他，点他点他，那都没有问题了， ok。

不做前端的人可能会觉得，哎呀，我这个页面上这些东西都是他们一个个写的，对吧？其实不是，你看啊，你看他是足垫库里边，你看按钮，看到没？这是一个按钮，他各式各样的按钮，大的小的啊，各种各样的图片的展示 啊，包括各种，你看咱经常在页面上见到各种弹窗，看到没？你看不同位置的弹窗啊，其实这些 都是很包括，你看啊，这个啊，我跟你讲这个，这个是日历吗？对不对？日历功能手机上经常会遇到吧， 对不对？各种日历功能，你看啊，其实到时候你比如说页面上我需要一个日历功能，我只需要安装这个组建库，你看在只需要这样引引入进来，然后再写这么一个标签，对，然后再写他对应的一些一个手信，然后他对应的 方法，然后这个功能就完成了。也就说比如说我们今天遇到一个需求，我要实现一个某个功能啊，那有线上的组建，很快很快就搞定，但是如果说这个东西让你自己手动去写的话，那我就 会费很长很长的时间。所以说你说这个开发难吗？也不难哦，好像一天就是用别人的轮子在这去堆堆啊，但是说不难吗？好像也难 啊，永远这样用别人的轮子堆，不是所有的场景都让你能堆，对不对？但是所以做一定程度啊，自己也要能够写轮子，你要能够达到这种境界，我觉得就就很厉害了， 所以我觉得我们用的开心，对吧？但是在用的过程当中也多去向一些优秀的框架去学习 学习别人的，你比如说哦，自己什么时候能够去封装类似这么多的一些组建让别人用，那就是牛逼的。

好，接下来呢我们还是有组建相关的一些内容的，比如说有动态组建和一股组建。那这节课呢，我们就先把第一块搞定啊，就这个动态组建。那这呢先给大家讲一下动态组建可能在什么样的场景下呢？会用到，好吧，我们先登录到学习路线点私信这个网站啊，对了，说一下啊，就是咱这课程笔记是在这个这的啊，学习路线点私信这个网站，然后进去以后呢这有个下载资料，好吧，行，那我们就先说这个动态组件的功能了啊， 那我现在点击到这个简历这个板块进来以后呢，明显这呢是一个 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， 然后呢，动态去切换它，去切换组件好了。那么有关于动态组件呢，我们就先说到这里。

好，这里呢，我用一节课几分钟的时间，让你彻底搞清楚在 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， 那就无所不能了，想咋玩咋玩。不过呢，常见的方式呢？就这么一些啊。