vue3用nanoid咋用来

假如说咱现在要做一个系统，做一个什么样的系统呢？比如说这里有一个登录啊，啊，输入用户名密码，一点登录，然后就会跳转到一个系统里面了，这就一个系统啊，然后这个系统大家可以看到啊，他这个啊上面呢有一些菜单，用画图给他打开，大家看啊， 这管理系统进来之后，上面呢他会有一些菜单啊，比如说这个，呃，资料审核呀，发票啊等等等等之类的啊。然后左侧呢也有一些菜单，然后右侧的主体内容呢，是一个 呃显示正常系统功能的一个页面啊，那点击这些列表或者翻页的话，都都能实现一个跳转啊，那咱们如果说想实现一个这种系统的话，肯定是需要这种 页面跳转的功能了，但是咱之前讲的那个 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 啊，那他就会切换到博客的这个页了啊，就是一个这个切换的功能。

刚才说加一个登录啊，登录功能，那我怎么给这个加登录功能呢？首先我肯定是需要有一个登录这个组件的，对吧？那就是烙个印，烙个印点 beau， 然后我需要做一个路由的一个配置，我需要得跳转到烙个印。啊，跳转到登录页。啊，那就是 在这老给你的一个路径，然后调整到老给你主驾，我需要把老给你引进来，老给你， 然后这里老给你保存，然后再看看能不能跳转到登录页。啊，这个写杠上，我就写老给你了。啊，那这个页面老给我没写东西呢，是吧？啊？加一个参普的 h 一，这是登录页保存，嗯，好，登录页对吧？啊，那登录页的话我给他加一个表单。登录页加一个表单啊，用户名和密码吗？是吧？啊，那我这里写一下， 嗯，放，然后这里有音铺子，这个这么写 d i v， 然后雷博，雷博是用户名，下面是一个音铺子， 这个输入用户名，下面这个呢？输入密码， 密码，然后这个 tiphone 是帕斯沃的，然后下面还有一个登录的按钮， 登录的按钮，然后咱看一下这登录页啊，哎，用名密码点击登录的时候，我现在实现什么功能呢？点击登录的时候跳转到跳转到刚才的列表页。啊，那我现在写一下点击登录跳转到列表页，怎么写呢？ 首先一个表单提交的事件，对吧？啊？艾特可立刻等于。啊，这个因为是表单提交啊，所以表单提交默认的话他会刷新页面，所以我需要写一个陪伴他实现一个。呃，去掉默认行为，他就不会刷新了。 然后我登录的时候呢，这块写一个烙个印啊，那我下面需要写个烙个印的方法啊， 麦丝，然后写 烙个印这个方法。烙个印这个方法啊，那烙个印的话，呃，正常的话他会有一些权限啊，有一些用户名密码的一些判断，这个判断都是后台进行的， 不是后台进行的，但是咱们现在用前用前端前端来判断了啊，我写一个判断啊，如果说用户名等于什么，密码等于什么，什么，就就可以登录成功，否则登录失败，对吧？那我需要做一个双向数据绑定，获取到用户名输入的用户名和密码啊， rean uzn 等于一个空字母串啊， pass word 等于一个空字母串，然后做一个双向数据绑定， 这里是为毛豆等于用名是悠字内幕，对吧？ 然后是微杠毛豆，这等于帕斯沃的对吧？ 好呢，然后咱做判断了啊，瑞士点优质内蒙，比如说用户等于什么呢？等于额的密，等于额的密的时候，然后密码呢？ 罗志宇啊，这是点，他是 word 密码等于什么呢？等于一二三四五六啊，我就让他登录成功， 调整一下格式，我要是登录成功的话，那就 nice 点 登录成功要干什么？登录成功要跳转到列表页对吧？啊，那就是瑞士点刀乐刀乐撸圈啊，撸圈。有一个方法叫铺式，铺式，我们写一个地址就可以直接直接实现一面跳转写杠上列表页啊，那就是首页，首页就列表页，对吧？铺式首页啊，那就是登录成功啊，那如 如果登录失败呢？我就写个 nlat 啊， nlatanlat， 然后呢？我写用户名或密码处 用户名密码错误啊，咱看一下现在的效果啊，哎，报了个错误是吧， 看看这老天爷的小隔壁，哎， 这现在是哪里写错了吗？ 看我看怎么点击 啊，不是可厉害啊，可这是 supermets 本 met 啊，是表单提交的时候执行烙个印啊，然后 刷新啊，然后输入用户名，比如说我输个一二三啊，密码呢？四五六点登录，他会提示用户名或密码错误，对吧？啊，然后用户名呢？如果说写的密，然后密码呢，是一二三四五六，这就是正确的，然后点击登录，他就会跳到列表页，这样呢就实现了一个登录的功能。

