vue4.0教程

在上一讲的话，我们主要给大家讲了这个环境的一个搭建啊，那在这讲的话，我们主要给大家分析一下我们这个项目的目录结构啊，以及呃 呃，给大家讲解一下我们这里边这些基础的一些语法啊。那首先我们快速复习一下上课，上节课讲的东西啊。上节课的话，首先我们讲了这个微微的环境搭建，搭建环境的话就是你首先要全局安装这个脚数加工具，全局安装就是打开我们这个密令行工具，然后这里边啊 运行一下啊，回车运行一下，那这时候我先结束啊，那之后慢慢安装，安装完成以后，那接下来我们就可以用这个 vivo 命令来创新项目。那创新项目这边有两种方式，一种是 vivo 引引他一个 wificebook， 一种是 vivo 引引他一个 wifi， 对吧？然后 vivo， 另一种是 vivo 引引他一个 wificipo， 然后呃，这个 vivo 的一个名称，对吧？但是我们推荐大家用这种方式啊，这种方式的话，稍微 啊稍微这目录结构简单一些，对吧？但是两种方式的话，他这个语法和开发的方式是一样的啊，开发的方式一样。那这边的话我们就主要给大家讲啊，讲我们这种方式啊，一样的。 ok， 那接下来我们就开始了啊， 首先的话，你看我这边导入了我们这里边这个项目啊，导入这个项目，当然大家回头拿到我这个项目怎么运行呢？你拿到这个项目的时候，他没有这个 nonodows 啊，我先把他干掉啊，就是你们大家拿到 到这个项目的时候，我把这个 nonodouse 删掉了，为啥呢？因为这个 nononodows 是我们项目所需要的各种依赖，那这里边有好多东西啊，所以我就把它给干掉，干掉以后，那接下来大家拿到以后这个项目是运行不起来的，对吧？那运 学习不起来，你们拿到以后怎么做呢？啊？这样做，你看啊，拿到我们这个项目以后啊，比如说我现在在 c 盘啊，重新打开 cmd 啊，我现在在 c 盘，对吧？就是你比如说你拿到了我 这个项目，拿到了我这个项目，然后你想运行我这个项目，那怎么运行呢？你首先得 cd 到这个目录里边啊，就是首先得 cd， 比如我们 cd 这点杠啊，然后 cd 这点杠啊， 然后在 cd 倒水呢，是不是这个 vue 里边 vue， 然后再 cd 到这个 vue 啊？单毛零二啊，就是回头大家拿到项目，首先要 cd 到你的项目里边， cd 进来以后啊，那接下来你下，我这个应该是删掉的啊，那稍等一下 啊，就是这样的，就是大家拿到我这个项目是没有这个孬的猫，就是啊，这么个东西的，所以啊，你回头拿到我这个项目怎么运行呢？你首先 cd 到这个目录里边， cd 进来以后，然后这里边运行一个叫 cnt m excel， 或者 叫 npm， 一四二都行啊，这个我们上节可以给大家讲了，这个 npm 是我们淘宝对象，那这样的话他就会找到拍黑之点斋森里边的这个 所有的我们这个包啊，也就找到这里边这些包，然后只要我们运行这个命令，他就会把我们这个项目所需要的这些包一个一个给你安装上啊，一个一个安装上，但是这过程的话可能稍微慢点，可能得三到五分钟啊，如果网速快的话，如果网速慢的话，可能得个八到十分钟都有可能，对吧？ 就是你回头拿到这个项目这样运行啊，那稍等一下啊，我们也等他安装完成，安装完成以后，我们是不是再运行一个叫 npm tv 来运行这个项目？ 那之后你看一下，我在这按的时候，他是不是里边就生成了个脑子毛丢死，对吧？脑子毛丢死啊，但是这个速度还可以。嗯，稍等一会，那我暂停一下啊， 那这样他就安装成功了。安装成功以后，然后接下来我们就再运行一个 npm 装低微，那我们这项目就抛起来了啊，项目就抛起来了，然后这时候的话，当然 如果在你的电脑上的话，他自互动会打开啊，我这边是因为我浏览器的问题，我需要手动输入啊，如果他打不开，你就是他。呃，运行这个命令以后自动会打开浏览器，然后然后 给你打开这个项目啊，如果打不开的情况下，你在我们浏览器里边手动输入一个 logo hous， 然后这里边叫冒号一个，你看他叫什么名字？冒号一个是不是叫八零八零啊？那我们这边就输入一个叫冒号八零八零，然后回撤一下， 回车以后，然后你看我们上一脚的项目是不是又运行起来了，然后这就是我们上一脚给大家搭建这个项目啊，那接下来的话我们导入这个项目，导入的话，这个也给大家说过点击什么呢？点击这个文件啊， 点击打开文具夹，然后选择对应我们这个项目啊啊，我们就用零二这个呃， vippic pro 创建这个项目来给大家演示啊，那这边打开以后，我们给大家介绍了一下这里边的东西啊。首先 从上到下巴啊，那上面这个 nonono 六四，这是我们项目所需要的各种需要的各种依赖啊啊，所需要的各种依赖，但是大家如果实在理解不了，看一下我以前录制的这个 note g s 的基础里边啊，有这个 nonono 九四的详细介绍，对吧？这就是啊， 就是我们项目所需要各种模块，这个不用管。然后再就是 src， 那 src 的话，这里边放的是我们所有开发的时候所用的一些资源。啊，那这个回头我们再看，然后这个是一个掰爆的配置文件不用管，然后这个啊，编辑器的配置文件不用管， 给他忽略的文件配置文件不用管。因第二点里面这个要管，这是我们的啊 h 里面入口文件，对吧？啊，入口文件，然后正常情况这里边东西不要改，你要改就加什么东西呢？我们要改就在这加个式口，对吧？式口啊，什么叫式口？就写移动端的时候， 那个是口，对吧？要在这讲啊，那我们回头用到再给大家说，然后再就是拍 k 这点 gs， 那这个文件你要知道，对吧？他是我们项目的一个配置文件，管理我们这个项目所需要的各种模块，以 以及我们这个项目的版本号，名称等等。哎，就是我们创建项目时候还记得吧，他这边让你填写什么呢？啊？名称描述啊，作者等等就填写到这了，写道理，对吧？这就是拍 k 指的这是，然后再接下来 red me 读我，对吧？这什么意思呢？这是我们这个 项目的说明一下，对吧？如果你要运行这样运行，如果要打包这样打包，对吧？这就是我们这个，呃什么呢？这个文件啊？这个文件，然后 再接下来，那再继续，这里边还有这个叫 vippiccon 飞格点 gs 啊，那这是一个 wib 派克的一个配置文件啊， vippark 的配置文件，为啥这里边还有个 vipad 配置文件？ 因为我们创建项目的时候选择了 vivip 派克啊， vippic 他是个模块化打包管理工具，他可以把我们这个回头写的微回头，用这个点 vo 一写的文件让浏览器能解析啊，就是他能让我们 或者说能把我们呃用 vo e 写的文件就点 vo e 这样的文件打包成浏览器能解析的文件啊，这就是 vipad ctrl gs， 正常情况也不用管他，回头我们配置上再给大家说， 直接目录结构介绍，就是除了 src 其他的卸载都不用动弹啊。然后 sss 里边这个是一个静态的什么资源文件，然后 这个就是一个根组件，就是我们的一个根组件，大家现在应该对这个组件不是特别理解啊，什么叫组件呢啊？就是你把它当做一个页面，对吧？一个页面啊，比如说我们以前写写我们这个移动的或批次 啊，就如果大家没学过的话，你先写的话啊，比如说我们这里边这是一个导航啊，那你要在这个页面用他刚才那个导航，是不是再复制一次啊？那如果我们在另一个页面里边又要用这个导航，那怎么弄呢？我们是不是再再复制一次？是不是再复制一次？ 现在有这个模块和组件化的开发模式，我们可以怎么做呢？我们这里边这是一个页面，然后接下来我再定义这样一个头部，然后接下来你可以引入他，对吧？然后接下来又有另一个页面啊， 因为另一面你要用这个头部，那你也可以引入他，这就是我们这个呃组件的一个概念啊，相当于就是一块块的，对吧？一个模块这么个东西，我们哪里用哪里，直接引入就行了，这就是一个根组件，相当于，对吧？ 然后这一个组件的话，在我微微里边也可以说一个页面啊，有，有，我们这个太不累的，太不累就是 h 天猫代码，然后这把就是业务逻辑 gs 代码 以及掉啊， css 组成啊，由 atm、 csgs 组成，这是一个呃 v u e 的文件，也可以说一个组件有这个组成，然后在这里边慢一点。 gs 这个正常情况你也不用管他，我们回头配置录一段时候给大家说啊，这就表示， 呃，实力化，我们这个一个微优异啊，实力化一个微优异的这么个东西，然后挂在我们这里边刚才定义的这个组件啊，挂在这个组件啊，这就是我们所有的目录结构的一个简单介绍啊，等你刚开始学的时候，你先啊， 鞋可以不用管他，你就按照我们这个鞋来啊。那接下来的话，我们主要关注的就是这个组件啊，我们学就是学这个组件里边的语法啊那些，接下来我首先把这个 cs 四全部干掉啊， cs 全部干掉啊，这个撕掉放 css 的，然后这个这个你先别把他删掉啊，这个放到这，然后接下来这里边东西啊，这里边要注意的就是 我们所有的内容要被一个根组件根元素包含起来啊，就是在我们这个里边啊， 我给大家写一下，就在 vivo e 的模板里面啊，所有的内容要背一个根 节点包含起来啊，根节点包含起来就这么个意思啊，所有的内容要被一个根节点包含起来， 所以我们回头写代码的时候就你太不累的。然后这里边就写个 drv， 对吧？然后我们写的所有东西都放在这个 drv 里边啊，比如说我这边写个 a 叉，对吧？然后这个你好，写个叫你好为友谊，稍等，写错了， 注意了啊，叫你好没有意，对吧？你好没有意啊，然后接下来我这里边再写个表，对吧？然后这是一个跟组 组件啊，这就是模板啊，这就是模板。然后接下来你看我们预习一下，是不是出来一个你好为优异，这是根组件就出来了，对吧？ ok， 那这个给大家介绍完成以后，那接下来我们再看这个 shift 啊，就这里边写的就是 ht 苗代码啊，只不过要注意的就是要所有的内容要被一个根包含起来啊， 然后这里边这个睡不死啊，是我们的业务逻辑啊，业务逻辑。然后接下来你看啊，这个固定语法叫 xpard boot， 表示把这个组件暴露出去啊，暴露出去，然后 内蒙表示给他这个组件起个名字，你也可以把他删掉，对吧？然后这个对他啊，对他，对他，对吧？他表示我们这个数据啊，就是数据，就是我们业务逻辑里边定义的数据。 业务逻辑里面定义的数据啊，数据啊，那数据是什么意思？你看，比如我这边来个 mac 啊， mac， 然后这里边来一个叫啊，你好，你好，这个没有意义，对吧？这就是一个数据。那接下来我想我这个后台的数据，我要旋转到前台，我们以前是不是叫盗墓操作啊？那现在的话我们就直接可以绑定数据， 绑定我们业务逻辑里边的数据，我们用的是一个花括号来绑定这个数据，对吧？那接下来你看一下，那你好为优异，你好为优异，是不是就出来了？包括我这里边把前面这个你好为优异，是不是可以去掉啊？这叫绑定数据，对吧？绑定数据 ok， 搞定，如果大家学过阿哥呢？这个非常简单的啊。啊，绑定数据 先搞定，搞定以后这是最简单的一个数据。那接下来我们再来一个复杂点的啊，包括和小程序也有点相似啊，再来个复杂点的，比如来一个什么呢？呃，来一个对象啊，哦，不，这样，对象啊，那你就在我们对他里边，在蕊托里边啊，这写对象，对象 obg， 然后等于对象 对象里边有个内蒙，内蒙的一个张三。那接下来我想在我的视图里边输出这个张三啊，想在哪个视图上就在这输出张三，那怎么输出呢？一样的，对吧？绑定数据，来个 b r 写啊，稍等一下，绑定数据我们就通过画框来绑定，对吧？画框来绑定， 这里边有一个，呃，我们叫一个呃 h 三啊， h 三，那之后你就花括号绑定这个内啊内蒙，他不是内蒙是谁呢？是吧？哦，这个下边内蒙也叫 obg 点内蒙，这就是绑定 对象啊啊，获取对象里边的数据，就这么个意思，然后接下来，那你在这里边我们还可以定义什么呢？我们还可以定义呃，数组，对吧？数组啊，那数字的话，比如说来一个类似的，类似的，等一个数组就这里边瑞托的，这就是定义数据的东西啊，类似的，类似的，比如等于一个 幺幺幺啊，二二二，然后这边来一个三十三，对吧？三十三，然后保存一下，保存以后，然后接下来我们要循环这个数字啊，那看怎么循环？那循环数字的话啊，在官方的文档里边也给大家说了啊，他可以通过一个叫呃，稍等， 在官方文档里边叫列表血染，对吧？列表血染，他通过一个叫 v 干货来循环我们这个数据，对吧？你看官方的例子是这样这样写的，对吧？那实际在我们哪呢？在我们这里边你要放到这个维他里边的瑞托里边啊，瑞托里边放到这，这是放数据的，因为我们这里边是单文件组教，不一样，对吧？稍微有点区别，但是你 要知道这个灯塔里边放这个东西，就是呢，就是我们瑞托的这些东西，对吧？那接下来你在这要循环这个数字，怎么循环呢？是不是这里边有个微杠货来循环啊？那我们给大家写一下，就在这。 br 我再来一个 ax， 然后这边再来一个。 br 然后接下来我们要循环数据，比如说这里边有一个叫 ul l i ul l i uri， 稍等一下， uri， 那我要在这循环水呢？循环这个数，循环这个类似的，对吧？啊？循环类似的，那怎么循环呢？我们就在这通过一个叫 v 杠腹这么个指令，等于 atm 硬水呢？应这个类似它， 那 itm 是我们这个每一个值，你可以叫 a， 也可以叫 b， 对吧？那这样他就把这里边每一项付给 a 了，或者是每一项付给这个 itm 了，然后这里边这个类似他，你要和他对应起来，对吧？那接下来我们在这获取这个数据， 获取数据那就是我们要拿到这里边这个一二一二三三，那你这里边就写个艾特姆，那之后我们就搞定了。然后接下来我们再运行一下，给大家看一下啊。然后在这刷新一下，一二三三是不是就出来了？这就叫循环我们这个数据啊？