好了，那接下来呢，咱们就得创建 view 三的这个工程了，工程呢有两种创建的方式啊，跟大家都说一下。第一种方式呢，来，大家看我这个目录，就是 uec l i 这个吧，其实就是你特别熟悉的那个脚手架，哎，咱经常说是吧？哎，脚手架这个 view c l i 呢，它是基于什么实现的呢？是基于这个东西，你肯定很熟悉哎，用这个能创建 u e 三的这个脚手架工程，哎，你可以用。然后呢，官方又新推出来了一个东西，叫做 wait 啊，这个东西呢也能创建 voe 三的工程，而且官方推荐我们用 wait 去创建 voe 三的工程， 所以说在咱们的这个课程上，我就根本不用他去创建了，但是用他创建的步骤我给大家留下了，就如果说你闲来无事，比如说一会听完直播，你想尝试一下，老师我还用我最熟悉的 cri 能不能创建这个工程呢，也是可以的，哎，你就一 步一步就这么操作就可以了。好，所以说我就直接进入第二个了啊，直接进入第二个就是 wet， 简单的跟大家说一下什么是 wet？ 呃，最简单的描述就是它是一个构建工具， 其实在咱们前端圈啊，如果直播间有学那个家玩的同学啊，有后端的同学，我跟大家说一下啊，就是在前端圈里边 whatpack 这个东西， 他绝对是属于构建工具领域的老大哥啊，这属于大哥级别的人物知道吗？啊，就包括 react 那脚手架都是基于 webpack 去实现的。然后呢， vivoe 官方啊，他又写了一个，这个准确点说应该是刘禹锡，他又写了一个构建工具叫做 vit， 对吧？哎，它是一个新的构建工具，也就是说跟 whatpack 呢，是等价的。呃，同学说是不是 made in， 其实还真不是，你们后端的那个 made in 啊，后端的那个 made in 呢？有点像前端的 npm， 这个是吧， n p m 算是跟你的那个每文有点相对应的是吧。哎，好了，来，不多聊啊，不多扩展，也就说 we 他呀，是一个新的前端构建工具，简单说 就是他的构建速度比 whatpack 要快。官网地址呢？给大家放在这了啊，这也是由羽西团队的出品啊，大家没事的时候自己可以看一下。然后呢，他有如下优势，简单过一遍，读一遍就可以哈。来第一个 轻量快速的热存载，能够极速的启动服务，也就是说你去执行项目启动的时候 read 会更快 啊，至于说快到什么程度，一会我创建工程你感受一下啊。再有就是对 ts 还有 gs 叉还有 css 等这些东西支持开箱即用，就你不用配置什么东西，直接就可以写 ts 了啊。还有这个就是真正的按需编译， 什么叫按需编译呢？大家看一下这两幅图哈。首先呢，看这第一幅图，我不知道大家能不能看清这个图是吧，稍微放大一点啊， 放大一点来走。首先看第一幅图，就是红色框里的这个图，这个图呢就是属于哪个东西构建的流程呢？ webpack， 你看啊，它的流程是这样的，它从这个入口文件进来啊，这个 intric 叫做入口 啊，我知道啊，可能有一些后端的同学或者是前端没有接触框架的同学会觉得有点懵啊，说，老师，这入口是怎么回事？呃，你就理解为你走迷宫的时候那个入口，迷宫不是有入口和出口吗？对吧？哎，从入口进来呢，他先分析路由， 路由分析完了之后啊，每一个模块都分析，分析完了之后进行一个帮斗啊，进行一个处理，处理了之后，他再告诉你，我的 server ready 了，也就意味着你的工程启动了， 那整个这个过程，其实主要就是这个过程是很耗时的，哎，你可以感受一下，如果你用 webpack 去架构一个东西，你的路由特别多，你的模块特别多，你的左 件特别多，其实你的那个东西启动是非常非常慢的，对吧？这就是 webpack。 哎，第一个图，这是 webpack 构建的流程图，那 wet 的流程图呢？是这样的，来，大家看这个红色的 wet 的流程是这样的，就是他一上来就告诉你 server ready 就 ok 了，我的开发服务器启动了啊，项目启动了，那你看，你对比一下， whatpack 是最后这个 server 才 ready， 而 vita 是什么？一上来我的 server ready， 说，老师，他什么都没有准备，那怎么就 ready 了呢？他等你呢， 你看啥？他准备啥？哎，就简单说， whatpack 什么流程呢？我也不管你看不看，我也不管你看哪个，反正都分析，都处理，最后都帮都，然后，最后呢？哎， server ready， 那 we 的做法是什么呢？一上来就是， ok， 我已就位。然后呢，我看你想看什么？你从入口文件进来了之后，如果你看的是这个路由，如果你看的是这两个模块， ok， 我就立刻去处， 然后给你看，那你不看的呢？那你看这红色的，你没看这路由，你也没看这模块， ok 啊，那我就不处理。哎，所以说就简单来说，他变得很聪明了啊，这就是一个最浅显的认知，行吧，哎，在这呢，咱还是不长篇大论的，说过多的原理，对吧？ ok， 这就是简单的一个你对比，所以说一句话， 为他构建还是挺快的，是吧？哎，就像咱同学说的哈，我就看到这个同学说，那说像揽加载，确实有点那意思，对吧？你用的时候我再处理，处理完了我再给你看嘛， 就这意思。刚才有同学问说， g s 叉是什么啊？简单说一下， g s 叉呢，其实就是 g s 和结构混着写的一种语法啊，如果你了解过 react 的同学应该知道是吧？哎， g s 叉。好了，在这不多说，那么接下来 我们得一起干嘛？去创建一个 voe 三的工程，而且是用什么创建？用 weet 去创建好了。那怎么创建？步骤已经给大家写到这了， 说，老师，你这步骤你是怎么知道的呢？当然我也是看了官方文档，对吧，你可以点击一下，在笔记里边给大家整理好了。你看，这就是官方文档，也就是 voe 的官方文档，他告诉你要执行这个东西，去创建基于 vit 的 voe 三项目。哎，你运行这个就可以了。哎，这块呢，补充一下啊， 如果有后端的同学，首先我要说一下，你的电脑上要具备 note g s 环境， note g s 如果你不安装，你是没有 npm 这个命令的，对吧？那怎么安装呢？简单说一下，如果你的电脑上没有 note 环境，你就直接搜索 note g s 啊，直接找到中文网或者是官网都行，然后点击下载，然后你一步一步安装就可以了。安装这个啊，这是稳定版说，老师，我怎么知道我的电脑有没有 note 环境呢？简单，输入 cmd， 输入 note， 回车。如果他告诉你，哎，是哪个版本，等待着你输入代码，那就是证明你具备 note 环境。哎，如果你输入完了 note 呢？是这样的， 比如说，哎，不是内部也不是外部，命令就证明你没有弄的环境，你去安装就可以了，记得安装完了之后重启一下电脑好了， ok， 直接开始创建咱们的工程啊。那就是这段代码呗，直接拿不来啊，或者你如果不喜欢我这笔记，你从官网上拿也可以，对吧？ 好了，回来右键，然后在这呢，直接终端打开，那把这个往过一拿就可以了。好了，接下来敲回车走， 然后大家注意啊，你得在你知道的地方去执行绿色的这个命令。之前在班级讲课的时候吧，同学是这么打开 cmd 的，直接输入 cmd， 然后在这，那你看你这个目录呢，那就是这个，对吧？那你看，如果我在桌面上右键呢，哎，那我回来的就是这个，对吧？我的用户名，并且是我的桌面， ok， 接下来的这块呢，他让你输入你项目的名称，注意，原则是不能出现中文和特殊字符，最好用什么纯小写的字母加数字 加下划线去组成。那在这呢，我就起一个好听的名字叫，哈喽，下划线留意三，哎，这就是我们工程的名字了，这个名字在接下来好多天的直播我都要用。接下来你敲回车表示确定，接下来呢，他就开始问你了，就像一种定制一样啊，他问你，他说你需不需要添加 ts 啊？那你觉得呢？各位， 六一三拥抱了 ts， 然后你说，不不不，我不写啊，那肯定不行啊，所以接下来，哎，按你的键盘上的左右切换，选择 yes， 这就代表你要配置 ts 环境回车，然后接下来他问你是否添加 gs 叉的支持这里呢？我们就不需要了，哎，我直接选择 no。 回车表示确定， 这是什么意思呢？他问你，他说需不需要我帮你把路由的环境也配好呢？这会说一下，咱们不需要，你等过几天我给你讲到路由的时候啊，我会亲手的带着你去配置路由环境啊。确实，实际 开发的时候可能我们就选 yes 了，他给我配好就得了，但是如果你想仔细点学的话，不行，你得选 no， 对吧？再来，这什么意思？说是否让我帮你添加 pinner 这个状态管理呢？那当然是不添加。过两天我们讲的时候，哎，自己再添加，所以说依然选择 no。 再来， 他说是否让我帮你添加一个单元测试呢？这个我们也不需要，选择 no。 好，再来，他说是否需要一个端到端的测试呢？咱们也不需要选择 no。 哎，这会他说是否需要我帮你安装 eslint 这个语法检查呢？其实干过开发的人都知道，语法检查这东西在实际开发中 那是必须必须得用的，对吧？而且每个公司都有自己检查代码规范的这个标准，都有自己的配置文件。那在这呢，为了我们能够随便的写代码，为了我们能够自由发挥，所以在这呢，我选择的是 no， 如果要选择 yes 吧，其实就会造成什么问题呢？比如说有一天我 写了一个 alert， 你发现语法检查过不去了，说你不能写 alert 啊，然后有一天呢，我写一个 ctrl 点 log， 哎，然后你发现呢，这个语法检查说你不能打印 log， 这就很烦，我还得一个一个去关，所以说在这呢，我就选择 no 了， ok 吧，好，继续就完事了。 哎，舒老师，这工程就创建好了？是的，你觉不觉得创建的过程它比那个 v u e c l i 哎，就比这个东西，我们之前 v u e 二用的这个 v u e c l i 比这东西速度就要快，你看瞬间就 ok 了。所以接下来你要做的就是关掉它，然后放在这好了。那直接右键选择 vs 扣的打开。这会呢，说一个小事情啊，哎，浏览器我先关掉， 如果你是后端，那么你发现呢，其实你好像不太用 vsco 的，你可能用 idea， 对吧？哎，或者你用什么 eclipse？ 如果你要是后端工程师啊，并且呢，你现在在写前端的项目，我给你个建议，就是你用 vsco 的吧。啊，比 别的咱们不说，就至少对于前端来说，对这些主流成型的框架，而且是 v o e 三来说， v s 扣的其实挺好的，而且 v o e 官方还针对 v s 扣的设计了两个官方出品的插件，对吧？所以你可以看到官方对 v s 扣的这种支持， 所以说给大家建议是你用 bsco 的，当然了，这个呢，就是看个人喜好了。你说老师，我就喜欢 ybscom 是吧？之前也有同学跟我说过，老师，我为什么喜欢 ybscom 呢？因为我觉得呢，收费就有收费的道理，没毛病，这话可以，是吧，哎，所以说你选择一个你喜欢的就可以了，那在这呢，我选择 bsco 的， 打开之后呢，你会看到有很多的文件夹和文件，是吧，咱们挨个的呢，去给他说一说。首先打开这个点 vs 扣的，你会发现呢，它里边有一个 js 文件啊，给大家放大一下啊，在这里有一个 js 文件，他是干嘛的呢？打开之后你会发现他这里边其实配置着插件，就是说你的 vsco 的，如果一个插件都没有 安装的话，他会马上给你一个提示，来给大家演示一下啊，我的 vs 扣的呢，现在是已经安装上了这些插件，所以说呢，我给他卸载一下，我安装了这两个插件，哎，你发现都是带有官方认证标记的，这两个插件都是 vivoe 团队出品 啊，留意官方出的。来，我把这两个插件呢给它卸载掉，这个呢也给它卸载掉。好了，接下来我关掉 vs 扣的，我重新打开这个工程，然后呢，你就会发现呢，在这个右下角啊，他可能就会有一个提示，说希望你安装一下官方的插件，说，老师，你这也没有啊，你随便打开一个文件来，你看 是吧，有这个提示了，说是否要为此工程安装 voe 的扩展呢，你点击安装就可以了。好了，这个安装，哎，然后你发现这个自动也安装完了，所以说你看这个文件夹，他就是干这事的，所以说你要给他删掉吧，到时候也行。哎，所以说留着吧，还是啊，完事，然后再说这个 pop lake， 这个呢，其实就是脚手架的跟目录，这个里面呢，就放了一个就是夜签图标。这个东西是干嘛的呢？就简单说啊，各位，平时我们都用百度啊，我们也用京东是吧，我们也用这个今日头条这些网站，那你没发现每一个网站都有自己的这个东西吗？ 是吧？这个啊，这两个蓝色箭头所指的这是什么呢？这叫夜签图标哎，也就是说 pabak 里边的这个就是那个夜签图标。完事啊，收起来，咱们在这呢，先不聊过多啊，什么？这个服务器的跟路径有几种形形式哈，有几种情况咱们不聊这些是吧？好，完事再说。 src 这个里边啊，我说一下， 这个里面可是你的工作成果啊，你前端工程师所有的这个工作成果都是在这 src 里呢，你写的什么点 gs 呀？你写的什么点 css 呀？你写的什么点 view 啊？都在这个文件里呢，是吧？这是原代码文件。好，这个不说了，你前 前端后端的同学应该都明白，这是 get 的忽略文件啊。这个呢，有必要跟大家聊一下啊，我发现呢，有一些同学啊，他删这文件，各位，这文件你不能删啊，你删了他废了，他是干嘛的呢？你打开，你说老师他什么也没干，他里边就引入了这么一个东西，而且还飘红。说一下飘红的原因是啥，是因为来，你注意观察。 我问大家伙啊，你说这里面有这文件夹吗？有这个吗？没有，没有 model， models， 那就意味着啥？就意味着他没有依赖。哎，所以说飘红的时候啊，你别慌，你直接执行一下这命令就可以了。 n p m i。 这什么意思？就是安装所有的依赖啊，给后端的同学聊两句，其实你这个命令就相当于什么呢？你根据你没稳的那个清单，你把所有的架包都安上了，就有点那种感觉，对吧？哎，好了，安装完了之后呢，你最好关掉一下 vscod， 然后重新再打开一下啊，这时候你发现 你再去看这文件的时候，好了，他就不报错了，而且你发现一个文件夹他也有了，叫什么呢？ node？ modus？ ok， 完事好了，那这文件是干嘛的呢？直接说 ts 啊，这个东西他不认识这些文件，你比如说你引入了一个点 jpg， ts 不认识， 你引入了一个点 tst， ts 也不认识，所以说这个文件的作用就是让 ts 去认识这些文件。苏老师，我还是没太听懂，那我简单给你写一段代码来，你把这个代码呢给他删掉，没了是吧？删掉了这个东西，你看后果是什么？ src 里边我新建一个 a 点 ts， 我再来右键新建一个 b 点 tst， 这个时候你看好啊，各位啊，别的你先不用管啊，别的先不用管，你就观察 src 里边我是不是新建了两个文件来，注意看，这是 src 吧里边我是不是新建了一个 a 点 ts 和 b 点 tst 啊？好，那你看好，我在这个 a 点 ts 里边，我要引入这个 b 点 tst。 哎， b from 哪呢？当前 目录下的，找到这个 b 点 tst， 那这时候呢，你就会发现，哎，怎么呢？他不认识是吧？哎，说，老师，是不是你没用啊？那我用一下 conslog， 我打印一下这个 b， 那你发现他依然飘红，就是 ts， 他不认识这个点 tst， 那怎么让他认识呢？哎，回到这，你把这个给他加上，这时候回来，你看立刻他就好了。哎，那所以说呢， viv 官方把所有你可能要写的文件都给你做好声明了，你就比如说这个里边，你按住 ctrl 键，你一点， 同学，你看一下，什么点 c， s， s 呀，点 modu， 点 sauce 呀，还有你往下找什么点 saus， 点 c s， s， 还有什么呢？点 stylus， 都给你写好了，就是前端常用的这些文件他都配置在这了，你看包括各种图片，包括各种视频图标，是吧？都有。好了，这块聊到这就完事，那我不能随便去动这东西，所以说这 a 和 b 呢？我还是给他删掉好了， src 又回到了他原本的样子，完事。所以说这个文件是干嘛的？跟大家说完了， src 里边的东西，你别着急，一会我再带着你看，然后再说这个，这个是什么呢？这个是入口文件。哎，这块你一定要注意各位， wheat 和 whatpack 有区别了，对于这个工程来说，入口文件就根本不是什么命点 gs， 也不是什么命点 ts， 那入口文件是啥？入口文件是 index， 点 a t， m， l 就是他，哎，打开这就是一个 atm 文件，比如说呢，我们验证一下，我把它原来的这些东西都注掉好了，那接下来呢？我写一个我自己的一个简单的结构，我写一 he， 我写一个你，好啊， 好，这个时候呢，我启动项目，注意，各位，我现在要启动项目，那我告诉大家伙，你 src 里的东西你一个都没用，你只是把这个文件呈现到了你的浏览器页面上，我们来试一下，好考，大家一个问题啊，你拿到手一个前端项目，你怎么去启动他呀？拿到手一个前端项目，你怎么去启动他？ 你得看哪，当然是 pick 这点 jason， 对吧？哎，找一下这个短命令，短命令在哪？应该在这呢，叫 d e v， 哎，所以说你想运行的话，你要执行 n p m， 然后呢？ run d e v， 回车稍等 看，速度很快吧各位？ ok， 完事直接可以了，打开走，这时候你看项目就出来了，你看就是三个字，你好啊，对吧？哎，数老师，为啥这么简单？因为你把他原有的东西删掉了，那如果我不写我自己的这个，我把这个给他解开呢？ 哎，那这个时候你看啊，来，停掉你的脚手架，重新启动，稍等打开，这时候你就会发现来， 是吧人这些东西就都有了，对吧？说，老师，那他这个怎么这么多东西呢？哎，你仔细看来，别的咱不关注啊，就关注这个，你看一下他干嘛呢？哎，他在引入这个命点 ts， 哎，命点 ts 在哪里？看好 在哪里？在 src 里，所以说你打开 src， 你找到命点 ts， 你瞧他是不是在这呢？命点 ts 支撑着整个应用就跑起来了，对吧？但是现在咱先不分析 src 里边的东西， ok， 所以说各位把哪个分析完了，把 index 点 atm l 这个就分析完了。好了，这两个不说了， 熟悉前端项目的人都知道这什么，这是包的管理的这个文件，对吧？或者叫做依赖声明文件 redmi， 这也不说了，是吧？就是一个简单对工程的介绍，这东西其实我们不需要，直接给他删掉就可以了。好，然后这三个 简单说也是 ts 的配置文件啊，你留着它别动它就可以了啊。说老师我删掉不行，删掉之后你的 ts 可能会出问题。好，再说这个，这个是整个工程的配置文件，这个东西今天我们不用，但是过几天我们就会用了。这个里面都能干嘛呢？都能去安装插件啊，也能去干嘛呢？就比如说配置， 一些代理都能在这，过几天的直播，我们就会用到这个文件了。 ok 啊，在这今天你其实你点不点开它都无所谓了，好了，关掉啊，那怎么停掉脚手架呢？ ctrl c 就停掉了，好，完事。那这就是对整个这个工程的呢一个简单的分析。 注意，我还没有去分析这个 src 啊，还没有说这个。好了，这一小节停。

哈喽，各位观众朋友们大家好，今天我们来学习一 v 三的第二十六章，深入 v 港 model， ok， 那 v 港 model 呢，它其实是微微的内置指令，它支持这个永普特， cirect radio 以及各种表单元素，甚至呢自定义组建呢，也是可以去支持这个 v 港 model。 ok， 那 v 杠猫等它在 v 三里面呢，是属于这个破坏性更新的。其次呢，它就是一个语法堂，呃，是通过这个 propers 和伊米特去组合而成的。 我们已经之前讲过这个 props， 它是单项数据柳，只允许这个负极呢去传着数据给子集，不允许子集呢去修改这个负极数据。所以说唯一也考虑到这个问题的，它直接把这两个合起来做成了一个 wegame mode。 ok， 我们来看一下它对比 v v 二的一个变化。首先是这个 props， 这个默认值，在 v v 二里边，它叫歪柳， v u 三呢，它叫这个猫头歪柳。 然后这个事件呢， v v 二默认叫引注册，在 v v 三里边，它是通过 r d 称冒号毛的 w 这种方式是 v v r 里边哦 sink 的一个写法，但是 v 三呢，已经把它占用了，所以说哦信可在 v v 三里边直接就废掉了， ok， 其次它是支持的这个多 v 杠猫的模式， 甚至呢可以支持我们这个自定义修饰服这个 model fell， ok， 我们来写一下今天这个例子，然后我是在这个 app 的 vivo 呢去引入一下我们这个资助键，我们今天来演示如何去给一个自定义组件去绑定一个 vga model， ok， 因为我们那些表单元素呢，之前已经讲过了。 然后呢，我是在这写了一个标题，写了一个按钮，然后呢引入了一下我们这个子组键，就是这个 vivo 猫头点儿 vok， 在这个子组键里边呢，也是去创建一些元素，有这个按钮哇，其实就是模仿一个带 log， 看一下页面上的效果啊，大概就是长这样，这是负极组建，然后呢这个带这个弹框呢，就是一个子组建。 ok， 就是我们希望点击这个关闭的时候呢，可以去控制这个子组建的一个显示与隐藏， 然后词组间点击关闭呢，我们可以把这个数据的回传给这个负极，并且呢把它给关掉，就是形成这样双向绑定的一个模式。 ok， 我们来写一下今天这个代码，那首先我们先给他绑定一个 wegan model， ok， 这个字母叫一瘦， 然后我们通过 r e f 去给他定一下这个变量为一的寿。 r e f 啊，由于他是一个开关，所以说我们直接给他定成一个 布尔值就可以了，那默认的话我们先让他展示，对，先让他能看见，同时我们把这个数据呢给他呈现到这个页面上面，给他显示也能看见这个数据的变化。 ok， 啊，这样的话我们就可以这个自定义组建呢去绑定一个非扛猫头。但是这个自定义组建呢，如何去接收我们传过来这样一个值呢？ ok， 其实呢他通过抵饭 props 就可以去收到，通过这个，然后呢我们还是使用这种发型自面料模式去给他做一个接收。 ok， 我们刚才说过在维玉三里边他默认值呢叫这个猫的歪柳，在维玉二呢叫这个歪柳，我们使用的是维玉三，所以说是要使用这个猫的歪柳这个名字，然后呢它是一个布尔植， ok， 然后我们来输出一下这个字，直接给他输出到页面上，那他应该输出的是一个处，因为默认给他传进来就是一个处。 ok， 我们来发现一下页面，哎，已经是传过来了，所以说我们可以用这个词来控制我们这个弹框的显示和隐藏，给他绑定一个微杠 e， ok， 好的，然后呢我们再给这个 aps vivo 呢把这个开关的给他加一个事件来切换这个子组件的显示和隐藏，就是控制这个一瘦的值， ok， 给他去取一个返就可以了。 好，咱们来看一下效果，点击开关来设置为 boss， 并且呢我们这个自然弹光呢也是关闭了， ok， 这样切换是没有问题的，但是现在我们要实现的是点击这个关闭， 把这个副组件这个数据呢给它改掉，并且呢把这个资组件把弹框给它给关掉。 ok， 这时我们就需要配合使用这个底范 dmes 去给他做一个组合，通过这个， ok， 然后我们讲过他是通过 updates 冒号，这是一个固定语法，然后呢后面跟上我们这个名就可以了， ok， 这样子行，然后我们来接受一个 emails， 然后我们给这个关闭呢来一个事件为 click we close， 好的，我们来触发一下这个事件，就是这个 updates 猫头歪柳，然后我们点击的时候呢给它置为一个 poss， 就把这个东西呢给它关掉， ok， 这样的话就实现了这个数据的双向流动，我们来看一下它的变化。 好，咱们先刷新一下点击开关， ok， 关掉，没问题，现在呢是副组件控制没有问题，然后呢我们自组键点击关闭， ok， 这个弹框呢关闭了，并且呢把副组件传过来直呢也是修改掉的，哎，也是没有问题的。 ok， 这样的话就是一个最简单的一个 v 杠猫的的一个用法， ok， 我们来演示第二个多 v 杠猫的用法， ok， 在 v 三里边呢，他支持绑定多个肥港猫头，比如说我们来绑定一个 tax 的歪领， ok， 然后我们给他一个词叫什么 tax 的吧，我们来声明一下这个变量 啊，还是使用 r e f 来个 string 默认值叫小满吧。 ok， 我们把这个值呢也给传到这个子组建里边来，那他接收呢？他接收的话是通过他通过 v 杠猫的冒号后面这个名字呢去给他做一个接收， ok， 我们把它复制一下，在 v 杠猫兜里边去接收一下就好了， ok， 然后他是一个 string， 然后呢我们把这个值呢付给我们这个音铺，就是这个内容，去通过冒号 y 六去给他做一个绑定， ok， 这样子就绑定上我们这个 taxy 六，这个值呢就是一个小买卖，来看一下刷新， ok， 那小满呢就已经过来了，然后我们把这个值呢在副组件呢也给他显示一下吧，我来验证他们是双向的， ok， 那个 dna 叫 tex， ok， 也是没有问题，但是我们现在需要做的就是这个子组建呢，去改变这个值的时候去同步这个副组建， ok， 还同样还是使用那个英米特去给他做一个绑定， ok， 然后呢我们给他来个事件叫 input 吧，叫称职， ok， 我们刚才讲过这个，这个固定学法呢，还是一样的，对，通过这个啊，不对，陈冒号，后面呢，把这个名给他跟上，哎，其实也是非常简单。 ok， 那这样子就可以了，然后我们来接收一下这个疑问题，然后他的类型就是疑问题获取一下这个 torquey， 就当天这个元素啊， 就等于一点 target， ok， 发现他推断的是一个疑问的 target， 疑问的 target 呢，是没有办法去读这个 y 六的，所以说我们给他来一个状元，把它推断成一个 html html 引扑特，引扑特 amit， okay， 这时候我们就可以读到这个 target 点歪柳了。点歪柳， ok， 我们把这个歪柳呢做一个回传就可以了，使用 emit 是这个 tax 的歪溜，然后呢，把这个头给的歪溜呢去给他做一个回传， ok， 此时呢，数据呢，就已经变成这个双向流动的，其实很多那些第三方的组建他也是这么 碰撞的，比如说我们常见的按着门 ui， 按照点赞的，都是使用这种方式去做一个 vivo mode。 ok， 我们来看一下 啊，比如说我数个一二三，哎，数据呢，已经同步上去了，哎，也是没有问题的。 ok， 那这也是他的一个多 v 杠猫的的一个用法。 ok， 然后呢，我们再来介绍一下他的，呃，他的自定义修饰符啊，那么之前讲过他有些内置的，比如说什么 trim 是吧，男版和什么 lazy 啊，一些他内置的，现在呢，我由于演员宣布去自定义了，比如说我们叫意思 et 啊，这懂得都懂啊。 ok， 然后呢，我们在这个猫的歪柳如何去接收这个东西呢？它其实是有一个规范的，就是我们使用这个之前定好这个 vivo 猫头的名字，就是我们之前定的是这个太子的歪柳，后面的跟上 他这个 model files， 那后面这一段这个名字呢是固定的，前面这一段呢只要跟上这个 vigo model 冒号后面这个用法就可以了。你如果是使用这个默认值的话，你就是这个 毛斗毛的 fails， 对，我们刚才使用的是这个自定义那个毛的，所以说就是 tax 的歪溜毛的 fails。 哎，这样子使用就可以了啊，他可以传，他可以不传，所以说我们这加一个问号，把他呢变成这种可选的。 ok， 我们刚才呢在里边接收一个什么 is bt， ok， 然后他返回的是一个布尔直。 好的，就是有这个东西的时候你去怎么操作，还有没有这个东西的时候你再去怎么操作去做一个判断。 ok， 我们先来接受一下这个东西，我们来一个定一个 props 吧。 ok， 然后我们就在这来给他写一下吧。啊，比如说有这个东西 啊，泰特的 models， 然后他下面这个印子 bt 啊，就怎么怎么做，如果没有的话又怎么怎么做，如果有的话我们就在后面加两个变态吧。 ok， 如果没有的话我们就正常返回来给大家做一个例子。好的，我们来看一下页面效果，我们刷新一下，点击一哎，后面呢把这个变态这两个字呢已经是加上了， 也是没有问题的，这个的话就是他的一个自定义修饰符。 ok， 那以上的话就是一个所有的微钢膜的一个用法，然后呢我们来讲一下他的圆码。 ok， 我们来看一下这个微猫斗的一个圆码，它是在这个状态道目下面这个 src directt， 下面这个微猫斗的 ts， ok， 它其实呢就是一个自定义指令，大家如果对指令不熟悉的话，可以去看一下，下一张，下一张我已经讲过了，然后你再回来看这个也是可以的， ok， 那么先来看一下他这个 初始化复制，他是在这个 monty 他里边去做这个初始化复制，就是通过这个 el 去复制一个歪柳， ok， 现在的话只是一个单向的数据流动，然后我们再看这个 cry， teacher， crati 等，它接受三个参数，第一个是易要盗墓见对象，第二个的话是这个邦定对象，这三个的话是一个 v 六的， ok， 然后我们再看一下这个爱的疑问他，你是哪是给这个 el 去做一个绑定的一个事件，然后呢这个 lazy， 这个 lazy 呢就是它内置的一个修饰符， lazy， trip， 还有这个 number 一共是三个，它内置的， ok， 如果 lazy 为处的话，它就触发这个称职事件， 那称职时间的话，只有只改变且鼠标离开焦点的时候呢，才会去做一个触发，而 imp 的事件呢则是会一直触发，所以说通过这个东西你可以给他做一个惰性， ok， 然后呢并且判断一下这个 tree， 如果有这个 tree 的话，就手动调用一下这个 tree， 去除这个左右空格，如果是这个传这个 number 的话，就可以进行这个 tonight 的一个转换， ok， 然后去调用这个翻译函数， ok， 然后呢在下面又有一个判断，如果触发的是称职时间，并且设置这个 trim 啊，也是会去掉这个确定方法的， ok， 然后在下面这个 lazy 呢，有一个特殊处理，就是我们这个中文输入法的时候呢，比如说我们这个输完一个东西，我来个 asd 这样子， 哎，我现在在说东西，但是我没有明确我要选哪个字，这时候呢也不会去触发我们这个引库存，当我们这个点击完了之后呢，才会去触发这个一步的事件，所以说他针对这个中文输入法又做了这个特殊处理，通过监听卡姆杰森斯尔和卡姆杰森，嗯，等， ok， 然后我们再来看这个比佛， 啊不对，他一个更新，如果如果是蕾蕾的话，就直接给他 reap 掉。还有这个 tree， 如果已经做过这个 tree 的话也就直接 reap， 如果这个 number 已经做过 to number 的话也就直接 read， ok， 如果新值和旧值不一样的话才会去做一个更新， ok， 这个的话就是一个他是他完整的一个微猫的一个圆码，但是这个微猫的他配合这个伊米特去做一个更新。我们再来看一下这个 伊米特，一个圆码， ok， ok， 那么再来看一下这个伊米特一个圆码，他是在这个装 time call 下面这个扛 pot 呢，伊米特里边， ok， 他先夺取了当前实力的 propers 一个对象， ok， 夺取完之后呢，又获取一下这个疑问的，也就是我们传过来这个事件， 就是这个阿巴蒂德这个猫的歪柳就是这个东西，然后他就去做了一个判断，通过这个 starvis 去判断事 啊不对的冒号开头的，如果是的话，他就给你去截掉，也就是获取后面这个毛的歪柳， 对，其实就是后获取后面这一段获取完成之后呢获取一下这个修饰符，这个 number 和 tree 就是他在回传的时候呢也会去给你做这个处理。 就是我们这比如说传染参数啊，你之前有没有绑定这个 tri， 他在回传的时候也会给你进行一个过过滤，所以说他考虑的还是很周到的。 ok， 这的话就是一个他对修饰服的一个应用。然后我们再来看下面，在下面定的是一个憨多的内 在韩德罗，内部呢去调用这个兔韩德罗 k， 其实呢就是加了一个昂，对应我们这个世界名称可以看一下，对，就是在这加了一个昂，然后呢去执行这个 covice stink island 里去执行我们对应的一个回调函数。 ok， 以上的话就是他所有的一个圆码。