ue 的知识分享，今天我来演示一下如何快速上手 vue 脚手架。首先打开官方文档，点击安装复制命令，打开 cmd 窗口，粘贴并回车运行，等待安装完成。 安装成功后，查看脚手架版本为四点四点四。然后点击创建一个项目复制命令，随便打开一个空文键夹，按住 shift 键鼠标点击右键，然后选择打开 powershow 窗口， 粘贴并回车执行。再次回车选择默认选项，等待项目创建完成。 完成后根据提示进入项目跟目录，然后执行 mpn 乱色，成功后复制其中一个链接到浏览器，打开就能看到项目成功运行了，你学会了吗？关注犀牛哥，一起学前端！

来我们一起看一下啊，就是微微的双向绑定底层原理，咱们先刷一下，就是人家呢在问这道问题的时候呢，先说一下面试题的一个问法啊， 先说一下就是烈士题的一个问法，通常情况呢，他在问的时候怎么怎么要去问呢？第一种问法就是简单说明一下 view it 数据绑定的原理啊，会有这样的问法，还有什么样的问法呢？就说谈谈你对什么呢？你对 voe 数据 方向绑定的理解，还有什么样的做法呢？还有呢就说是简单说明一下，然后呢 中的 mv m 他的一个处理方式。然后呢还有一种呢就是说是说说说你对怎么的，你对维优 e 中 m v v m 的理解。然后呢还有一个呢就是说， 嗯，说明一下，然后微胖猫的指令它是一个操作什么的操作原理。好，这些问的是其实都是同一个问题，唯有你的数据双效保定原理， 那他的问法有可能会有很多变化。好吧，然后我们呢，当看到这样的问题的时候呢，我们再回答的时候，怎么样就回答呢？先说一下回答思路，然后呢你下面咱们再说答案。回答思路呢，有这么几种思路，第一种呢就是特别标准， 我就说一下，你问什么问题，我就回答什么问题，能理解吧，就是不要说的太深入，就第一种呢就是标准回答，标准回答怎么样就回答了，直接说明 双向绑定的，哎，双向绑定的底层原理，他的一个什么呢？哎，他的一个操作，操作语法和步骤， 注意啊，是直接说明，或者说简单说明就可以了，这种标准回答呢，说白了就是你知道有这样一个东西，但是呢，你了解的不多， 一句话带过去就可以了。然后第二种呢，是属于什么呢？是属于就相当于是小龙虾 系详细交交流，详细交流呢，是你跟面试官之间沟通的比较愉快，这种情况下呢，可以怎么样呢？可以适当拓展一下底层的执行过程。 那为什么说是前面要加这样一句话呢？说是沟通的比较愉快，一定要注意，就像你们去面试的时候了，遇到这种情况，人家面试官就直接告诉你了，最近面试的人比较多，知道这句话什么意思吗？ 时间很短，时间有限，我没有那么多的时间听，你一直去阐述一个东西，能理解吧？这种情况下呢，就时间特别短的情况下，就直接说底层，说像绑定的底层原理，直接说一下语法跟步骤，一分钟之内说完， 直接下一道问题了，能理解吧。当然，如果说沟通的比较愉快的话，可能面试官呢，不怎么赶时间，这样的情况下，你可以怎么样呢？把底层的执行过程呢？再说一说。第三种呢是加分回答，加分回答呢，就是说，哎，你在回答的过程中， 然后第一方面呢是一方面是，哎，准确的描述，注意啊，先是准确的简洁的描述什么呢？ v v r 的一个方式原理， 然后呢再拓展一下什么呢？ vue 三的数据数据绑定原理好，这种呢就相当于你一方面在告诉他 vue 二的底层数据双向绑定的操作 知道。另外一方面呢，你同时也是在告诉他维维三，我现在呢也知道，就相当于你对于新出现的各种技术是比较敏感的，并不是一直就着那些老技术不放，能理解吧，就是你， 你们在写简历的时候，个人评价里面会有一条说学习能力强，是吧？那学习能力强不是说你说一句话就可以的呀，你在这里呢，就可以体现出来， 就是通过你在跟面试官交流的这个过程，你要让面试官感觉到你一方面呢工作能力很不错，另外一方面对于新出现的技术也是比较敏感的，哎，知道这个技术在之后可能是不久的时间就流行起来了，所以呢，你 已经提前在准备了，能理解吧。那提前准备的这个过程呢，肯定是你自己哎，结合官方文档，结合提拉的一些资料，自己学出来了，知道了吧。 然后在我后面呢，就是我们的一个打开了，然后我们在描述的时候呢，就是如何回答 啊？如何回答呢？第一种呢就是简洁回答方式，简洁回答方式呢，适合场景，然后面试官 已经直接或者间接的间接的什么呢？给你说了，时间比较长的，时间比较紧张，在这样的情况下呢，时间周期短，就面试过程呢，不会持续太长时间的情况下，你就简单的说一下就行。 那姐姐回答怎么说呢？你说就是维优 e， 他报价很深的一个重要的特性又是什么呢？就是数据双向网易， 它底层呢是通过什么呢？通过数据节食的方式，哎，来完成我们啊，变量数据的书籍，注意变变量数据的一个书籍，然后呢再，嗯，进行什么呢？进，呃，在数据 进行数据的终极和确认然后当数据发生什么呢。发生一根心时注意当数据发生更新时通过自己的发布订阅发布订阅模式来 执行虚拟盗墓术的。虚拟盗墓术的更新通过什么呢？定算法来优化他的一个真心效率。 好吧优化他的更新效率执行差异化更新提高我们的一个试图加载技能。好这样一说完就可以了没了。你会发现这几句话我说的是一分钟之内就说说完这几句话应该要不要一分钟吧。没有啊 第二种呢是详细回答详细回答呢适合朝你就是说面试官怎么样啊面试官就是呃公司面试就是面试过程 比较轻松然后同时呢呃同同时面试的人数较少甚至只有你一个知道什么意思吧。嗯然后同时还有一个是面试官了啊没有表现说什么呢催促 飞速或者说是就是严肃这样的感觉如果说没有就是说就是他从通过眼神已经在告诉你了你快点就会有这种感觉 或者呢他就不停的翻你的简历啊今天这就是好吧就是不停的翻他就是想的是赶紧回你简历里面找几个问题问一下咱们赶紧结束吧就会有这种感觉啊如果他把简历呢你进来的时候翻着看了一下然后放旁边 哎往椅子上一靠这时候就说明今天这个面试过程不会太短。 好吧所以说呢你们中间呢一定要能通过这样一个面试场景来判断你要怎么样去把握一个什么样的尺度去回答这样一个问题 并不是说你的技术真的是特别牛逼，然后呢，这个面试过程就会很快，面试官之后人家今天还有自己的安，安排自己的开发任务呢，任务都还没完成呢，结果用临时给我安排了三个面试的事， 我就想着这三个面试的人赶紧面试完我要去写项目了，结果我去，今天碰到碰到这样一个被面试的人杀了之后，啪啪 吧吧吧在那吧啦吧啦说了说了不停，我没有发，没法结束掉我这场电视， 那这个烈士过程肯定也不会太愉快啊，能理解吗？所以呢，你得就是有时候呢，我们得去就是通过这样一个交互过程呢，大概呢去了解一下说，哎，我们应该怎么样去说？好吧， 如果说详细回答的话呢，这时候呢，就要慢慢的来说了，就说什么呢？哎，还是第一句话，一人依然是一个数据双向保定， 他本身呢就是微微框架中一个什么呢非常重要的特性， 然后主要体现在什么呢？ vidian auditioning， 结合什么？结合表态的操作， 这能看出来了吧？嗯，然后呢，就是或者说是主要体现在或者说是在什么呢？在这个表带的操作中呢，他表现的尤为明显， 那底层接下来呢，说完这个之后呢，就开始开始说什么呢？开始说他的专业术语和底层的执行了， 然后专业术语呢，就是说，哎，你说在这个指令里面呢，表现的尤为明显，其实意思就是其他的地方也也在用，说数据的双向绑定，这个能理解吧？ ok， 然后操作中呢，就在我们的一个什么呢？就是报价中， 报价中将这样的保密方式， 保定方式呢？总结成了什么呢？总结成了 m v v m 这样一种什么呢？数据处理模式，然后底层主要是通过什么呢？就是 v v i 的底层主要通过 oject 点 property pro t 这样一个数据结实的方式。哎，比赛 pro t 是吧？半的比赛的 pro t， 对，然后数据结识的方式来完成什么呢？来完成我们数据的，来完成我们管理数据的出行， 然后在操作过程中，哎，操作过程中他就分装了什么呢？自己的啊？发布订阅模式，发布另， 音乐模式。在发布模式中要用什么呢？发布模式中要用我们助进劫持的 get 来完成我们的数据收集，并什么呢？并形成他的一个散列表进行重复 进行一个就是我们称为抽象术的从处抽象术呢？他呢？在描述的时候呢？一般呢叫描述为，就是叫 abstract a c t。 好，应该是这个名词，就是说，然后说成一个什么呢？抽象术的重信。然后在数据执行更新时，数据执行更新时，对什么呢？散列表中的抽象数进行一个 一个什么呢？进行差异化，对比，差异化，差异化。算法处理主要用到的是什么呢？主要用的是 d 算法来完成一个什么呢？来完成插入数据的收集，插入数据的收集，然后收集的数据 会通过什么呢？会通过订阅模式，哎，订阅模式执行虚拟盗某数的更新，虚拟盗某数的更新，形成新的一个什么呢？出项数， 然后呢，将我们的哎虚拟数据在同步到我们的试图中进行确认。哎，最终完成了什么呢？最终就是高兴的完成了我们试图的一个什么 试图的更新过程啊，整个这个操作，对，整个这个什么呢？底层操作过程就被什么呢？就被称为对数据的一个双向搞定， 这就是详细回答了呀，为啥感觉比那个茶比那种味道还还长呢？ 呵，文档，我这个再把第一幅算法再给你说出来，再给你写上的话，我这一页就写满了。这能分成几步不？可以啊，这里面本身就是分成几步的呀。你，你看你，你看一下，就是放在一行一行的这种，这是不就是一步？这是不就是一 操作过程中分装了自己的什么？哎，发布订阅模式，然后发布订阅模式里面呢，做了一个抽象术的从处，然后数据执行更新时， 然后做一个什么呢？主要用到的是可以算法，然后呢，这是算法的指定，接下来呢是一个数据的同步，最后呢做一个总结，能看明白吗？我真的好被多了，哈哈，我的天呐， 关键是你要是一整句故意的话不好拍。那下面一种就是我说的家风回答了吧， 加分回答啊。加分回答就是 v v r 和 v v 三两种吧，你先说 v v v r， 再说 v v 三，但你要做这种加分回答的话，你不能说的太细致，知道什么意思吗？ 你要说的太细是吧，反倒会出问题。你，人家过来面试你，你一个问题给人家怼了半个小时，面试官就不用再问了，就说，你来吧，我走， 哈哈哈，你来便是我走。是啊，所以这个没有必要啊，加分回答了。就说 vivr 中呢，它数据什么双向？保定的底层直行眼里 主要通过所有的，主要通过 opted 点 dify 好这样的数据截止方式来进行实现的。进行实现 啊，他呢，在底层分装了，哎，底层又分装了自己的 发布订阅操作，发布订阅模式，然后通过什么呢？入境结实的 get 来收集我们的数据，收集 当检点数据。说起了，当检点数据呢？当什么呢？当发生我们数据更新实验 数据更新时间，通过音乐模式，然后呢？推送更新，嗯，对，是我唱吗？对，然后呢？通过什么呢？订阅模式来推送更新，推送更新的时候呢？更新过程中通过指定算法，比如说，哎，指定定算法 来执行差异化更新来提高现代效益。但是数据结实的操作，它对于对于什么呢？对于我们的数组数据啊，对象数据的 个别，或者说是某些操作人数，无法怎么样呢？哎，无法倾听，所以呢，在 vuv 三中，哎， vuv 三中升级了他的一个什么，哎，底层的执行过程 在没有第三种，然后他的一个数据双向绑定原理，数据双向绑定了一个操作，然后呢？是通过什么呢？通过待的方式来进行了实现， 通过代理模式进行了实现，然后代理模式里面呢，你就可以这样来写了，就是，嗯， foxy 啊，代理模式进行了实现，实现的过程中呢，每次操作出去都是通过什么呢？通过对象的一个代 对象来执行数据更新，这样的话，对于目标数据的任何更新都可以很好的完成一个数据分歧以及推送更新的处理 啊，没了，没事，没事，小事啊，这个就说到这了。

学习 vivo 必会的七个基础知识，一微杠半的冒号或者单写一个冒号属性绑定，等同于普通 htm 的属性。 二，事件绑定。 v 杠 man 或者是 aud 符号，等同于普通 h t， m r， r 的昂事件。三 v 杠 model 是双向绑定，它相对于微半的，可以用页面输入来改变值。 四 we got four 的用法。五 wield 生命周期 critic mounted 函数的使用。六，组建的注册与使用。常用的是 一个单，唯有文件可以注册成为一个主见。 七、 xls 组件与跨域问题。

同学们好，从今天开始我们来学习 view， 我们今天有两个内容，第一个呢是简单地介绍一下 view， 第二个内容呢，我们来做一个简单的案例， 我们来看一下 view 是什么？它是一套用于构建用户界面的渐进式 javascript 框架， 我们要做的事情呢，就是把一些数据通过 view 转换成一个页面。 什么是渐进式呢？ vivo， 它可以自底向下逐逐层的应用，如果是简单应用，只需要一个清亮小巧的核心库，而复杂应用可以引入各式 各样的 view 插件。 view 是一个叫做尤羽西的人开发的，二零一三年，他受到 angle 框架的启发，他开发了这一款清亮的叫做 seed 的框架，同年的十二月更名为 view。 那么他的正式的发布呢，是从一四年开始好，然后呢，到现在呢，他已经成为国内前端工程师的必备技能。 唯有的特点，第一个采用组建化的模式，它可以提高代码的付用率，让代码维护的更好。比如说我们现在看到的这个页面，他用这个绿色、橙色和紫色的框框住的 这几个地方呢，分别用了三个不同的 view 的组件，而每一个组件里面都有自己的网页样式和 g s 代码。 第二，他是用声明式来编码，编码人员无需直接操作动，提高了开发效率。我们以前的做法呢，是用的命令式，所谓的命令式呢，就是给一句指令，然后呢出现一个结果。而现在呢， view 是用的声明式，那么我们在开发的过程当中再来体会。好，那么下面的话呢，我们就来 创建一个 view 的代码，我们先来新建一个文件夹，我们来写上第一个案例， 我们需要一个 view 的 view 点 g s 的这个依赖包。好，我们现在把它拖到 vs code 里面来 新建一个主页 index 点 h t m l。 好，我们快速的搭建一个框架 包底，这里呢，我们先来做一个 div 的盒子，盒子里面呢，我们就写上一句话， 欢迎来到 view 课程。 特疼， 我们现在能够看到页面的结果， 好一 已经展示在页面上面了，那么这个跟 vivo 有什么关系呢？没有关系啊，现在还没有用到，我们呢在 head 这里导入依赖包。 好，到这一步呢，还是跟 view 没有搭建关系啊，那么现在呢，我是想要把这个 view 这一个地方呢，哎，改成一个问号， 哎，因为这个地方我想用数据导入的方式来写这句话，也就是说我可以今天展示的是来到 view 课堂，也可以啊，也可以换一个时候呢，哎，他变成了一个 javascript 课堂，所以呢，我希望这个地方是一个动态显示的结果。好，下面呢，我来开始书写 view 的代码。 好，首先我来创建一个 view 的实力， 然后我通过 e l d i v 来让我的这个实力和上面的这个 d i v 盒子产生关联， 我先介绍，然后实现效果。最后呢，我还会给大家画一个图饰。好，我来创建我的数据， 这里呢有一个 course， 它的内容呢就是 view， 我现在想要做的事情呢，就是把 course 这一个 值，它的 view 的这个值插入到我的 h e 标签里面，那么我用插值的方式 这里写上 course。 好，我们先来看一下效果， 我们发现我这个地方呢写的是 course， 加上两个双括号，但是他帮我解读成了 view， 如果这个地方改成 javascript， 那么同样的他也能够 读到我的数据有变化。好，我现在再还原到 view， 所以通过这个案例呢，我们至少能够观察到它跟 javascript 有一点区别。我们以前的写法呢，会把我们页面上面需要展示的内容呢，实实在在的写到这个 h e 的这个语句里面。 但是现在唯有的写法呢，就是这个里面的数据，哎，我用数据 data 这个对象来保存它，然后呢再用数据调用的方式回到我的页面下面呢，我来用一个软件给大家画一个图示。 好，我们来看一下 view， 他做了什么事情啊？第一步呢， 我们在 head 这里引用了我们的依赖包，所以我们可以使用，可以使用 view 这个框架。好，然后呢，我们在 这是第一步，然后呢我们在 body 里面呢创建了一个叫做 div 的盒子，这是第二步。 第三步，我们在脚本里面创建了一个 view 的实力。 好，这个里面的话呢又是一个小步。第一个创建一个实力，然后第二步呢，我们让这个 实力和上面的盒子产生关联， 跟这个盒子产生关联，这个 e l 呢代表 element 一个元素，后面呢是这个盒子的标签的名字。 第三步，我们创建了我们的数据原 data， 这是一个对象，对象里面呢有一个属性叫做 course 课程，它的值是 view， 因为我们的 vivo 的实力跟这个 div 的盒子产生了关联，所以我可以向这个盒子传递数据。 而我的 h e 里面刚好缺一个数据，它的名字叫 course， 它的变量名叫 course。 我们会发现 data 里面呢就有这个变量名，它包含的值叫 view， 所以呢我们就进行了一个值的一个传递， 我们在页面的解析的过程当中，当他读到 cos 这一个变亮名的时候，他自然的就从 data 里面找到了这个 view， 然后把它插入到我们的 对应的地方，导致我们最后看到的页面效果就是我们最后的一个呈现 好，所以呢这个就是一个简单的 v u r 的一个运行的一个机制，请大家学习掌握。