hello， 各位小伙伴啊，最近呢，我要录制一个 vivo 三的视频教程了啊，有兴趣的小伙伴呢可以一起去学习一下啊。那首先这样的，之前呢，有些小伙伴会问到，我说，诶， vivo 三都这么长时间了，你怎么看是吧？是怎么看的问题啊？怎么看这个 vivo 三，一会呢我给大家去聊一聊。然后其次呢就是 vivo 三的一个使用吧啊，使用，那我后面会给大家讲 vivo 三的各种大使用。然后呢再其次呢就是公司怎么用，公司怎么用， 因为有三个产生来说，呃，有很多东西他是比较乱的，所以说呢，有的公司呢，使用方式可能都是不同的，比如说百分之八十公司这么去用，但是有百分之五的公司那么去用，百分之十的公司呢那么去用，那我这呢需要呃通过这么几个情况给大家讲一下分别不同的用法。好吧，那这随着我们课程呢慢慢就会更新下去啊。 行，那先来说怎么去看的这个问题吧，那版本的升级，首先 biu 三呢，肯定是从 biu 二升级到 biu 三，对吧？他有一个升级的过程啊，那么升级来说呢，我之前看到一个学员说过一丈话啊，就是换汤不换药，我特别赞同这句话，大家如果觉得说一个东西他升级了，改动非常非常大，大到硬境界了，那这个产品也基本 什么意思呢？就拿举个例子吧，比如说王者荣耀啊，这样游戏来说，他是一个推塔游戏对吧？不是一个人的王者，是团队荣耀对吧？推塔一个游戏好，如果有天砰一旦升级变成一个可能合格制游戏，或者变成了一个什么呃，射击的游戏等等乱七八糟游戏，那这个产品内法又和之然不一样了， 等等等等，使用的人肯定就会下降，大幅下降。所以说呢， vivo 二升到 vivo 三呢，大家不用慌啊，就是他就改这么一点东西吧，差别呢，并不特别大，也就是你会 vivo 二升到 vivo 三，很轻松的就可以过渡，只不过有些东西呢，我们人可能也会有固有思维啊， vivo 玩挺好，突然弄个 vivo 三，我觉得这不好那不好，是我们的固有思维啊，当然也确实需要我们的分辨能力 啊。然后呢，再说一下，就是 vivo 三，啪刚一出来时候，很多的小伙伴啊，都会觉得好牛化层啊，全都一猛子都去学了。好，你要注意啊，就是一定要有自己的分辨能力啊， vivo 三，咱们假设一个情况， vivo 三都出来了，然后挨了问 t u i， 他没有升到三，也说你用 view 三项目去以外 mpv 做掉，你觉得是不是有必要？你觉得你的相声有必要，完全没必要，对吧？所以说呢，这个 东西他只个升级，并不代表说他很强，对吧？他可能是未来呃，绝对会替代二的版本，这个我们不能确定啊，但是如果要有再出了 vivo， 那 vivo 基本上可能就不降，我们一定要有突破固有思维的思想，就是我们一定要有接触新鲜事物的能力，或者说接触新鲜事物的能力，或者说接触新鲜事物，我们要勇于去接受啊，但是也要分辨出来，不是说一个新东西 polo 数量就一猛去学啊，弹出来讲，这东西被炒的最多的就培训机构， 所以说呢，大家一定要有分辨能力啊，然后其次呢就是大家可能在网上也看过，比如说这个 vita 加 vivo 三，甚至还有加什么 gucci 四是吧，甚至还有加什么啊，平亚还有加什么 that， 还有加各种各样东西，乱七八糟啊，甚至还有这三大加一大堆， 这家到底是啥是吧？我分别给大家去说，这就是我告诉大家的，刚才说到他好乱啊，咱们一点聊好吧，一点聊我就当大家呢这些东西都不知道一点聊，那我六三，呃，怎么看呢？就是他目前来说吧，或者 vivo 本身吧，肯定是做后台管理系统非常适合的，做前台内容还是不适合的，然后随着这个课程大家慢慢去体验 vivo 三吧，或者体会 vivo 三的优缺点就可以了，那至于他怎么 去使用呢？这个随着课程咱慢慢去聊啊，我就一步给大家去说，包括那些东西啊，位置啊，加什么东西，对吧，慢慢的去聊好吧啊，然后公司怎么需要呢？就是后面等等都会的括号。但是呢，我这先要强调一点啊，就是，呃，我这次呢会讲的 vivo 三，主要是拿 vivo 和 vivo 三进行对比，如果一些小伙伴呢，没有学过 vivo 二啊，我建议呢就是你去学一下我的 vivor， 或者说学别人 vivor 都是可以的啊，无所谓啊， 大家要学我的 vr 呢，可以到这个学习路线展森或者小路线展森这个网站，然后这呢有课程的全能框架，然后在这有一个 vivo 基础课，大家可以学这个。好吧，那我就不在这呢不多说这个 vr 东西了，我只说这个对比，好吧，如果说你真的不会 vr， 一定要看 vr 再看这个，要不然你别看好吧，因为这里面都看不懂，你也看的费劲是吧，彼此都难受。好，那下面呢，我就呃正式的去来说微商的一些东西啊， 来写一个 bg， 我就当他家的这个 vivo ok 的 vivo 三什么都不会是吧他其实呢，我也当他不会了，我就整个都给他过一遍啊要首先呢，今天第一节课的第一个事，我们就来创建 view 三项目呗。啊，创建项创建 view 三项目创建 view 三项 上面呢有很多形式啊，很多形式，比如说我们经常一个命令就是 view， 呃， creature 这这个项目名称是吧，这么去创建，来吧，我把 view 二和 view 三都给创建出来啊，我进入到我的桌面儿，然后 see view creature 代号二就是 view 二啊，我再提一个 viv crate demo 三，那就是 vivo 三了。好，我先把 vivo 二这个版本选一下，我就把 return 和 vivo x 都安了啊，然后这样选择，看到二点叉走你。哎，我就按个二，那就二吧，就按个二，好，就按个二，然后这个玩意呢，我按个三，千万别点错了，三点叉啊走。好嘞， 好，他们先按着，然后呢，哥几个去聊着是吧，咱先喝着。好，就是。呃，我们通过这样的形式呢去创建这个项目啊，注意，这个形式是基于的构架工具。什么基于 构建工具？工具？嘿，是这个 wipe 啊，注意，这样积极构建工具是 wipe。 然后刚才呢，我给大家说过一个东西，就是 wait 加 vivo 三，看到吗？ 就不是基于外派。好，我们先来说一下，可能大家在六二章中已经做过很多项目了，那基外派这项项目呢，有一些痛点，怎么样痛点呢？大家看这个图啊，先说一个痛点啊，就是如果我们做这个项目，这个项目呢，可能有一百个组件，或者一百个点背文件 好，然后呢？某一个点没有文件呢？修改了点东西是吧？这个点东西啊，至于哪点咱就不说了啊，修改点东西，然后我帮你保存，我一保存时候呢，我去刷页面，我靠，怎么还跟原来一模一样，然后我一看这终端，我靠，你还没修完呢啊？你等半天，等上个十秒五秒都有可能。 大家发现一个问题，没有慢是吧？ wifi 好慢好慢，为什么呢？看这儿啊，是因为这样的啊，这个 wipic 呢，它有一个摁水，就是入口， 如果大家足够了解到 cat 的话，它有 encher 和 output， 是吧？入口，咱们拿入口来说，我这项目呢，可能有很多的页面啊，就是很多的这个 ruce 啊， ruce 这个路由，比如有三个吧，咱们举举个例子啊，有三个，当我去修改某一个时候，比如我改这个，我改这个和这个点没有文件，和这个没有文件，这俩页面有啥关系呢？ 我改，我和你俩啥关系呢？没关系，但是我要派克也会把他们重新的编译解析一下，然后包括他里边一带项全部再执行一遍啊，最后完事啊，我，我只说开发环境的时候啊， 这就是来拍个问题，导致你开发效率比较慢啊，就是我改一个，当组件特别多，改一个时候，其他都得编一下，超级慢。好，那么 有没有很好方式呢？ which 啊，这是这节课要说的这东西呢，大家一看图就明白啊，比如说我这也是有 n 多个这样的页面或者组件，不管啊，当我去改某一个，比如改这一个吧，哎，只是他自己生效，这几个哥们呢？不生效 啊，不就是说，呃，不根据啊，这呢进行什么加载呀，各类各样的东西啊，他不需要重新加载啊，这就大大提升效率。大家想想，我有五十个好假，五十都执行，但是我只改了某一个，那一个执行不就好了吗？所以说呢， wait 很好，那我们总结一下，呃，基于 ipad 的项目， 这项目啊，有一个问题啊，就是开发 map， 或者叫编译 map， 编译啊，编译版来解决它，该怎么去解决呢啊？使用 wait 构建构这个 wait 构建工具，使用它 使用解决，就是使用位置啊，就可以了，位置呢，要比他快，所以说呢，咱们要了解位置优势， 在开发，我只说在开发啊，在开发过程中大大提升我们的效率， 大家形容交流。好，那现在我再给大家阐述一遍啊，就是大家去创建一个 view 的项目，你可以通过战士创建，你也可以通过一会我讲 wave 方式去创建，这两东西呢，都可以完成你的项目，这个我说清楚了啊， 都可以完成一项，但是如果单纯的通过开发效率来讲的话啊，一个保存大码代码来讲的话， wait 要比 rap 速度要快，一会我带你带大家去体验。好吧，所以说呢，两个无所谓，爱用哪个用哪个，但是这个东西快，我们就用快的，舒服的，爽的，对吧？我们出出去就坐飞机，就坐高铁，就开车，我不骑。那那个什么，这，这个大轮车是吧？不，不，骑大轮车，不，不，踩平衡车，哎，就舒服， ok， 就跑车各种要开，哎，就这意思啊，就是我们要选一个跑的比较快的。好，那么 vit 项目怎么创建呢？创建 vivo 三项目，我们要基于 which 这构建工具。 命令这样的，跟它这儿就不一样了，命令这样， n p m 啊， in it， 然后这儿呢是 wait 哎， wait g s 哎，然后这是项目名称， 好，我再来一个，进入到我的桌面，然后 n p m e net， 啊，我们这儿呢，起一个名称，先写一下 wait g s 我叫它 wait demo 吧。好吧，随便儿起一个。 好，然后他让你选择你要创建什么样项目呢？那肯定 view 呗，选择 view 啊，走啊，然后是 view 的还是 view t s 的，呃，咱们先不说 t s 啊，如果小伙伴会呢，你就随便。好吧，不会呢，就 先跟着我走，选 v 五吧，走好，然后 c d 根据它的命令啊，进入到我们的目录里边，然后 n p m。 算了，我要 c n p m 安装它依赖，然后 n p m 绕 d v 启动起来啊，就可以了， 咱填不上第一位啊。行，好，我们来体验一下它的效率有多么的快啊。来，当然现在呢，还不是体验那么特别特别深刻啊。我们打开这个 logo， hose 三千， 呃，他访的时候扣后三千，大家看到了哈，来，我随便去改个东西，我打开这样的一个 app 没有吧，或者打开这个 hello 啊，都行啊，无所谓，就打开这好，我在这呢写一个一二三啊，我啪一保存，你看 是吧。四五六啪一保存，你看这速度是吧。叉叉啪一保存，你看这速度特别快，所以说呢这个东西呢只是提升我们的开发效率罢了而已啊，那就是你的一些选择了啊，到底你要用哪个倒无所谓好，但是呢大家呃 这样呢，我要给大家讲就是这个东西我不知道说了大家应该会对吧，这个就直接写代码就好了。那这个呢还有点问题啊啊基于 wait 呢还有点问题啊。首先呢 wait 呢它默认安装的如果你选择是 view 的项目啊它默认安装的这个版本呢是三的 view 三 啊默认是 vivo 三的啊。所以说我们这也记录一下如果选择 vivo 的项目默认版本是 vivo 三是 vivo 三。好，那 vivo 二能不能用呢？能一会我给大家讲啊。但是呢我们先来先来看一下这个 gv 的这个项目录啊 s r c 大家熟吗？不熟吧，熟是熟，感觉少点东西对吧。少什么呢？原来我们的那个撸件没有 store 没有。那咋办？这有啊啊，你把他的 src 整个的给他把这个位置的啊 src 给他删掉，把这 src 呢整个复制粘贴过来就可以了把这儿一复制 把这一复制把这一粘贴就可以。哎我这个粘贴的咋这么慢哎这是我电脑问题。好吧那那这样我我自己新建一下。这是我电脑问题啊各位你们肯定是不需要我这么去操作的这是我电脑问题我需要手动移一个来。那这个电脑 不听我话了已经好久已经坚持了很很久很久啊，我就一个一个笨点啊给它新鲜出来啊啊就是你要做的话呢就把你那个呃 s r c 粘删掉啊整个的复粘贴过来就可以了。好，我们就我这操作笨一点吧。 好，我把这个都拿过来。 好，这第一步还没有完呢哈，各位，呃，第二步呢？是你再打开你这个用 create 创建的 vivo 三项目的拍点 jason 啊，把 这一块，把这一块复制一下啊。哎，搁到这，搁到这个位位置，这个地方，把力量效应给按一下，好吧，来， n p m i。 然后呢，你再去启动啊，可能也会报些错，然后改一点东西就没有问题了。 好， n p m 状 b v。 走，启动起来。好，启动起来以后呢，我们看啊，它里边其实已经爆了一些错了，比如他说圈儿也不认识，对吧？咱们需要去改一下，找到这儿的一个，呃， home， 把这改成第二杠， 他们还会报一个错误啊，这个错误呢，我直接给大家去找吧，就是这个 ruth 里边这样呢，没有那个点 env 文件啊，所以说我们改天告就可以了。大家看，这不是我们熟悉的那个 vivo 的初始化的项目吗？哎，这也没有问题，好，给大家总结一下。呃，如果说我们要用 wat 即 wat 的来做项目的话啊，那我们要做的事情， 六三啊，六三使用。呃，这个应该不叫六三，应该叫 wait 加六三的方式。我们第一步， 把 print 创建六三的 src， 整个复制粘贴到 基于 wait 的项目中啊，只敢我们做第一步。第二步，把 create 创建的 六呃，把根的创建的 package jason 中的。我得给大家看看啊，这，这块， 这块，复制粘贴到这条 在项目中啊。第三步， n p m r。 呃， n p m i。 安装依赖啊。第四步， 启动修改错误就可以了。刚才我不是改了一个那个第二缸路径吗？还有一个是 rooter 里边对吧。改一个这个啊就可以了。那有些小伙伴可能还会有一些需求说，哎，我觉得挺好用的，对吧，这个东西挺好用，那我的 viewr 的项目呢， 也想用这个，我不想记 wifi 了，哎，那能不能用呢？可以啊，那可以。好，我们下面就来说一下 vr 的该怎么用。那 vr 呢，是在戴帽二对吧？好，那也是一样，前两步没什么区别啊。你要把它的 src 这块 给它放过来啊放到放到这边啊放到这边啊。那我又把 s r c 给删掉了，我这复制是有问题的啊，我再确定一下大概是不是 m 二啊 啊 ok， 好，复制我这个复制大家可别学我这种复制啊。我这我这是我电脑问题啊，你也别别到时候按照我本身你的电脑是可以的，结果按照我这样去去弄了。 这一句话不到位，我怕大家也笑话这麻烦大。是我电脑问题， ok， 然后这个里边就一个 logo 好行，完事以后呢也是把它那个拍着 jason 的，因为你是基于哎 the demo 二啊，这个啊，你看它是基于 view 的版本是二点六对吧？二点六点十一啊，所以说把这块也是要拿过去， 然后到这也是改一下再重新下载那个依赖啊，你看现在 vivo 的版本是二了对不对？不是三了再重新下载依赖。 p m i。 好，等下来以后呢， n p m 让 d v 去启动启动完事以后呢，就会报很多很多错儿了啊会报很多很多错呃，首先呢它报 d 个错呢，就是找不到这个玩意儿啊，找不到这个东西，那我们就需要把这个东西呢按一下啊， c n p m i 按一下。 好，我把这个给大家记录一下。第一步，第二步啊第二步，我们拷贝过来的是这一大堆 好，第三， 呃，第三是，对，这还有一个是复制安装依赖， 注意会报错，再安装一下这个啊，完事以后呢？哎，还没完事呢，等他完事以后我们再启动一下。啊 呀，这么慢啊， 呵呵，这还有点慢，行，他先安置吧，然后我给他去找一个插电啊，因为一会呢启动起来他还是不行的啊，还会有一个问题啊，所以说我们要用这个 wait 关闭原一会呢要用到这个玩意啊，我们去 n p m 去找一下啊，你要去下载一个这个玩意啊，然后呢在那个 wet ctrl ps 中的新配置啊，这样才可以。这还没安装完，行吧，没有安装完的话呢，我们就先按它去吧，周围要是慢啊，咱们先安装它，那我们就把这个删掉吧。第四步第五步 再 page page。 东西如下，比较简单啊，我我们直接来啊，直接来到这好，大家看啊，第一行这个地方把它拿到 我们的这款，这款就不要了啊，一会我给大家整个的 project 过来啊，这样就不要了，就看这个 好，然后呢这个底部也是一样整个换成它啊，直接都换成这样就可以了啊，这是最后我换完的。 呃，当然这一块儿的 defunt cray defunct convey 这个也算先留到这好我们再启动一下啊，可能会还是爆那个模块啊，我们需要把模块按一下 行，那再再运行一个第六步是吧，再运行好再去启动。 哎，现在就启动起来了啊，启动起来了，行，我们去看一下 logo home 三千，当然还会报一个错啊，就是你那个路径问题啊，路径问题呃， james view 是里边的 home， 这跟第二杠， 然后还有一个问题呢，是你那个，呃， rucher， 呃，这地方我们改天去杠， 小心，哎，还是有问题，看一下。嗯，没问题的。好，我再重启一下吧。 好，我们再重启一下，再看一眼啊，哎，大家看是不是现在就 ok 了，这是 vivo 二啊，大家看切换，哎，都是没有问题的啊。那这一课呢，就主要给大家说一下，呃，这个 wait 加 vivo 三，它到底是怎么回事 啊？然后大家呢，就可以后面我讲课也是会用 wait， 基于 wait 的，一个没有三项啊。然后大家呢，也可以按照你的自身情况是吧？你公司里边呀，或者说你自己想用哪个都是可以的，用 wifi 也行，只用位置也行，只是让大家清楚的 有一些地方的课是这样的，那么到底这个是啥啊？要给大家说清楚。好，那这节课呢，我们就先说这么多，然后下节课呢，咱们再具体的说。 view 三里面都强。好，那么构建创建 view 三项目我们就先说到这里。