view 环境搭建的第一步，安装 note view 依赖于 note gs， 所以要先安装那个 note gs 环境，下载地址就是 note gsdlrg 安装包下载后直接双击，然后就进行了安装，安装之后呢，然后就有可以输入 no 的命令， no 的杠 v， 然后可以查看 no 的版本信息。第二步，安装 npm 镜像， 因为默认恩田默认的镜像是国外的，使用起来速度比较慢，所以我们这里使用淘宝的。第三步，安装全局无异议，肯定缴手价。 呃，命令就用刚才的用。第四步，创建新项目，这个命令是 wild park， 然后是项目名。第五步， 安装项目依赖，刚才只是初始画了这个项目所需要的文件，然后现现在使用这个命令呢，将会下载相关的依赖包，用 npm install。 第六步，也是最后一步，然后出入 npm 状，第一杯就可以看到控制台打出来 acp locals， 默认端口是八零八零，然后进入浏览器可以看到这个效果。

大家好，我是刘嘉译，这节课我们使用 uni app 创建并发布一个微信小程序啊 uni app， 我们先看一下 uni app 是什么，我们先访问这个 uni app 的官网， 然后他在官网里边介绍说 uni app 是一个使用 vivo j s 开发所有前端应用的框架，他可以开发这个 l s 安卓 啊外边应用以及各种小程序。一般我们使用 unif 的时候，一般就是嗯作为使用 voe 开发微信小程序的一个框架，那么现在我们就嗯创建一个 unif 的项目。首先 我们我们可以看一下，就是他在官网里边有介绍，就是说嗯通过这个 hbui 的人 x 去创建 unif 项目，我们需要先下载和安装这个 h builder， 这里边我已经下载好了，我们直接打开它，然后我们新建一个项目，我们可以点这儿或者说点文件新建项目， 然后在这我们给这个项目起一个名叫戴某， 然后在这选择这个项目所在的目录，我们就把它放到这个地盘 projects 优内艾本目录下，然后 然后在这里选一个模板，嗯，我们就使用这个默认的模板，然后点击创建，这个时候这个啊项目就创建好了，我们可以简单的啊看一下这个这个项目的目录，就是他有， 他就是一个嗯维 ue 的项目，但是他跟维 ue 项目也有一些嗯区别，比如说这个配 js 点儿杰森， 他就不是属于维优 e 的，他是定义这个项目项目的页面的，比如说这个 pjs 里边定义每一个嗯页面的路径，还有一些选项，比如设置这个页面，嗯 顶部这个导航栏的标题，然后这里设置这个整个项目全局的一些嗯， 一些样式。比如说这个导航栏的这个文字的颜色，导航栏的导航栏的这个文字标题， 以及这个导航栏的这个背景颜色等等。然后这个内点 gs 就是维优 e 的入口文件，这个我们指导学过维优 e 的话，然后这个 f 点 gs 就是跟组件， 然后在配句子里边我们就 配这是里边，就是我们具体的这个， 嗯，每个页面，这个每个页面就是在这个配具式点结实里边去设置的。我们创建一个页面啊，就要在配具式点结实里边添加一个页面的配置。 我们这个创建项目的时候，我们已经有了一些这些这样的势力的代码，然后我们可以 嗯运行，先运行到呃浏览器里看一下效果，我们可以点击这个就是运行，也可以点击上面的运行到浏览器，然后我们运行到 cro， 他在下边就 第一次运行的时候，他会下载一些这个啊维优 e 项目，或者说优尼亚和项目运行所需要的嗯插件，我们 我们等等待一会。嗯，实际上在这个 unifa 项目中，我们看到这有一个 minifice 的节省，这是一个配置文件，就是在这里边我们看到这个基础配置里边我们有一个 voe 版本的选择，这里边可以选 voe 二或者 voe 三， 就是嗯，我们在嗯开发的时候就可以选择不同的 voe 版本去开发。好，现在这个嗯项目已经编辑完成了， 然后嗯就是第一次他会下载这个编辑工具，然后他告诉你要重新运行，我们可以点击这里点重新运行。好，现在这个，嗯，编辑完以后他自动就打开， 可是我们浏览器我们看到这个就是这个视力代码显示的展示的效果，我们可以嗯，看一下这个页面，这个页面代码里边我们看到它是有一个啊，一位置 你妹剧里边是这个 logo， 然后有一个 tax 的 tax， 嗯，这个 title 是，哈喽，我们看到这个是 logo， 这个是这个 tax， 哈喽， 然后这个啊，顶部的这个啊标题栏就是在 pgs 的阶段里定义的，有你爱吧？比如说我们可以 呃修改，比如说标题保存，看到这里就有修改 标题，我们可以把这个抬头改为 word， 我们看到这里都发生了改变，剩下的啊步骤就是和，就是在和这个维欧 e 开发是一样的了。当我们 嗯开发完成以后，我们需要把它编辑成微信小程序，我们先把这个停止运行，我们编译成微信小程序的话，就是运行的时候选择这个微信开发者工具，点击以后等待一会。 好，他现在编意完成了，他编意完成以后，我们看到这多出来一个目录是安排开局，他里面有一个 dyste 带五， 这个就是我们嗯编意成的这个小程序的代码，在这个 mp 微信里边我们看到这些就是嗯这个 变异后的小程序的代码，他也 我们看到小程序的嗯文件是微信 ml， 微信 ss， 然后我们我们可以在微信开发者工具里边去打开它，我们打开这个微信开发者工具，然后我们导入项目， 然后选择我们这个 uni app 的目录 unionappa demo， 然后 i'm packagedes 带物这个 imp 微信就是这个小程序的代码，我们选择它，然后我们这儿先不使用后端的云服务， 然后他让你填写这个 ipad， 我们可以， 嗯，这个 ipid 就是你在嗯，微信开发，就是你在这个微信公众平台注册一个小程序的账号， 然后这个账号注册完就对应有一个 ipad， 然后你在这里嗯，添加到添加 加你那个注册的账号的 ipad， 然后你确定 把这些都删掉吧，因为我之前已经创建过了，我先给他删掉，为了 演示还是我们导入，然后选择这个 mp 微信，这时候我们导入进来，然后选择 ipad 不使用云服务，确定， 然后我们这样就打开了这个我们刚刚使用这个 uni app 啊边翼生成的这个 小程序，我们稍等一会啊，现在就显示出来，和我们刚才在这个啊浏览器里边 运行的效果是一样的。当我们用这个微信开发者工具打开了这个小程序以后，我们可以我们再在这里边修改修改代码， 保存以后他就会自动的。嗯，在这个小程序这个微信开发者工具里边自动的刷新看到这个修改以后的效果。当我们比如说我们现在这个 代码都已经写完了，开发完了，我想把这个小程序部署到这个嗯， 步数到这个微信微信上面，步数到线上，我们就在这点点击上传， 然后在这里添一下版本号，然后点上传，上传以后他就把你这个小程序的代码上传到了你 天写的这个 ipad 对应的那个小程序的账号里边，我们现在上传完成以后，我们打开这个微信公众平台， 然后用微信扫一下码，登录你那个呃注册的那个小程序账号，然后点击版本管理，就可以看到你刚刚上传的小程序。 我们在这可以看到这是二零二二年四月十二号十三点十四，就是我们刚刚上传的， 然后我们可以在这点这个体验版就弹出了这个小程序的二维码，你用微信扫这个二维码，就可以在手机里看到你刚刚这个小程序 运行的结果，这就是嗯一个 uni app 项目， 你可以利用 uni app 这个框架去使用 voe gs 编写代码，然后编意成小程序，并且部署到这个线上。我们在嗯编意成小程序的时候，除了这个点击 点击运行到这个微信开发者工具以外，我们还可以点击发行发行到小程序微信。他们两个的区别就是我们可以看一下就是嗯，我们在这里看一下， 就是我们运行的话，他这个生成的呃小程序的代码都是，嗯， 没有经过，没有压缩的。如果我们点击发行，我们试一下发行到小程序微信， 然后我们在这里输入这个微信小程序的 ipad， 我们可以在这个啊微信开发者工具里边 复制这个 ipid， 然后粘贴到这里点发行，然后等待一会他就会 把它编辑成这个，看到多出了一个 beel 的目录，这个就是点发行生成的好小程序代码， 我们看到他生成的代码是经过了啊压缩，我们也可以在 嗯文件管理器里边看一下 安排开局第一次我们可以看一下现在这个 beaute， 嗯，文件大小是九十点九 k b， 这个带 五是六百六十二 k b， 点运行相当于他就是开发版本，然后点发行他就是相当于生产版本。我们在部署到线上的时候，我们可以就是点发行，然后在这个，嗯， 微信开发者工具里边导入项目的时候，我们就可以导入这个 beel 的。 确定啊？刚才那关掉， 我们看这个，嗯，和刚才那个效果是一样的，然后我们再把它，嗯这个生成的代码上传到上传就可以了。 好，这节课就讲到这里。