element plus 是基于 vivo 三的组合式代码风格进行开发的，所以我们几乎没办法通过继承来修改或者定制化它的组件， 所以呢这种情况我们就只剩下一条路，就是我们基于他官方的原代码进行二次开发，顶多呢就是我们定期的合并他官方的发行版。其实很简单，首先呢我们先把他的原代码克隆下来，这块我已经克隆好了，在这里哈。然后呢我们先做一件事，就是我们创建一个分支，我这里叫 my 二点三，为什么呢？ 因为大家看他现在的最新发行版是二点三点一四，我们呢就不要最后这个小版本了，我们直接到二点三以后的话呢，我们定期合并他这个小分值，比如他二点三点一五发布了，我们还把他的二点三点一五合并到我们这个二点三的分值里，然后就简单了，我们就任意的改他的原代码就好。 好了，改完之后怎么办呢？我们用 p n p m， 注意它用的是 p n p m， 包括你意思带有的时候，然后 p n p m build， build 完之后呢，我这已经 build 好了，他会生成一个 distant 目录，目录里有一个这个 element plus 目录，这个目录就是未来我们项目需要引用的那个 element plus， 怎么把它引用到项目里呢？我给大家分享三种方式，大家根据自己的情况去选择。第一种呢就是我们把整个这个目录啊 放到我们的项目里边，我这块呢已经放过来了，我建了一个叫 depth 的目录，把刚才那个目录拷 pit 过来，我这已经拷 pit 好了哈，下边这个先不管他， 然后怎么做呢？大家看，我现在用的是一个普通的 button， 就这儿一个普通的 button， 然后呢，大家看啊，我把它原码里稍 稍微做了修改，在这加了三个等号，就是在这个文字前面， slot 前面。然后呢，我现在重新安装一下爱了们的 plus， 用，我打包过来这个安装。首先呢，大家看啊，这块引用的是 官方的 element plus， 我先把它卸载掉 instyle 好没有了，对吧？然后呢，重新 instyle i element plus， 注意后边加空格，点 depth， 然后 ilement plus， 这样就可以了，指向这个目录哈，我们回车， ok， 大家看，这块的路径就变成这样的了，我们再来试一下 mpm 软， 刷新一下，大家看他前面就有那三个灯号了，说明现在用的这个 button 就是我们刚才改过原码的那个 button 了。 那第二个方法呢，就是大家也看到了，我们需要把刚才这个 element plus 目录打包成踏点儿 gz 文件，怎么做呢？就是踏儿 z c v f， 然后呢起个名，然后注意有一个杠大写的 c， 然后呢选中了刚才这个目录，最后有个点注意这个杠 c 很重要，这样的话他生成的这个压缩包中不会有这个 element plus 这个目录，否则的话你在 npm 安装的时候总会爆，找不到 package。 好，这样打包完之后呢，他就有这个文件了哈，我们把这 这个文件放到我们其他的项目里，像这样代不死，然后点踏点 g z， 然后这会我们把这个文件先删掉哈，我们为了测试停一下，然后还是我们先把这个 nstyle 一下，卸载一下 pm， 好，我们重新安装 i element plus， 这回我们点 tar， 点 g z 好，安装好了 m p m run， 我们再来试一下，刷新一下，大家看也是一样的效果。那这个方法相比直接复制目录过来有两个好处，第一就是磁盘空间，我试了一下，他大概节省了十倍的磁盘空间。第二个呢， 就是这种压缩包，我们可以避免不小心修改到里边的代码。第三种方法就是我们直接把这个目录放到公司的 get 私服上面，或者 get up 上面，我这里边拿 get up 举例哈， 我在我的 github 上创建了一个 my element plus， 然后呢，把这个目录直接放上来了，而且我们放上来的时候注意我们还可以 打太个，比如这是二点三点一四，我又加了个点幺，未来我再改就是点二。然后呢，我们还是在其他项目做安装的时候这么做，我还是先摁一下， 然后呢，我们复制 dtap 这个目录， h t t p 的就可以哈， n p m i element plus， 然后把刚才那个链接直接粘过来就可以了，如果你想带版本就加， 加上井号，二点三点一四点幺回车。 ok， 安装好了，大家看格式就自动变成这种 get up 冒号了，大家注意这是 no 的，十六版本以后会是这样，十四版本的话他就不是这样，他就直接是这样，哎，他一直加上一个 tps 冒号 get up 是不是嘛？ 然后呢，我们不管他啊，我们再来 n p m 软一下，我们看下效果刷新啊。对，这个我刚才打包的是两个减号的版本，不是等号哈。