哈喽大家好，我是斌哥，那么今天呢，有不少同学呢向我反馈呢，关于漏油的一些使用问题，因此的话呢，我这呢刻意给大家准备了一场呢这个避坑指南，希望通过这个总结呢，能够帮助大家 我们在开发微的过程中，或者说呢在入团的过程中，如果说你对一些语法不够熟练的话呢，我们建议大家呢一定要打开官方文档，边看边做呢边学习，这是我们进步呢最快的一个方法，因为我们每个人的记忆呢都是有限的，我也是如此。好，我们来看一下本次呢给大家讲解这个入团的一些 api。 那么我们在使用乳草的时候呢，一共有两种方式啊，第一种呢是生命式跳转，第二种呢是程序式跳转，打的话我们这个前提是呢，这个漏油呢是基于三点零这个讲解的，不是四点零啊，大家不要搞混了， vu 三点零的话呢，这个 vu 乳草三点零是配合 vu 二点零去使用的， vu 串呢四点零的话呢是配合 vu 三呢去使用的，这个大家一定要区分开二和三，不能够不能够去使用混用啊。那么关于漏油的跳转的话呢，一共有两种方式，一种是声明式跳转，一种是乘一次跳转。什么叫声明式跳转呢？就是我们声明一个标签，那直接跳转这个呢是简单粗暴的，也是最快的方式， 当然话这个场景呢使用场景不是很高，一般的话我们在向菜单跳转，我们的导航啊可能会使用如下令，可能去进行跳转，这个是生命跳转， 那么剩下的话呢叫程序跳转。什么是程序跳转呢？你经常会使用到这个热死点倒入入套点谱系啊，这个就是通过 apr 的方式去跳转，我们就称之为呢程序式跳转啊，这个是官方的一个解释。 ok， 那我们这呢给大家列举的这个大概有七八种方式，我们来看一下我们的代码啊，我们这的话呢，通 通过 vocra 呢创建了一个简单的项目啊，简单的项目，我们首先来看一下，我们定了入手文件，这个入手文件的话呢比较干净呢，一共定了，首先是一个首页啊，首页 这个手机的话呢，就放了几个按钮。然后呢第二个漏油的话是我们的详情页面啊，这是一个普通的漏油，我们定了一个麦塔，这个麦塔是原数据啊，标记的它是一个普通漏油。 第三个的话呢，他是一个我们的动态漏油啊，我们称之为动态漏油。什么叫动态漏油？就这个漏油他是不是固定的？这个阿迪的话呢，他是一个变量，你可以传一，可以传二，可以传三，可以传任何的数字，或者说周传的都是可以的啊，他没有任何的这种指定 啊，这个我们称之为动态漏油。而第四个的话呢，他是一个心啊，什么叫心？就是匹配所有，因为我们当你输了一个上面三个漏油的话，都不存在的时候的话，他可以匹配到这个心里面， 就称之为我们这个四零四啊，这个是查到这个找不到这个页面。好，这是我们这个漏油的定义文件。然后的话我们有两个文件啊，两个页面，一个是首页，我们定义了一堆按钮， 第二的话呢是我们的详情页面啊，就跳过来的话，我们可以接触一下这个参数，我们这个把这个拍门参数的话和夸二参数的话都打印一下，我们看一下他的跳转方式以及参数呢是怎么去传的。 ok， 好，我们这个进到这个首页，我们把这个页面呢打开啊，给大家这个同时放在一起，我们来去给大家做一个对比。好，这样话呢看的可能稍微直观一些 啊，拉一下。好，第一个的话呢是声明，是跳转，就是我们直接声明一个入他的宁可标签啊，刚刚说了他的场景就是我们在做我们 的菜单跳转，或者说我们这个官网的这个首页导航，你都是可以用入团定可的，他的入团定可的话呢，本质上内部的话会生成一个 a 标签，我们来看一下， 这个也是官方的去帮助我们去封装的，你会发现呢，其实你写注册立刻跟我们去定 a 标签呢，是一个意思啊，这个是哈西漏油，就是井号杠啊，这个井号称之为哈西啊，后面的话是我们这个哈西漏油的地址。好，这个是生命是跳转， 我们比较简单啊，他是一个入团领克，然后添加一个兔啊这个属性就可以了，那这个兔的话呢，可以是我们这个地址的这个帕斯路径啊，就是杠吉泰尔，或者说的话，你通过动态去传这个兔也可以啊，他是一个 oppojig 啊，你传一个这个 pass 呢也是可以的啊，这个是这个语法。好，那这个的话我们不去做过多讲解，因为这种语 法的话呢，他的使用场景是比较小的啊，一般的话我们都会通过程序式跳转来去实现我们的这个啊漏油。好，接下来话我们重点去讲解我们的程序之路啊，漏油的跳转，首先是呢跳转方式一啊， pass 跳转， 就是我们需要传这个路径啊，这个呢也是最简单的这种方式啊，跳转的方式就是我们定一个漏油啊，他漏油地址呢叫杠底胎儿啊，那这个是我们详细组建的详细界面的这种跳转，那我们最简单的方式就是传一个周串就 ok 了， 如果说呢，你没有传没有参数的话呢，你就完全就可以使用这种方式，也不要去记那些花里胡哨的，只要你没有参数，你就使用杠 tt 二啊这种啊周传传单呢就可以了。好，这是第一种方式，我们来看一下没有任何参数，那么第二种方式的话呢，就是啊带 通过 pass 来去定义的，就他是一个 op 这个对象啊，通过 pass 来去定义。好，那我们来看一下，通过 pass 去定义的话，一样啊会跳跳梁过来。第三种方式的话呢是通过内幕，这个内幕的话呢是居民漏油，就是你需要给这个漏油的话定一个名字啊，他称之为居民漏油， 居民路的跳转的方式的话，大家一定要注意，不能够去加路径啊啊，不要去加路径，他是这个名称啊，这个内蒙的话，一定要和我们这个路线里面这个内蒙的一一对应，我们来看一下啊，是不是一样啊，可以跳转过来。好，这个呢是我们这个啊带内蒙这种跳转， 那么这三种方式的话呢，我们这样的建议大家呢，能够如果说没有参数的话呢，尽量使用第一种，如果有参数的话呢，建议大家使用第二种，因为第三种方式的话呢，能不用就不用 啊，因为他没有太大作用啊，你不管是传唱也好啊，还是呃做别的跳转也好，第三个的话没有太多的优势啊，没有太多优势，我们只需要记住前两种就可以了，只要有，只要没有参数，你就用 gucci 周串啊就可以了。如果说有参数的话，我们使用 pass 啊去进行跳转。 好，那么接下来我们来看一下带参数的这种跳转啊。带参数跳转，那么参数的话呢，一共有两种，一种是跨二十寸，一种是呢 parmes 参数 啊，这是两种参参数方式，就像就好像我们的这个请求也是一样的，我们的宽衣请求的话呢，实际上是盖的请求啊，他会把这个请求地址的话呢，拼接在我们这个呃请求的这种后面通过问号船上的请示。而我们的这种 pos 请求的话呢，我们知道呢，他的格式比较多，有像 ipadk 信接 是这种格式的，有放不对他这种格式的啊，还有一些其他的格式的，就格式格式会比较多，那我们参数的话呢，目前只有两种，一种是跨二尺寸，什么叫跨二尺寸呢？就是把楼参数的话拼在后面，我们来看一下 这个的话就是跨日视频，我们通过谱系的话呢，一样，这是第一种方式，我们直接把参数呢追加在我们这个参数的这个这个路径的后面就可以了。如果是动态的话呢，你可以使用 es 六的模板周串啊，你可以使用这种格式的 来去动态传单，比如这个 p 零零幺啊，你可以传动态的啊，这个也是可以的，比如说的话呢，这个是 pid， 那你在外面的话呢，声明一个 pid 等于幺零零幺啊，也是可以的，我们来看一下给大家演示一下啊，这个呢 p 幺零零幺啊，是不是可以啊？好， 那这个是第一种方式啊，这种方式的话使用场景也是比较多的，就是你觉得奥巴基的团餐呢是比较麻烦的，那么你完全可以使用这种方式。好，那么第二种方式的话，就是通过内幕去定义， 那么第二种方式的话，就是使用内幕去定义啊，他是居民漏油，那么通过夸瑞或者说 parmes 呢，都是可以的。我们来看一下第二种方式啊，这个的话呢，是不是把这块的视频呢给打印出来了呀？这个呢是通过内幕的方式呢去跳转漏油，同时的话呢，传夸瑞使劲。 好，那么第三种方式的话呢，就是我们的通过 pass 呢去进行跳转，一样的传的是跨日使军啊，跨日使军， ok， 这个是应该是第三种方式了啊，传参的第三种方式也是一样的， 因此的话，你会发现啊，他们没什么区别，没什么区别，完全就是啊，居民跳转和怕死跳转啊这种这种区别。好， 我们再来看一下我们关于 pams 的 pams 呢传承的一些方式啊， pam 传承的话刚刚给大家讲了，我们有动态漏油， 动态漏油的话呢，它的变量呢是动态的，那不是不确定的，因此的话，我们这呢传的过程中呢，要动态去传啊，那比如说的话，我们传了一个底胎二杠幺九九，我们来看一下，然后拍上传传一跳，转一下，你没发现的话呢，这个拍二模式的 id 呢？九九九啊，打印出来了 这个 id 的话，就是我们在前面 loa 里面去定的这个 id 这个变量，然后呢他的值呢是三个九，但是你会发现的话呢，这个这个后面这个幺零零二的没有打印出来，为什么呢？因为 parmes 的传单的话呢， 他不支持我们的 pass 这种方式跳转，他只支持我们内幕的居民啊，居民漏油这种方式去跳转啊，比如说的话，我们把把这个 pass 的话呢，改成一个内幕啊，叫底踏啊，他就可以了，我们来看一下， 好刷新一下。然后呢点拍二模式呢，你会发现这个时候的话，拍二模式是不是接触到了呀？因此的话呢，我们这个 内幕的话呢，如果说你想传拍什么事的话，你就必须要使用内幕，他不支持我们的 pass， 这点大家需要注意一下。好，那么最后一种方式就是使用 pass， 你可以传夸瑞了啊，他不是动态都有了？ 好，我们给大家讲这么多呢，可能大家已经听得比较晕了啊，越听越晕啊，其实呢，我们这呢有一些非常简单的这些口诀呢，给大家讲解，就怎么去快速的去使用我们的一些语法的，就 是你只要按照我的这个习惯来啊，就不会有错。第一种是如果说没有没有参数，你就使用 pose 啊杠 pass 就可以了，越简单越好啊，越简单越好， 不要去搞什么，怕是等于钢铁底贴二，内幕等于底贴二啊，太，太麻烦了。你只需要记住第一种，没有参数你就只用谱写啊，一个漏油地址就可以了。因为什么呢？因为我们漏油地址是最容易记住的，我们漏油地址的话他也不是，他也是不会重复的。而内蒙的话也是记不住的 啊，因为内蒙的话在入场里面去定义的，你还要翻过来去看一下，太麻烦了，我们只需要记住我们页面地址就可以了啊。好，第二种方式，只要你有带参数的话呢，你就使用 pass 啊，只要带参数你就使用 pass 就够了，那 pass 的话等于杠底胎儿，然后你传个参数 啊， id 等于九九九啊，九十九，这个是代餐的啊。如果说的话，你一定要使用帕尔姆斯的话，你要记住他必须是使用内幕啊，居民录有才可以， 只要你使用 pams 的话，必须使用居民都有才可以。这第三种方式，那什么场景下呢？使用 pams 呢？就是有一些页面你跳转过去之后的话呢， 跳了过去之后的话呢，你这个页面的话呢？可能啊，不想让别人看见我们这个这个这个参数，而且的话刷新之后的话呢，页面会需要重置，那这种常见的话，你就需要使用我们这个这个带拍门这种传单了，因为我们页面一旦刷新了之后呢，我们这个拍门参数的话呢，他是不会保留的 啊，排面参数的话，他是保存在我们内存地址里面去的，就是他的内存里面存出的，你只要页面一刷新他就没了。那怎么去解决这种问题的话呢？就只能使用我们这个十道具体去存储一下 去记一下了，那一般的话我们还是建议大家能够去使用我们的快二十啊，因为快二十的话，他的参数是是贴贴过来的啊，你是完全可以获取到的，而且不管你怎么刷新他都是不会变的啊，这个对我们来说的话呢，也是非常友好的啊， 而且的话呢，它的场景也是使用最最高品的。好，那么这一次的话给大家总结总结了一下我们关于这个微如串的二点零呢啊，三点零呢，它的一些使用那些啊，一些用法啊，或者说它的技巧呢 啊，你不用记得太多啊，只需要记住几个精辟的这个点就可以了啊，没有参数的话我们就使用 pose 啊，加上 logo 地址就可以了，有参数我们就使用 pass 啊，加宽瑞。那车子情况下的话呢，不得不用的话呢，你再使用 pams， 一般这种情况下你也可以忽略啊， 基本上的话他使用的场景呢也是非常少的。好，我们希望呢，这节课能够去帮助到大家。好，谢谢大家。