好嘞，这节课呢，我们再来学习一个新的东西啊，它叫 pina， 那首先确定一点， pina 呢也是 view 中的状态管理，那么上节课呢，咱们正好学了 view x， 而且呢，我们在 view 二的时候呢，都是用 view x 来做状态管理的， 现在又有一个 pina， 他也是做状态管理的，那到底我要用哪一个状态管理呢啊，这个呢，是根据你的业务， 你的场景，你公司所处的环境进行选择的。那我们先不说这些东西，我们先来说一下 v o x 和 pina 具体的区别， 当你了解了 vox， 当你在了解了 pina， 然后再知道他们区别的情况下，根据你的自身情况和你公司的环境情况进行选择，到底使用哪一种这样的状态管理的一些工具。好吧，那下面呢，我就废话不多说了，来看一下 vox 和 pina 具体一些区别啊，那这样呢， 写了一个文章，大体的给大家总结了一下。好，我们来看一看啊，那首先呢，这有一个参考的一个网址，那在这个网址中呢，官方已经说的非常非常详细了啊，就在这，我把这网址呢也列出来了，大家呢下去可以点下去看一下啊，我把这个参考网址也放到我们笔记中吧， 这是 view x 和 p 两的区别。 好，这是一个参考的网址，那下面呢，我给大家大致的整理了一下他们的一些区别啊。首先呢，这个 pina 呢，它也支持选项是 a p i 和组合式 a p i 的写法啊，这个呢和 v x 一样， v x 也是支持的对吧？好，然后其次呢，就是 pin 呢，它是没有没有贴身子的 好，注意，我们的 view x 呢，是有 mutation 和 action， 它里边可以写方法对吧？并且 action 是提交 mutation 的。好注意，在 pina 中呢，是没有 mutation。 真的啊，只有 skate， gets 和 actions。 好，只有这么三个东西。然后拼价呢，他也不需要通过 models 来分模块。我们之前呢，使用 v u x 是不是要通过 models 来分什么 store 模块呀？呃，就是分这个 user 模块呀，或者说购物车模块等等这样一系列模块啊，在拼价中呢，是不需要去进行模块的划分的 好，然后呢， pina 呢，也有 typescript 很好的一些支持啊，然后呢，它会自动化的这个代码拆分。然 pina 呢，它的一个体积更小，也说它的一个性能会更好。好，下面呢，我们把这个大致的一些内容呢给它放到这啊， 呃，那我就给大家列举这么几个比较重要东西吧，它是没有 mutation 的啊，然后是不需要分模块的啊，然后其次呢，就是它的体积更小啊，我把这三个内容呢给大家罗列到这啊， 这是三好，我把这两项就删了啊，那大家呢，主要知道这三点就可以。 ok， 那这是他们具体的一些区别。 好，那我们知道他区别完事以后呢，下边，哎，我们来说一下他到底该怎么去用啊？其实呢，如果说你会这个 vivo x 啊，那这个 pina 呢，你的学习成本并不高。然后呢，这我还要强调一点啊， 不是说所有项目都要用到 pina 啊，不是所有项目都要用到 view x 也说 pina 呢，根据你的情况去进行选择去用， 千万不要把这东西学完以后捆绑好吧说，哎，我这项目必须要用拼讲，你要了解他们的区，这个区别就是优点跟缺点，然后进行选择。还有刚才我说到了跟你的业务来，是吧？这个东西太卷了啊，就是又出个 vox， 刚弄明白了，又出了个拼讲，知道吧，然后又学拼讲， 而且很多大厂呢，其实有些东西他不 care， 就是说这东西呢，在我的开发阶段呢，能给我提升很多，但生产阶段能不能提升很多，这个就不确定了。所以说呢，这个就是仁者见仁智者见智啊， 别让这个培训机构或者说一些营销人所影响你的思维啊。好，那我这呢需要给大家声明一点啊。行，那下面呢我们就具体来看一下拼价的一个使用啊。来使用， 那刚说了，它里边呢有 state getters 和 actions， 对吧？ state getters， actions。 好，我把这三个呢都给大家去说一说哈。 来，首先呢，这个 pina 呢，我们需要去安装啊，那我先把咱们之前那个项目的内容呢都给他打开，然后把这里边的东西呢稍微删一删啊，这有一个 a 组件，这里边的数据呢，我就全不要了，写的内容我就都不要了，全不要了啊，然后呢，这有一个 b 组件，我给他删了吧。 呃，然后这里边有一个 home 啊， home 中呢，我把这些东西都给他删了，都不要了，引入了一个 a 组件。好嘞，基本上这么个情况，然后这儿有个 store， store 内容呢，我也都不要了， 这个 index ts 先留着。好吧，那然后下面呢，我们就来说 pina 的一个具体的使用啊。好，我这呢也写了一个文档啊，提前写的，咱们来看一下。当然 pina 呢有它的一个官方的一个文档啊，官方的一个这个内容啊，我这呢也给大家放到这，这是官方网址。 好，更多内容呢，大家可以看他的官方网址，然后在这呢有一些基础的使用啊，那我们可以点击到这个地方啊，然后看一下，这呢你需要去安装啊，然后呢进行一系列的配置，然后就可以去用了。当然呢，我这呢做了一个总结，大家就可以直接看我这了啊，我就按照我这去说了， 首先第一步呢我们要去安装它，比如说一二的或者 n t m 都可以哈，那下面呢我就先去安装它来啊，这是我们的第一步安装。 ok， 那第二步呢就在 mate g s 中进行引入， 嗯，我把这个项目启动起来，然后看一下啊，这呢我也都写的比较详细了，算了，我把我这个网址一会给大家复制粘贴过来吧，我就不在这去写这些内容啊。嗯，具体使用。 好，那就大时候大家看这个地方就可以了啊。好了，我们来看一下具体一个使用啊，那在 mergs 中呢，我们需要去引入啊，那我们现在呢跑到这个 mergs， 好，那现在呢 store 就不用了，对不对？那我就把 store 呢给它删掉 啊，这呢有个 store， you store 我也删掉了哈，然后这呢我们先得引 part 引入进来，然后呢我们在 yos 一下啊，他是这种写法，那我们就直接这么去写就好了。好，那我们这呢也就引入过来了。 ok， 那引入过来以后呢，我的这个网页就不应该报错是吧？嗯，刚才呢会出现一些错误啊。 ok， 好了，下面呢我们再继续看。那怎么样去用呢啊？也是一样，在这个 store 目录下不是有一个 index g s 吗？对吧？这里边呢我们会写很多内容。呃，首先呢要按照它的格式 input 啊， define the store 啊，然后 from 啊，这有一个啊，呃， p 呢，是吧？然后呢再往下 啊，这呢有一个 asport const 啊，叫 you store。 然后这个地方呢是一个 id 啊，这个 id 呢必须是唯一的啊，所以说呢，你要写到这儿，然后你看这个地方啊，就会定义 state 呀， getters 呀， actions 呀。 好，那我们就先来看 state 啊， state 呢，这个地方和原来不同，我们的 v o x 呢，哎，这个 state 是一个这样对象，对不对？他这呢是一个箭头函数，然后 return， 哎，这里边写一些内容。好，那这样吧，我这就写一个 n y m 吧，它值为零， 当然你可以写很多，比如内幕呢，为张三啊，都行啊，随便。然后 a 制呢，为一个十八。无所谓啊，我就写两个吧，别写太多了。好吧，那这是我定义的这个数据，好定义的数据，我现在要在 a 点 b 中，怎么去用呢？啊，那这呢，我们要写成 set up 这种形式啊， 好，来看文档，那在这呢要使用的话，你就得 inpult 一下啊，其实和 v o x 呢差不多，你看啊，我们的 v o x 呢是 inpult， 然后这儿有一个什么 use store， 然后这儿是 promo v o x， 对不对？然后这儿是 const store， 等于 然后呢他加一括号，这样去用，你看这个 pinia 是不是一样的，几乎是一样的。好了，到这呢我们就可以 ctrl 点 log 打一下这个 store 啊，看一下这个 pinia 里边那些内容啊。来到这， 好，他这呢是一个 pro c， 然后这里边呢有很多的他的一些 api， 比如说 id， 你看这个 id 呢，就是刚才我们定义的 id 啊，就在这个地方， 在这。好，然后接着我们再看啊，然后这里边呢还有什么瑞赛特是他的 api 啊，这是重置啊，然后这个呢就和那个监听是差不多的。呃，然后呢我们再来看这里边的这些数据啊，那他的数据呢是在这啊，大家看 是吧？内幕以及 am。 好，那现在呢我要呃去用到这个内幕以及 am 该怎么办呢？你可以再让他进行一个呃这样的复值，或者说结构都可以。那我们先可以直接 store 点 am 啊，或者说我们 store 点儿呃，这个内，那这样的话呢，它就会在页面中呢进行展示，大家也看到了啊， 在这是吧，这个零和张三呢已经进来了，不过一般来说我们不会这么做啊，因为这样呢前面都加个 store 也太乏了，是吧？我们可能呢会结构啊，比如这有一个 name， 这有一个 a o m， 等于这个 store 等于这个 store， 然后这儿的话呢就写 n m 以及 name 就可以了。好，我们再来看，首先 啊，这个地方的一个零以及张三，他完全没有问题啊，也可以展示到页面上，但是呢这其实是有问题的啊，就是说你如果说单纯的展示啊，没问题， 但是呢你要这在这个本这呢进行修改，他是不能修改啊。对了，咱们这个笔记中呢，还少了一项啊，少了一项就是， 呃，这个 pina 呢，它可以直接修改 state 数据，就是我们的 vivo x 呢，它是修改一个数据，需要通过 mutations 啊进行提交去修改这儿的这个内幕，或者说 a y m， 对吧？就修改这个 state 数据， 但是我们的批量呢，他是可以直接进行修改的啊，直接进行修改的。好，下面我们来试一试啊，比如说我这有一个修改名称，好，然后这呢有一个，呃，叫称职这个内容吧，好吧，或者就啊算了，就称吧，然后我们这呢来进行一个修改，看一下能不能改啊， 那我们就把这的一个内幕原来是什么张三，我给你改成李四啊，那这样的话呢，他是不能进行修改的，或者修改他也是有问题的啊，咱们来看啊，他不能进行修改。好，那有人就说了，你不是一个 property 吗？你要加 好来刷新。好，那这时候呢，我们再去点一下，你看他就会出现错误，什么意思呢？就是如果你这样去结构的话呢，这个数据呢，他不是一个响应式数据啊，所以说呢，我们要啊结构的时候需要做一个另外操作。好，大家来看， 我们在下边，嗯，给大家找一下，在这个地方啊，要通过它的一个 a p i 叫 store two r e f s。 啊，这个呢其实在它的文档中呢也有说明啊，我们可以去看一下， 在它的下边这儿有个 store two ifs 啊，在这个地方。好，那这个框该怎么去用呢？好，大家来看啊，我们这儿呢需要去引入啊，需要去引入 store two ifs， 然后拼拧好，然后呢这个结构的话 呢，我们需要这么阔起来，就跟那个我们那个 two r e f s 是一样的，就是引 pro， 然后 to r e r e f s， 对吧？然后什么 promo biu 啊，这是一模一样的，就是我要通过这个东西呢进行结构，那这样情况下呢，就可以修改了。好，来，我们试一下，回到我们页面中刷新一下。 好，稍等啊，然后点，你看，这就改了啊，这就改了，大家要注意，在我们的 view x 中，你不可以在组建中直接修改 style 的数据，不可以的哈，我们通过 mutation 进行提交才能进行修改啊，但是在 pniar 中呢，我们可以直接进行修改。 好，这就是不同的一点，对不对啊？这就是不同的一点。呃，然后再往下呢，就是，哎，现在呢，我可以去改这个地方的一些内容，对吧？哎， 改他，那当然有的企业朋友就会说到了，我能不能借方法提交呀？啊？方法先修改呢，也是可以的。那后面我会说 actions。 好吧，那到这呢，我还要给大家说一个需求啊，就是说我们可能会改两个值，比如我们这呢会改一个内幕啊，他为呃这个 a m 吧 点 value 啊，然后它为一个零，现在呢，我要改成一个十，是吧？刷新， 好，稍微等一下点，哎，这俩就都改，对不对啊？这俩就都改好，那我们在做一些业务上呢，可能，呃，比如说这用户登录了，我们会要把他的状态为处，要修改他的 user in four， 或者说会批量的进行修改这样的一些数据等等这样一些内容。那除了这种批量修改方式呢，其实还有批量修改方式啊，就是刚才我们看到 一个 a p i， 它 a p i 里边呢，是有一个这样的方法的，在这有一个批量更新的一个操作，我们可以把这个呢给它干掉啊。 好，大家看，我们用到了 store 啊，这个东西有一个 patch 看到了吧，然后这儿呢就可以批量修改，什么意思呢？呃，就好比说我现在呢要改你这个地方的一个内幕和 n m 了，那我就可以这么去写啊。看到啊，这儿呢就是 n m 哎， 我加加呗。好，然后这样内幕呢我就改成一个赵四是吧，或者炸雷随便。好，这样呢也可以实现一个批量的一个更新啊，修改好了我们回到这个项目里边啊，刷新一下 啊。点，你看这也就改啊，点点点点点是吧。这个一直在进行修改一直在进行修改啊。所以说呢，你批量更新的话呢，你可以 用他的 api 也可以说直接这么去写，这个就随便大家了啊，这叫两种形式哈。两种形式。好了，到这呢我们就先总结一下这个 state 吧，和 view x 不同点是什么 啊？除了写法以外啊，它的写法这儿是个箭头函数对吧？ v x 呢是一个对象。除了写法以外我们的 pina 是不是可以直接修改 s date 的数据啊， 对吧？但是我们的 vivo x 呢是不可以直接修改 state 的数据的啊，需要通过每个 titchen 提交才可以哈，这是一个不同点。好，我们了解了这个 state 啊，这个 state 无非就是定义我的数据嘛，对吧？好，然后再往下呢，我们要说的是这个 gettas 了，来看一下我们的文档 gettas get 四呢，它作为一个计算属性，我们知道 get 四呢它有缓存对吧？好，在这呢我们就来写一下这 get 四啊。这个呢就和 view x 是几乎一模一样啊，比如说我叫他称之 a o m 吧，好吧，称之 a o m 或者我叫呃呃，就是称之 a o m 吧， 来我看看这个地方啊，这是称 name 啊，没问题，称至 a o m。 好，然后呢我在这 return 一个。呃，我每次 我让他直接改一个值吧，就是说这有一个 nm， 对吧？然后我直接的给他加一个一千啊，随便。 好，然后在这呢我再给它 console 点 log 打一个 gets， 我为了证明它是有缓存的哈，它是有缓存的。 好了，现在呢要用这 gets， 因为它是一个计算属性啊，所以说呢，我们这儿也得给它结构一下啊，也得给它结构一下，然后呢把这个趁着 a m 就这 gets 给它放过来。那是不是它展示结果是一个一千啊？来看一下， 稍息。好，咱们稍微等一下啊。好，这有一个一千，这有个一千，这有一千。那在我的控制台里边呢，只会打一个 get 四，因为这个东西呢它是有缓存的机制的啊，所以说 get 四呢，几乎没啥可介绍的啊，和我们的 vivo x 呢 啊，几乎一样。好，然后下面呢我们再来说一下这个地方的一个 actions 啊， actions， 我觉得 up l m 版 actions 呢是写方法的，他同时支持同步以及异步。好吧，那在这呢我们可以做一个这样事，比如说我要给他进行一个加值，行吧，那就加等于一个百六吧，然后我这呢传一个值， 这个呢几乎也是和我们之前一模一样的啊，只是说参数的形式可不同啊啊，但是呢这个也比较好理解，或者说也比较好用， 因为我们了解了 vivox 里边的什么没有天线 action。 那这个东西方便啊，就是传那个值嘛，对吧，这个传是什么？然后他又会加等多少嘛？ ok， 好，到这呢，我们就来一个 button， 我说，呃，这是加等操作吧。好，我们这样呢，来一个 click， 就叫 b t n 吧，好，往下走， const b t n 等于 好。然后呢，我们在这呢，需要用到什么呢？用到刚才那个方法，那个方法呢，就叫 up n m 啊，好，传什么值呢？我传一个二百吧，随便举个例子啊，传个二百， 好，当我点击的时候呢，就会执行这个 up a m 啊，来，我们看一眼，刷新。好，大家一定要注意，我们的 其实值他是为零，当我点一下，那他就加等是吧，每次加等二百，哎，他会不断的更新，不断的更新啊，当然你传的值是多少，他就会进行 y 六啊，这 y 六呢，就是那二百不断加等 啊。所以说呢，我们这样总结一下，就是这个 gettas 呢，没什么变化，几乎是吧， actions 呢，也没有什么太多的变化，无非就是传值嘛，啊，参数不同而已啊，和 view x 进行对比的话是吧。然后呢，这个拼压里边呢，它是没有没有切线的啊，只有一个 action action 呢，同时支持 e 步以及同步的操作 好，然后呢， state 是有变化的，就是说我们要在组建中修改 stat 数据，可以直接改，不用通过 mutation 啊，这样提交方式进行修改。好，这就是 pina 和 v o x 具体的一些小小区别。好，那么希望大家呢，对于 pina 呢有一个简单认识和了解， 大家下去呢也去玩一玩啊。当然啊，我们还没有介绍东西有哪些呢，就是 api 里边呢，怎么样去分模块啊，是吧啊，怎么样去做持续化存储呀啊，它里边 api 具有哪些呢？啊，那这样呢，我先给大家去说一下 api 这个事情吧， api 里边东西呢？呃，挺多的， 也还好吧，不是特别多啊，我们可以看一下。好，到这我们就打开这个控台来看一眼啊， 在这呢，其实刚才我们接触过一个这个玩意，他不是批量更新的吗？这有个 reset 是重置的，就是说我只要调用这 reset， 那你就是加等到这个六八百了，对吧？一点重置 就用这个方法，那他就回到稀释位置啊，就回到零了，我们可以测试一下啊。呃，在这呢，我就给他来叫 reset 吧， reset。 好，咱们就使用一下这个方法，不过这些 api 呢，使用的场景不是特别的多啊，我就给大家一带而过了。 reset 好，来我们试一下，你看啊，我不但加加加，加到一个两千四，对吧？咔回去了， 这是重置的，然后呢这个东西呢大概意思呢是做一个你你可以理解成就是个监听处理的啊，监听处理的像其他其他的一些 api 呢，使用的情况来说呢，并不是特别特别多了啊，那这样呢，我就 不做不做这个过多介绍了。大家呢可以去看到 a p a 这块啊，去看 a p a 这块，那我们正常的使用话来说呢，就是它的一个啊，正常的使用对吧？怎么安装，然后这 st 怎么用？然后 action 怎么用啊？改点词怎么用啊？就玩这些东西。好，那么下一课呢， 我们再来说怎么去分模块吧。好，这节课有关于我们这儿所说的 pina， 一个简单的认识和 vs 区别和基础使用，我们就先说到这里。