大家好，我是温州，今天继续跟大家分享就是 we will 一些核心模块组建和状态管理的部分。首先我们打开我们的 id e， 打开我们的谷歌浏览器， 我们可以看到在这个，嗯，我们写的这个之前写的代码里面，其实已经实现了一个小型的 vivo， 我们实现了这个组建的数据的，嗯，双向绑定，或者说这动动态渲染这个整个场景的一个演练。大家再回顾一下，就是我们使用注册了这样的一个组建 这样的一个虚拟动物，然后我们使用这样的一个乱的方式， creteabb 的方式把它这个渲染出来，然后正常的渲染，然后正常的 update 这样的 parts， 这样的一个场景回到我们这个业务的，呃，业务的这个才开始这个场景， 我们就是他本身就是我们真正去做一个项目的时候，项目是有复杂度的，他可能就是大家可以看到这个皮蛋瘦肉粥和下面的这个海苔，海苔蛋黄这个派可能都是一个主见， 那就是我们不可能说一个一个一，一个业务就写一个组建一个业务写一个组建，就我们看到的所有东西都是一个组建，那我们把都都写成一个 gs 对象，那可能是不合理的。 但项目大了之后，我们就要考虑他的一个副用和抽象，这就是我们开发的一个流程，就是先完成需求的开发，然后就是想到就是我们要抽象和封装，然后对这个整个项目的结构或者说代码的这个维护性进行提升，所以说就引入了我们现在这样的一个概念，就是主见 和状态管理两个事情，就什么是主见呢？在微友里面，主见他可能定义成一个可可附用的微有实力，因为是任何一个 独有的实力，他如果可附用的话，他在，嗯，他在 a 组件里面能用，在 b 组件里面能用，他都就变成一个可附用的组件。比如说这样的一个场景，他比如说这种黑，这种黑色方块，他可能是可能是同一个区域或者同一个模块的话， 或者说我们直接用这个例子去，就是这样的一个点餐的，点餐的那个餐的内容，我们就可以认为他皮蛋、瘦肉粥和海苔就是一个同一个主见，所以说 组建就是一个可附用的，我有实力，我认为他是业务和呃业务的抽象与服用，他解决这个问题，然后组织，嗯，因为组建本身就是一棵树， 或者说我们看到了杜牧，我们现在其实所有的概念里面他就都是一棵树，因为本身杜牧就是一棵树，本身那个 h 天庙他就是一棵树，杜牧就是一棵树。然后我们在这个组织，他既然这个组织，这个组建，他既然他也最后肯定是成为一个树的形态 展现出来，因为他再怎么抽象就再怎么用 gh 去抽象这个 htm， 他最后的抽象的结果都是一棵树的形式，嗯，当然这个具体举一些例子，比如我们看到一些叶头啊、侧边栏啊，这些链接啊、导航啊，都可以成为一种，都是都可以成为一种主见，这就是我们去定义主见， 既然有主见的话，我们就需要，可能就需要下面一个叫状态管理了，就是当我们项目复杂之后，我们不仅需要把项目的呃通用的模块封装成一个主见，提高他的附用度，然后再通用的主见可能在不同的模块里面使用，可能有的在侧边目录使用，有的在这个 高图使用的，在这个旁边的目录呃龙内容去使用，但是他可能使用的时候共用一些，共用一些数据，比如说嗯，比如说一个用户信息，用户信息他就是一个全局的数据， 每个模块都想去获取悠着练或者说悠着 id 这样的一个东西去使用，这就是一个全局信息，就是当这个项目越复杂的时候，某些全局信息需要我们去维护，去跟踪，去什么去更新这样的一个场景， 所以说我们就引入了这个状态管理呢，就是机制在里面，就是项目复杂了才需要引入状态管理，不是说我简单的项目其实是不需要引入状态管理的， 复杂项目是需要有状态管理去维护他的关系，就是，嗯，可能是一种状态机的管理观念在里面，就是详细不展开，错了，就是我们需要维护这个状态，然后，然后我们就还是 状态管理。还有一些约定，比如说我们只能通过我们的 action 去分发事件来改变这个 stop， 嗯，只是这就是 api 里面的约定，比如说我们可以使用的是酷，嗯， cool 里面有调试工具，跟物有相结合的一个 divers 那个 pose 去调试这样的一个东西， 这就是我们的状态管理。所以说我们再总结一下，就是组建就是为了附用筹项，然后在大型复杂项目下面，我们就需要把这些逻辑这些数据之间的这种这流转控制，那我们需要状态管理，就大概是这样的场景。 好，具体到我们当前这个业务里面来，我们首先我们可以看到我们总总共有核心的流多个模块的组建，我们可以看到在这个， 在这个历史的里面，我们可以看到这下面有一个最下面就是一个计费的，一个计费的一个模组建中这些就是一个外卖，每个每个每 一个东西外卖的一个组件，给他收了六证组件，所以说他至少有两个组件，我们看到的或者说上面最上面标题商家推荐他也可以是一个组件，那我们怎么去把它定一层组件呢？所以说我们引入了这个组件的一个概念，我们把它简单的封 装成一个对象，对象里面添加一个属性就要一直看不能等，然后我们使用一个 ran 的函数把这个驱离洞抛出，抛出来， 就这样就可以形成我们的主见，比如说这就是一个实物的主见，就是我们刚才中间区域的实物主见，然后这就是一个计算金额的主见，那我们在主见使用的时候，我们就又还有一个就是一个应用主见，应用主见可以认为是一个撸特的主见，是一个跟主见，那我们就要在 range 里面去把这个付的和这个记 计算金额的这个逐渐加进去，所以说我们就实现了这样的一个应用的构建，我们怎么去构建它呢？就是我们简单提起来看一下效果， 对吧？我们可以看到我们定义的这个服务的主见是不是跟我们想象的一样，对吧？他定义了这样的一个皮蛋瘦肉粥，二十元一份， 但还没总共现在是定了零份，还有一个增加的按钮，对不对？然后一个计算金额，在下面一个组建，然后他有一个总计，总计文文案，然后有一个现在多少钱的一个现在零元嘛？因为他才开始买，买了零份嘛，零乘以任何数他都是零嘛。所以说就是 从来的程度，我们已经实现了这样的一个主见，那具体的实现是这样的呢？就是我们在撸特这个这个主见里面要去返回虚拟动物的时候，我们在这个这个渲染函数里面做了稍微有一些些改造，就是我们可以找到代码， 就是我们加入了这样的一个呃，判断，做了一些优化，就是当这个虚拟动物本身是一个 complus 组建的时候，我们返回的就是这个组建的 rand， 就是因为我们本身。大家可以看到我们可以第八个一下， 因为在在主见内部，因为我们使用了这样的一个副的主见，他里面其实是返回了个软的，我们可以看到这个主见是谁？这主见就是我们这样的一个，我加个 m 吧，否则大家可能看的不太清楚。这主见是有名称的， 加个 name for the name， 对吧？我们再加个 name 这样的一个 come money 的这样的一个组建啊，说行， 嗯，再重新执行一遍啊。我们可以看到这样的一个恰的，这样的恰的他其实就是我们的这个副的主见，他主见里面有个 rend， rend 里面返回的就是我们刚才那个熏冻，所以说我们进行了这样的一个封装，把它反 push 到这个，把这个虚拟洞重新 push 到这个 render 里面， 其实就是把这个软的返回的虚拟动物再添加到这个根的容器里面，就是实现了这样的一个功能。刚才有些稍微的可恶，行，那我们已经基本上实现这样的一个软的功能，就是我们就通过组建的定义就完成了这样的一个 功能，就是我们定义了这两个组建，并且已经实现了这两个组建的渲染，对不对？然后还有一个就是状态的管理， 什么叫状态管理啊？就是当我选择的外卖份数，就是比如我添加了一份外卖，那我计算的金额肯定是要乘以这个外卖的单价，对不对？所以要计价，所以说我们这个外卖的这个 外卖的份数会影响走金额，这这两个之间是相互影响的。就是我们之前会提到的这样的一个自动计算的一个场景，就是单元格的这种这种计算 那种场景，比如说我们之前在 raptum 里面会用到这样的一个响应式图片，嗯，对吧？我们当我们外卖的份数变了，我们的外卖的总价就会变，对不对？这就是一个响应式的一个呃，具体的业务场景， 这个总价就会变，所以说我们在这个里面我们就需要维护一个全局的状态，这个全局状态响应都会触发我们这个总价的计算， 我们就引入了这个死盗的概念，其实在这里面用一个死盗的概念，我并没有去使用很复杂的状态管理，因为我们的业务，因为我这个课程是相对一个忽悠这个整体概念的入门的过程，而不是一个详细描述的过程。后面有很多之前包括很很多复杂的算法，或者复杂复杂的实现，或者说很多异常 场景的处理，我都没有处理，只是当着大家很好的去理解，在无忧的场景下面大概是模具是这样的，所以说我们维护一个状态要全局轮访问，能定一个 windows 方法，你可能是 windows reactive 的一个方法是可以的，对不对？其实就是这样的一个方法，我们把这个方法就定， 把把这个数据变成一个全局响应的数据，那这个全局数据响应的数据变化之后，其他与之关联的这个杜姆，他既然自然会发生重新渲染，就是说当这个空的变化的时候，这个计计算金额的这个杜姆自然会发生这样的一个计算的 update， 就是在这里面， 所以说整体的这个库瑞特 app 的流程没有变，就是你这个 pats 的流程也没有变，我们只是增加了两个两个概念在里面增加了一个主见的概念，大家可以看到主见，富的主见，一个计算金额的主见，然后还增加了一个概念，就是 stop 概念， stop 概念其实就是 一个全局状态的概念，你可以认为他是一个全局变量，全凭响应式的变量。当然有可能很多生态恋爱或者说细细微的场景上面有不同，但是整个整体的实线是这样的。所以说我们 再回顾一下我们为什么要引入主见和状态管理，我们应如主见和状态管理的目的就是使得复杂项目可维护，可管理，就是这个目的，其实主见的目的就是这样子， 所以说基于这样的场景，我们实现了这样的一个，嗯，物有的主见以及状态管理。行，那今天的课程就现在的课程就到这里结束了，下面还有更精彩的部分，大家不要错过，继续要继续关注哦，再见。