vivo 三支持的酷已经进行了重大的更新，比如新版本的 rotte dv 兔子和测试工具都支持 vivo 三了。 构建工具链由 vivo tiy 升级为 vit， 状态管理工具由 vivox 升级到 vinaid， 支持由 vita 升级到 viral。 新的美内行 type script 支持 votsc， ssg 由 real press 升级为 v press gsx 有 at viewbabo percent gsx 升级为 at viewbaboprocessiongsx。 哎，我错了。

view 是用于构建 ui 界面的 javascript 框架，提供了简洁的语法与完备的官方文档， view 已经逐渐成为了最具影响力的前端框架。相比传统方式， view 大大提升了开发效率。 在传统开发中，无论是数据呈现还是用户交互处理，都离不开复杂的盗墓操作。为了实现一个简单的功能，动辄就要书写几十甚至上百行代码。 随着外部应用的日渐庞大，复杂的代码让开发者们叫苦不迭。而要将代码迁移到框架，大量繁琐的规则又让开发者们望而却步， 这时为有应运而生，以更快的上手速度和更低的项目迁移成本迅速改变了这一局面。当真是功能全面、生态好、语法简洁效率高，免去盗墓 操作苦，开发重任一肩挑。你有病，咱们言归正传，要使用 view， 你可以通过 cdn 引入方式来将 view 应用到整个页面，或者直接通过官方交手机啊 create view 来创建完整的 view 应用，并安装可能用到的辅助工具。 要编写 view 代码，可以找到项目中以 view 为后缀的单文件组件。组件代表了网页中的部分功能，每个组件都包含独立的结构、样式和逻辑，对应到组件文件中的 tablet， style 和 script 标签。 你可以在他们类的标签中书写 html 作为组件的结构，或者引入子组件让结构更好的复用。如果你想将 gs 中的数据插入到结构里，可以使用差值表达式。在差值中，你可以书写一些简 单逻辑，或者直接调用函数进行数据处理。除了差值， vivo 还提供了用来替代盗墓操作的指令功能，如 v 杠 text 可以为标签设置纯文本内容。 v 杠 h t m l 可以生成标签结构。 v 杠 if 可以根据数据判断是否要渲染这个元素。 如果你希望渲染列表数据，可以使用 v 杠 four。 要设置事件，可以使用 v 杠 on。 指定的值是事件处理程序，当然，你还可以使用艾特来简化书写。除此以外，如果你希望组建的数据可以动态更新，可以使用 vivo 中提供的方法将数据设置为响应式。 对于对象值，可以使用 reacttif， 而对于不可变的原始值，则可以使用 ref 将其包裹为响应式数据。当这些响应式数据发生变化时，它会自动传递到模板的对应位置。组件将自动重新渲染 而无需任何 dom 操作。当然，这是因为框架在幕后执行了大量工作，以确保这次更新的性能最优。这类功能被称为虚拟 dom。 对于虚拟 dom 的实践细节，大家可以三连催更。 而对于 vivo 来说，你还有很多需要学习的功能。例如，想要缓存数据，你可以使用 compute 的计算属性。如果想要在数据变化时执行指定操作，可以使用振停器 watch。 如果你还需要进行路由和状态管理，你则可以使用官方的路由管理工具 vivo rotor 和状态管理工具 pinning。 正如之前所说， vivo 提供了完备的官方文档，你可以在文档中快速找到并学会你想要的功能。以上就是一百五十秒搞懂 vivo 三的全部内容了。如果你喜欢我的视频，可以给我点赞或者三连。如果你有想看的内容，也可以在评论区跟我互动，感谢你的认可与收看，我们下个视频，再见。

好，那么在上面课程呢，我们讲过了组建的常识，然后这节课呢，我们要说的是 vivo 三中的这个插槽啊，我就不做过多介绍介绍这个插槽到底是什么啊，因为在 vivo 二中大家几乎都会了，我主要说 vivo 三中，它该怎么去用啊？行，那在 vivo 三中呢，这个插槽呢，分为四种情况，分别是匿名插槽啊，然后是剧名插槽， 很好解释，匿名呢就是没有名的，对吧？剧名呢就是有名了。然后其次呢，还有这个作用欲，作用欲插槽以及动态插槽。好了，到这呢，我们就分别的去解释一下啊，首先呢，我们先来说这个匿名插槽，你看啊，这是我的副组件，副组件呢是后面点没有，然后其中呢引入了这个子组件， 那 a 点六呢，就是我们的一个子组件，对吧？这是一个子， ok， 那我在子组件中呢，先加点内容啊，比如说我这有个 candle， d i v， 这是一个头部啊，我再来一个副词， d i v， 这是一个底部。好，那我的副组件引入子组件，然后展示子组件的数据，这本身来说呢，是没有问题的，对吧？哎，然后呢，我会在这地方呢写入一些 内容，比如说，那我这写一个啊，这是啊数据，这是叉叉数据吧，随便写的。好，那么现在呢，这个内容呢，并不会进行展示啊，那我先要展示呢，我就得在这呢写插槽，对吧？这是我们的 s rose 啊，那这样呢，就要写一下，比如说我在这个地方要用到了，那就 s rose， ok 啊，然后这呢再写一个思路。好，那这时候呢，我们刷新一下，你发现呢，在头部以及底部呢都加入了这个内容，对吧？这个数据呢是来自于这的啊，然后呢分别在这个地方，这地方呢都能去使用， ok， 没问题。好，那假设呢，我有这样的情况，比如说这个数据叉叉，那这个呢是一个 a 链接啊，这是个 a 链接啊，或者说呢，我有两个数据， 一个是叉叉，一个是 yy 啊，随便写。但是呢现在我要用的是这样的一个匿名的插槽，那我写个 slot 会在这把这个叉叉和 yy， 这叉叉和 yy 都进行了展示，那其实呢，我想在这个地方展示的叉，这地方展示的 y 该怎么办呢？因为现在是没 有名的，所以说呢他就会都插入进来，那这时候呢你要给他起一个名称了，好吧，是这个意思。行，那我们这样呢就来先来说一下逆运沙槽啊，逆运沙槽呢，我们的副组件啊，可能会这么改啊，然后呢我们这个子组件可能会这么改， 但是呢这个内容呢会全部进来，是吧？好，所以说呢，我要起一个名字，让这用叉，这呢就用 y 就可以了。好，那怎么样去起名字呢？首先呢在这个地方你要用的时候，我们这写一个， 好，把这个手机放进去，然后这呢就写一个 v 刚 so， 然后比如说我随便写一个啊，这样呢，咱们就给他来等于一个叉吧，啊，这是个名称啊，这个名称我写上三个叉，行吧？然后呢再往下这个地方呢写上 这个数据叫 y， 好，三叉，三 y 分别代表的就是名字，大家应该能理解啊，就是名字，那到这我要用的时候，那这个地方就要写名字了啊，就可以了啊，就要写那个内蒙，哎，他的一个内蒙啊， 等于叉叉吧，然后下面内部呢应该是 y， y， 好，这时候呢我们再来去看，大家会发现是不是这只有叉了，这只有 y 了呀，当然你反过来也是可以的，比如说我这地方就展示这个叉，这地方展示那个 y， 是吧，这样也是可以的啊，或者说，哎，我这个地方呢既展示叉也展示歪，下面呢只展示这个叉也是可以，是吧，这就是有名字的叉槽了啊，有名字的就是句名叉槽。来，我们说一下副该怎么办啊，是不是？哎，有点像这个组建之间传直啊，基本差不多啊，只不过呢他们的使用的场景啊，不同啊，使用场景不同。 好，那我们就呃在这呢随便的去拿过来就行了，大家应该能看懂啊。好，这是我们这所说的这个地方的一个聚民插槽，说白了就有名了。然后这呢我也提醒一下各位啊，就是这种写法呢，其实可以简写啊，在他的一个这个官方文档里边呢，其实也有说明啊，大家呢下去可以去看一看啊，那我这呢就不给大家去看门道了啊，怎么个简写呢？就是 说他在这个地方啊，在这个这个地方，在这个地方，嗯，都可以进行简写，比如说我在这都可以给他来一个警号，这样的来个警号啊，这样呢是 ok 的。好，我们来看一下，小心是没有任何的问题啊，然后我们这右击去检查。 好，我们来看这好本身呢没有任何的问题，对吧？本身没有任何的问题， ok， 所以说呢这是一种简写形式啊，我想告诉各位的啊，是简写形式，那也意思说这地方可以简写简写简写成这个样子啊？ 嗯，我我我把这个往下放，哎，这个直接就这么写就行了。好，直接这么写就可以了啊，他可以简写啊，就跟我们这一样的。好，那这是我们这所说的。呃，剧名插槽，然后下面呢我们再来说这个作用与插槽，这个作用与插槽到底什么意思呢？我们可以看一下这个文档里边，他也说明了说有时呢让插槽内容呢能 能够啊，访问子组件中才有的数据是很有用的，是吧？然后当一个组件呢被用来渲染一个项目数组时啊，渲染不同的这个数据的时候，这时啊这是一个很常见的一种情况，对吧？那这时候呢我们就需要定义他具体的数据，然后呢在我那呢进行展示啊，那这时候呢我们就要用到座位插头 啊，大概什么意思呢？我这样我这样呢再给大家来一个 section 啊，把它放到这个中间这个部分上，好吧，好，这样呢给大家去写一下， 就是说我可能会有一大堆的数据，我在这可以定一下啊，那就叫例子吧，等于，然后这有 i f， 然后写着一个数组，然后这数组里边呢可能有不同的对象， 那我这就写一下他的 id 呢为一他内容值呢就随便写一个张三。好，然后他的 a 值呢？我就写一个十八岁啊，无所谓。好，然后咱们把这个数据呢都给他弄多一点啊，二三四，这叫张大三是吧？这个叫张小三，这个这个就叫李四是吧？李四啊，李四就李四吧。 ok， 行，那现在呢我这个数据啊，我要怎么去做呢？看啊，这个地方啊，我要做的调整，就是我这儿呢有一个 d i v， 我先去循环一下它 v 杠 four， 然后这儿呢有 atomo in 一下 list， 对吧？然后这儿呢是有一个 k 等于 item 的 id， ok， 那这是我们的一个正常渲染，然后呢我这可以弄一个插槽啊，就是 slot， 弄一个插槽，然后这地方呢我就可以把这个名称什么的都给他传过去啊，然后这样呢，我就写成这个 item 吧， item 呢？是什么？是每一个对象，对吧？那就这条数据，这条数据，这条数据，这条数据。好， 然后呢？现在呢？我希望在，呃这个地方呢进行一个展示啊，进行一个展示，那我在这个地方就要这么去写了。来，我先写一个 topic。 好，然后这儿呢我就要写 v 杠 v 杠 slot 冒号，等于啊，我可以结构一下， 哎，没有冒号啊，结构一下啊，这样拿到那个 day 啊，因为我这写的传过来就 day 啊，然后这拿到了 day， 然后这呢我就把这个 day 呢给它旋出来。好，这时候呢 就会展示那四条数据啊，那四条数据也就说你的数据，呃，可能会有很多个，对吧？然后呢在这个地方呢进行展示啊，所以说呢，也可以这么去做，当然你可以打印什么 item 的，呃，这个，这个 name 是吧，或者 age 之类的都是可以的啊， 然后打印一个 dat 的 h 都可以。好，这就是作用小法，那我们这可以写一下负的话呢，我可以这么做啊，然后这个子的话呢，可以定一个数据，定一个数据，然后在这地方这么做。 好，那就有更多的可能性了，然后下面呢我们再来说这个动态插槽啊。动态插槽呢，这个就比较简单了啊，就是其实换一个名称啊，啊，对了，这个作用插槽呢，其实这样呢，也是可以简写的，是吧？也可以简写，只不过他井号啊，这有个 evan 啊，这么去写 好，来，我们看，这是吧，也是 ok 的啊，也是 ok 的，那我们把这个简写呢也放过去简写，哎，简写 联系好，那下面呢我们再来看动态插槽，呃，动态插槽所说的意思就是你这个，比如叉叉，或者说 y y 吧，你可以再去定义这个数据，比如叫叉叉，然后它的一个名称 就是叉叉，是吧？然后或者说你这随便写个名就行了啊，你，你别说写哎，条无所谓，反正这个只要对，是吧，然后你把条可能会这么写，那这样的话呢，这个叉叉他也是可以展示进去的啊，在这啊，他也是可以展示进去的啊， 你看这地方有，这地方有证明没有问题，比如说你可以动态的去改变什么呢？去改变这个东西啊，比如你改成歪歪，好重新一下，那这就歪了，对吧？然后其他地方呢，就没有这个叉啊，就这个意思，你可以动态的去调整，不过我们几乎会把这个数据和这名， 就这个 v 六和这 k 呢，和这变量长得一模一样，对吧？这样会好一点，就这意思，那当然如果你这换了明你这呢也就换了，对吧？你可以拿这呢去动态的调整啊，呃，这就是动态调整，说白 来了，就是通过数据啊进行切换，对吧？进行切换好，然后我们可以把这个拿过来啊，这个呢，数据可以在这里边去定义 好，这就是 vivo 三中的叉槽啊，当然这个写法呢，可能还有一些方式啊。啊，不是，可能是就是还有一些方式， 不过都大同小异啊，如果大家这样的会的话呢，基本上很多都看得懂的啊，所以说基本上没问题。好吧，这就是我们这儿所介绍的 vivo 三中的插槽的具体写法和使用。好，那大家呢下去可以把这块呢稍微熟悉一下， 其实呢改动来说并不是特别特别大，大家呢下去多熟悉一下就可以了。好，那么有关于插槽呢，我就先给大家说到这里。