做完页面布局之后呢，我们把左侧菜单给做一下啊，我们先打开这个艾力门里外， 然后找一下这个导航， 嗯，叫这个导航菜单，他这有个横着的一个样式，然后还有这种竖着，然后我们就拿这个灰色的样式，然后找到他的代码 bmm 放到我们的 app mv 八二九， 然后他下边呢，还有两个方法， 然后看一下效果啊，就是这样。那我们把这个底下这个背景色呢，这个灰色，然后 看一下他这个设置，我们改一下他这个背景色。背景色是在我们的料子里边选的，我们把这个三六八， 这个不是这个颜色， 然后他这里有一个白边，白边我们 把这边我记得是使用一个右边框，嗯，这有一个包在刚转一下，这有个遗像素，我们把它点掉之后就是没有了，然后我们把这个属性给它去掉， 那我们可以在这里面去，因为 dl 就是艾特门没有，他每个中间这个标签都对应的一个克拉斯尼，所以说我们 用这个标签就可以当做一个卡拉，很多人用 就可以取到那个那个元素。但此刻呢就是防止我们改掉出来之后，哎，没想到其他页面也比较强，然后改了一个包子， 现在就是这样一个效果， 然后我们写了两个页面啊，一个一个手印，然后一个二级的，一个菜单啊，一个一级的，然后一个二级的， 然后我们再微右手下啊，前面有一个目录，这叫后母手链， 然后我们再来一个二十级的目录系统，系统里边的用户还你 这样两个这个页面呢，我们把它给导入到 入油里边啊，入油的话我们设一下这个导入，导入一下 you got money， 走进来之后呢，我们推一下这个绿油啊，因为他这个就相当于 这个录入呢，就是想法给我们把鞋帽，把鞋帽相当去记到这个，记到这个之后呢 这下边呢我们页面再到达陆流呢，是在这个内部上的，所以说我们把这个陆流呢推到这个打结杠下面就行了，就是当做当做他的一个子路运， 然后呢 pass 呢这叫 home， 那个也叫 home， 当主见名呢，就是我们领的这个 home 啊，这个地方我们改个名啊，就不叫这个 后门，就叫利奥。那我们法协道，就是我们访问法协道后门就直接就是被打在这个位置， 然后同样的我们另一个 你们呢你到流浪那里去，就这样这样之后呢， 然后我们可以看一下这个路由，把防卫反折到后面 啊，因为这是因为呢我们这个进了陆游之后呢，没有配这个陆游的出口，我们需要在这个媚眼这个里边呢配一个陆游的出口，我们找到这个魅 在这呢，我们加一段卢特高，卢特高的一部分， 现在就是把那个后部界面的啊率远到这个这个溜出来这这一部分，那我们访问这个 this is from u 段麦的一个档啊，把这个 uzi 这个页面给拽上到这啊， 然后我们把这个螺丝带单这个也顺带我们找到这个 lv 八，然后再找一个不通的，就是导航四个这种个不得一分放到前面 一再次呢就是他这个物流的漂亮，然后名称呢我们就叫， 然后呢再一个二级菜单，二级菜单的话我们就是一个 thou， 他的这个说理呢就是非常的好，然后他这里啊重新定义了这个标题，叫我们去叫非常安利， 然后他这个分数就不需要一个分数一和分数二，我们就直接拿，拿到拿里边这块就可以了， 拿着这个 except for 看一看里面啊，对不对？然后我们现在呢点击他是没有效果的啊，因为我们需要给这个 这个总字呢加一个属性啊，我们看一下这个菜单的属性，还有一个叫撸腿，就是说是否使用这个威油撸腿的模式啊，使用之后呢，他会把这个一袋子作为胖体型微微跳转， 所以我们把这个水给他加上，加到这，因为他 绑定的是个移动，所以我们要用这个帽号的方式啊，绑定上这个撸串的一处。然后之后呢我们看一下这个手链啊，照到后面让我们点进户管理啊，照到优点， 这样的话，这个菜单这个点击跳转就已经是这样了。但是呢这有个问题，就是说我刷新之后， 现在这个页面是在 u 字，但是我这个 u 字他并没有被选中啊，或者是我们看这个手链现在是后面，那我们发现之后呢，他这个手链是没有就是没有被选中啊， 那我们需要处理一下啊，他这个这个呢就是我们需要通过这个默认当前激活的这个菜单的一袋子啊， 来来控制他是否是当前是哪个所处的菜单。我们给他绑定一个问题， 他现在默认叫二，我们没有录音呢，我们把它绑上一个属性，就是我们的照片来这个属性呢，我们通过计算属性来获得， 预判属性呢，就是他会延伸你需要的那个值，如果他怎变的话，他就会把那个值啊给出压到，就是给布置到这这个我们这个电量啊， 我们需要的知识，什么就是那个我们录的感觉 多好， 当前不如啊， 刚才漏油的就行啊，我们把这个地平把水给这个对上啊这个边上，这个边上呢，然后复制给这个这个属性啊，之后呢就是说 你配套相同的一袋子呢，他就会默认的那个那个菜单就会高亮啊，现在是 home， 那我们刷新一下 一边在后面这个问题就解决了。然后下一个问题呢就是 就是我们在进这个反斜杠的时候， 我们希望他呢是默认到这个后母印啊，所以说我们需要加一个属性，就是在这个如此呢这个地方 打结了之后跳转到这个，跳转到这个页面之后呢把这个路由纯金像到某个页面上去啊，我们这个纯金像就是 到这个海鲜的后面。 这样啊，我们在好在这个打铁状的时候呢，咱们可以直接跳回这个跳到这个手链这边啊， 然后 之后呢我们改一下这个彩带的这个图标，然后他这个主页里面呢提供了很多这个图标，然后我们找一下首页的话，我们就用这个， 然后系统把脸，我们就用这个就是说齿轮的齿轮的一个效果， 然后这两个就可以了，然后我们其他的呢就直接删掉就行了，如果后边有需要的，咱们在网上加 现在这个菜单呢就完成。