VUE浏览器打开不显示元素

哈喽，大家好，大家看这样一个效果，在点击这个元素时候，他会变成这样，由这 他又会变成这样，我们管这种效果叫元素共享效果，我们这里呢也写了一个比较简单的，大家看 相当于同一个元素变化的位置，处于一种共享的状态。那具体的实施思路是怎么样的呢？首先我们分析一下这原先他的这个在这里的元素，他的布局是相对布局， 他要变成这样的话，这里子是绝对布局，因为他是垂直水平居中吗？相对于这个适口相对布局变成绝对布局，他可以直接实施这种动画效果吗？好像不行，对不对？那有没有什么见解的方法呢？其实我们可以先 先把相对布局改成绝对布局，再把绝对布局的 left 跟 top 值设置一下就可以了，因为绝对布局和绝对布局之间的 left 跟 top 值互相改变的话，他是可以做到动画效果的。但是现在会遇到这么样一个问题， 把这个代码注视一下，大家看啊，现在是相对布局，点击之后，大家发现没有，他会从左上角变成垂直水平居中的效果。 因为我们一开始把 fix 的布局设置成 left 零， top 零了，所以相当于 只要你把这个相对布局变成绝对布局的时候，绝对布局就会从左上角直接变换成百分之五十。百分之五十的效果显然不符合我们的预期，对不对？所以我们可以 采用一种方案，就是当你准备要从相对布局改变成绝对布局的时候，可以获取现在相对布局元素的 top 纸和 left 纸。 举个例子啊，当你在点击这个元素的时候，你可以获取它的 top 值跟 left 值， 比如说啊，这里是五十，这里是四百五十像素，那么我们需要做的是先把这个 relative 改变成 fixed， 对不对？同时我们要把这个 left 和 top 从五十，哦不对，四百五五十 变成百分之五十，百分之五十，对不对？我们要把这个 left 值跟 top 值给他设定好，要不然他就会从左上角直接变换那个显然就不符合我们的效果。那有了这个速度，我们就可以把这个主食给他解开，那我这里只是简单的实现了这样一个效果。 只是一张图片啊。其他的呢？大家可以自行尝试一下，下期再见。

还是有一些非常非常小的隐患，这种隐患呢，我希望大家永远不要遇到，遇到了之后呢就有点麻烦了。你看现在是不是效果，各种效果都完成了，无刷新跳转完成了，根据不同的页面渲染不同的组件完成了，其实也并不复杂啊。 好了，还有什么事呢？加个东西叫命名路由，这个啥意思呢？其实目前呢还是有一些非常非常小的隐患，这种隐患呢，我希希望大家永远不要遇到，遇到了之后呢就有点麻烦了。什么隐患呢？是这样子， 写来写去，写来一去，因为都快写完了，有很多的抄链接。突然有一天啊，你的万二的项目经理，万二的产品经理就跑过来了，哎，小伙，哎，咱们想把这个文章页面啊，这个 vlog 啊，给他改一下，改成什么呢？改成阿铁口， 你看你要不要崩溃。那你就改呗，我们就跑到这个哪里去哪里去改，改到这个吗？配路由配置这里是吧？把这个路由配置从 vlog 变成 article， 这样你改了过后，你会发现链接全部不能用了，首页没问题，文章匹配不到了，对吧？是不是匹配不到这个主见了？ 关于我这都没问题，就这个东西匹配不到了。那如果说你在页面上到处是抄链接，到处都要跳到文章页面改的链接地址是不是很多，你还跑到主线里面到处去改，但这个是个小问题啊，也有的时候呢，如果说发生了，他就不是小问题了，没有发生就是小问题。那怎么解？能不能解决呢？可以解决的，可以解决的。你看啊，我们改动了这个路径含义变没变？ 含义不能变吧？你含义变了就是需求都变了，那需求变了肯定要说你在改改贷吗？这是毫无疑问的。没办法，那含义一般是不会变的啊，他只是路径变了，这含义还是博客。 因此呢，怎么办呢？怎么来解决这个问题呢？我们叫做命名路由。什么叫命名路由？我给每一个路由啊取个名字，比方第个路由的名字就叫哄啊，管理路由是啥随便你路由 是啥无所谓，反正你就叫了个名字。你名字不能变，因为名字表表示是含义，含义不能变对吧。路径随便变，我们先给它变成 vlog 吧。 好，那么接下来呢，我们在跳转的时候啊，我这里该给每个路由取个名字，然后跳转的时候呢，就不是直接像之前那样子啊，写个 two 然后呢？写个什么啊？负是吧，这样子就是平直接写路径了。你不要写路径了， 你该写对象啊。写对象的话是不是必须要用动态绑定对吧。你不要写 gs 代码才能写对象，写对象对象里边用 name 首先来表示我要跳转的路由名字，那他就会从从那个路由配置里面去找。哎，你跳转的名字是负哎，找到这个了哦，他的路径是这个名词呢，他会自动的把这个路径放到这来。 明白明白的意思吧。这样子呢，是不是就解除了跟路径之间的偶合了。那你只需要关注名字就行了。因此呢我这边把这改一下啊，我这里不用宁可这个名字了啊，你这个属性了啊，那换一个 嘞。我们这里呢用哄 message 对吧。我们这里只不过是循环绑定而已，其实就是把这个东西名字呢放到 to 这里，而 to 是什么呢？ to 是一个对象，对象里边 name 的属性给它复制为 itune 的嘞，对吧？只不过一个循环动态绑定而已， 那么他就会根据名不同的名字去找到对应的路径生成。好，你看没问题对吧？你看，没问题。好，接下来一看，神奇的事情发生了，我现在呢，去改动这个 vlog， 改动的路径 r t 口现在有没有问题？现在不会有问题了。为什么？因为我们这边关联的是名字，不是路径的，是不是解除了跟路径之间的偶合啊，那么他会根据名字动态的去修改他的路径。你看啊，首页现在文章自动就变成 r t 口了， 看到没，是不是很舒服？这样子啊，这叫命名路由，并不复杂吧。关注多余简介号的同 学打断一下，我是袁老师，你能跟着我卷到这里，那我就再送你一个能卷死所有人卷的五体投地的课程。这套课就是我录制的大师课，里边包含原理、原码，思想，还有笔面试题， 这些都是求职提薪、跳槽绕不过去的内容。并且呢，我毫不夸张的说，论这些内容的价值，如果说一份工作年薪三十万，那么大时刻这几天讲的东西可能在你的面试中就能值十万。 单说他里边涉及到的面试题，只要你面试的时候遇到了，这是大概率事件，你把我给你的答案不用百分之百，能够说个百分之六七十，对面试官的杀伤力都是核弹级别的。不管他曾经面试过多少人，这种场面他没见过，我一点不跟你开玩笑。 当然呢，我也欢迎各大公司的主管面试官前来参考借鉴，同时呢，也送给各位同学拿去学习提升。怎么领取评论区第一条，进粉丝群，然后根据提示领取就可以了。

下面这个问题，导航里边我单独说一个东西，叫做激活状态，这啥意思呢？就是我们搞定这个选中效果， 其实这个选中效果啊，导航就通过个 rotor 宁可生成的 a 元素啊，他已经给你考虑到这个问题了，因为我们导航里边有些当前到底是什么页面还要给选中，对吧？他怎么考虑的呢？他会用当前路径。什么叫当前路径？如果你是哈西，这就是当前路径。如果你是不是哈西，你是这个玩意啊？ history api， 那么这个玩意就当前路径。 总之呢，他会根据模式来者得到当前路径，对吧？他会把当前路径和什么呢？和你的导航路径进行匹配。什么叫导航路径？ 这种？这种就叫导航路径，由头领口的 two 跟每一个 a 元素进行匹配，比方 blog 跟这个什么斜杠进行匹配，然后呢？ blog 跟什么 blog 进行匹配好，然后他会在合适的地方给你加上一些内样式，这内样式他到底什么效果？他没有写，你是 自己去写，然后把那样式的名字给你加上，看着啊，他怎么弄的？如果当前路径以导航路径开头的算作匹配， 那么他会加上这个的样式。如果当前路径完全等于导航路径，得算做精确匹配，他可以加上这个的样式。比方说我们访问的路径是 blog， 比方说我们访问这个路径就当前路径吧，那么他就会跟这个，他就会把这个路径拿去跟这些导航链接进行匹配。怎么匹配呢？如果说你的导航路径是这个，你看首页是不是这个， 有没有匹配？有匹配的哦，因为当前路径是以这个路径开头的，你看是不是也斜杠开头嘛，至少有个斜杠嘛， 那么这个东西就算匹配，他会给你加上这个的样式，你看一下我们的首页，是不是加上这个的样式叫做 rotar link x 啊？后面这个是我们自己加的啊。看前面这个啊，你看啊，第一个 a 元素是不是跟当前路径 vlog 进行匹配，它是以它开头，因此呢，匹配 好第二个 a 元素啊，你看 vlog， 它不，这个路径不仅以它开头，而且两个相等，因此它可以加两个样式，一个是我们刚才看到的 rotor link active 匹配的样式，还给你加了一个精确匹配的样式。呃，那样那样式啊，叫 rotor link exact， 精确的选中的样式， 对吧？可以加两个样式啊，你看，我这里也记住了的，不仅匹配，还精确匹配好。下面这个呢？呃， box 呢？ 这个，这个玩意，这个路径是以他开头吗？不是那么一点关系都没有，当然更加不可能相等，对吧？一点关系都没有，所以说没有的样式，下一个呢？一样，下一个，一样，没有的样式，他就默认用这种方式来做的，哎，用这种方式来做，我们能不能写出来这个效果呢？ 感觉上好像是可以的，对吧？我们给哪个的样式设置样式啊？有人说，哎，我应该给他设置样式，对不对？哎，但是呢， 你会发现他呢，有可能有两个元素都有这个样式啊，也，他也他开头，他，因为他不是精确匹配嘛，他只是匹配，对吧？因此呢，他有可能匹配，他也有可能匹配，所以有两个 a 元素都可以选中，那能不能用精确匹配来设置个那样式呢？用这个那样式来设置这个效果呢？可以啊，我们来试一下吧。 我们在这里啊， menu 这里。呃，找到下面我们之前的事实吗？是 negative 的，对吧？我们这里改成这个，改成它这里写的这个 rotar， ink， exact， egg， tea， 对吧？改成这个类样式的名字。好，你看文章是不是选中了 点？首页是不是选中了点？关于我是不是选中了点？项目效果是不是选中了，你看那样式啊，你自己去看那样式好像没问题啊，挺好的呀。 啊，如果说你真的是这样子的话了，如果说没问题的话，那就 ok 了，那就设置没问题。但是在我们这个项目里边实际上是有点问题的啊，因为我们其中有一个地方有点麻烦，什么地方？文章这里，文章这里有可能会出现这种情况， 他的链接可能是这个样子的。比方说看一下啊，我们到找到文章的一个分类，某一个分类，你看他链接变了，变成这个样子，因为在文章这里可能有很多个不同的页面都他都是要选中他的， 懂我的意思吧？也就说我现在要比方说做了要做的是什么？这个东西访问这个地址，这个 a 元素还是要选中，但这个 a 元素能选中吗？选不动了。为什么呢？因为现在这个 a 元素他不是精确匹配了，这是我们的当前路径，他只是以他开头加上那个 rotling x， 但是我们要做的是不是他还是要选中， 那说明啥呀？说明我们肯定肯定是不能用他了，但是用他也不对呀，对不对？是不是用他也不对啊？因为用他的话，有可能把他又影响到了，对吧？他也有可能，因为他也是以他也写给以前刚开头的，对不对？哎，是不是就出现了一个矛盾啊？用他的话，一看两个都选中了，对吧？肯定是不对的。 那怎么办呢？你看啊，现在就接下来就可以改动了，他是支持改动的这个匹配规则。 rotar link 啊，这个导航啊，他有一个不耳属性的一个寨子。什么意思？精确的。啥意思呢？如果说你添加这个不耳属性了，那么他就会把匹配规则就之前这个匹配规则改了，只有精确匹配，他才会有这个的样式。 好比方说，看一下例子啊，当前访问路径是 blog 首页，我是精确的，那么不好意思，现在没有的样式了， 因为他一旦变成精确匹配的话，他必须要他和他相同，才会有这个类样式，不是精确匹配的， ok， 那么他就有两个类样式，跟之前一样，对吧？而 boss 是精确匹配的，那没有这两个，这个东西也没有啊。那么再比如 blog d t l 一二三，比方这个访问路线 好，我们的导航，这是我们导航，首页导航，他精确匹配，那肯定是什么路，什么内名都没有。那如果说他不是精确匹配，是不是至少有个这个东西 以它开头吗？于是呢，我们把它改成一个，再看一下啊，看一下这个 a 元数，是不是现在什么样式都没有了，没有一个精确匹配的。看下首页，只有精确匹配的时候，它才会加上加上这个样式啊。前面这个样式我就不用了，就用这个 rotarind att， 因为它也是只有精确匹配的时候才会有， 对不对？哎，是不是就相当于是我们之前写 menu 的时候写过了这个东西啊？是啊，就这个东西，一个 sex 对不对？那么现在把这个属性名字换一下啊，一个 sex 是不是要精确匹配？ 激活状态是否要精确匹配好？那么这里这边文章呢？是 boss 不需要精确匹配，因为文章里面还有很多的东西都要匹配到文章，只要以文章开头就行了啊，首页必须要精确匹配。关于我必须要精确匹配，这个必须要精确匹配，这个玩意必须要精确匹配，因为他们都只有一个页面。好，那么这个没设置不要 啊，没有必要要了，因为现在有一个 root link 啦，它会自动绑我们家的钥匙。好，回过来，你看，这是我们的数据，那么我只需要把这个 excite 绑定到哪儿？ 绑定到 it， 点一个 reaction。 首先我们看首页精确匹配了，是不是应该有他就有这个样式，只看这个样式啊？然后点文章精确匹配了，是不是有这个样式？但是文章这一块呢，我不要求他精确匹配，因此呢，我们访问这样的地址， 访问这样地址是不是也有这个样式，你看文章对不对？而关于我是精确匹配的，因此呢，必须要跳到这才有才有这个东西项目效果。哎，你看现在是不是符合要求了？我们是不是要只要设置这个样式就行了，对不对？而这个样式是不是我们已经设置了？刚才已经设置了啊，你看我点文章没问题吧？这东西都没问题。然后我们访问刚才刚才的文章下边的地址啊， 你看他是不是也是选中的，对吧，就挺好了。哎，我们就把这个激活状态就是选中效果锁好了，好就梳理一下啊， 关注都一剪辑号的同学打断一下啊，我是袁老师，总听我讲短视频，这回呢，来听听我讲的大课。我给大伙呢专门录制了一套大吃课，现在呢，免费送给你们， 不管你手上现在看的是什么样的资料，都应该先停下来，先来看一看我这套大师课。一方面呢，这套课程里边的内容都是前端最核心的知识，其他的知识都是在这个基础上生长出来的，你先掌握好了这个再学啥都事半功倍。 而且呢，自此以后，你对前端技术的理解不会存在任何的障碍。另一方面呢，这套课还能够提升你的眼光，让你具备分辨好坏的能力。 看过大师课之后啊，有一些不入流的资料，课程博客论坛你就看不上眼了，这种能分辨好坏的能力也能够为你将来的学习省下不少的时间。 所以呢，还没有领到课程的同学，赶快抓住免费领取的机会，进评论区第一条，加入粉丝群，然后根据提示领取就可以了。 那有些人有些朋友说，那这个内样是名字太长了，我不喜欢这个内样式。那我能不能换成是 liket 的呢？可以，他可以改的啊，也是通过这个主线的两个属性改，一个是改 active plus。 这个属性改的是什么呢？改的是这个。 呃，改的是这个类样式的名字啊，改的是他的名字，还有一个呢，是改这个哎， exact active class 改的是什么呢？改的是这个类样式的名字啊，这个类样式的名字呢？我倒是用都不用改一下吧。把这个 active 的样式啊， active class 的样的名字改成什么呢？改成 selective 好，那么这里呢，改成 selective selected 啊，改成自己的那样式好。然后呢，把这个 exact 呢给它设为空啊，不要这个样式了，这样式对我来说没用， 这里空好保存啊。我们来看一下，效果是一样的，你看我们现在 a 元素， 你看 class 是不是挺好的，对不对？ ok， 这就是我们目前的啊，这个地方的做。

这一节课讲一下在无忧中啊如何操作盗墓元素。官方不推荐使用原生 gsr 来操作盗墓元素，但是一个项目中啊，或多或少是需要操作盗墓元素的，无忧肯定也是提供了解决方法。这节课就看一下在无忧中啊如何操作盗墓元素。 打开控制台，先打印无为 m 实力对象， 啃速点 log 打印的是 vm 十一对象属性中有一个 到了啊，一言烦死当前的属性值啊，为一个空的对象操作动物园 就是用到刀软 r e f s 属性返回 vs 库的。在试图层上添加 h 一标签， 给 h 一标签添加文本，再添加一个按钮，要实现点击按钮获取 h 一的文本内容。 使用原声 gs 非常简单，给 h 一添加 id 属性就可以实现。通过 document 点 get island get element 白 id 啊，可以获取到 he 盗墓元素。我们也可以给 he 标签添加 r e f 属。 不使用原声的 gs 方法，属性值是不定义的，例如就叫 h 一 tax， ctrl f 保存代码，重新打印一下 vm 实力对象， 还是看到了 r e f s。 注意，此时到了 r e f s 就不是一个空的对象了，它里面有 h e t x。 当鼠标移动到 h e t x， 其实会发现选中的就是 h 一盗墓元素。 好给按钮啊添加，点击事件， 点击按钮，要获取 h 一的文本啦， nice 中定义 btn 方法，直接来打印一下文本叫 consue。 点 log 怎样来获取动物元素啊？有了，到了 r e f s 这个属相就非常简单了，直接这是点到了 r e f s 点。点什么呢？我们自己起的名字叫 h e tax 叫 h e t x 啊，当前拿到的就是 h e 盗墓元素，那要获取文本，直接使用 inner t x 就可以拿到文本， ctrl s 保存代码，注意看，点击按钮，拿到了 h 一的文本。 r e f 手相不仅可以操作盗墓元素啊，还可以操作组件中的数据和方法。 定义组建定一个买卡姆伊，组建 好就一行代码，我们就不抽离模板了。 h 一，那这个是 来看不一主见 在组建中啊，定义 date 数据和 max 方法 好，对特里面 这套里面就定位一个 mac 纸吧， 随便来点内容啊。同样带来一个方法， 定义瘦方法 就要用瘦方法，那我就打印一二三，简单一点啊， 在 ctrl next 下面注册组建，此时带试图层就可以使用组建了。 ctrls 保存代码，先看看组建有没有加载进来。买卡姆伊组建没有问题啊， 我们要做的就是使用 r e f 属性，直接在副组建中获取 mac 组建的数据和方法。数据指的是 dt 里面的数据，那方法指的是 mac 中的方法。 给买卡姆伊啊，添加 r e f， 好，给他起一个名字，也叫买卡姆伊。 保存电板之后，再控制台里面再次打印一下 vm 实力看速点 logo 看一下。到了 r e f s， 现在里面除了有 h 一 tax， 还有一个买卡姆伊啊， 那点击按钮， 点击必添方法，看看能不能拿到赌界里面的数据啊。直接打印啃瘦点 logo， 这是点到了 r e f s 点好，这一次就不是 h e 了，我们起的名字叫 mac come in， 然后再来点 message， 因为数组里面他是有 ms 数据的，那我就直接点 ms， 点击按钮好，打印出 hallow， 打印出 halloweew， hallow 是 h 一的文本，而这里的 hallowe 又是组建里面的买喜纸，说明可以直接获取组建里面的数据。那能不能就用方法也是尝试一下啊。 face 点到了 i e f s 点买卡姆伊，先获取到赌件，然后直接掉用方法。赌件里面有售方法，直接进行掉用， 点击按钮看一下能不能调用瘦方法打印了一二三没有问题啊，那我们的瘦方法就是一二打印一二三。 这就是使用 ref 属相来获取动物元素啊。和组建这节课我们就讲到这里啊。

很多同学写代码的时候，条件判断全用 vif， 根本不管 vio， 你 是不是也有这种习惯，觉得反正效果都一样，都是让元素消失，用哪个无所谓，这就大错特错了。虽然视觉效果是一样的，但在底层原理和性能开销上，它们有天壤之别。我们首先从原理上做下对比， 我们到底干了什么？首先是 vif， 它经过 b 的 编辑器之后呢，会得到大概这样的一段代码。从这里可以看出来， vif 它是真正的条件渲染，如果条件为假，它会直接创建一个注视节点站位。像这样子，实际上段木树里面是根本没有这个 d i v 的， 只有当它为真的时候呢， 会去创建这个 d i v。 那 微嗅跟它有什么差异呢？比如说这样子的一个微嗅的代码，它经过 vivo 编辑器之后呢，大概会得到这样一段代码，并且这里不管条件是真还是假， create element 都会执行。也就是说，当我们节点永远会存在， vivo 只是通过指令的方式控制它的 css display 属性。为了更好的对比呢， 接下来我们来从性能的角度来对比一下它们的差异。这两段代码我们分别使用 vif 和 vshow 来控制，里面的内容都一样，都是通过 vfor 的 方式渲染三千个 d i v， 然后设置到两个按钮去切换 vif 和 vshow 的 显示和隐藏。这两个按钮中的逻辑都差不多，重点是我们中间使用 await next tick 去等待到我们更新完成， 然后在前后呢，分别使用 await next tick 去获取到前后的一个时间，那最终我们就能得到它的一个渲染时间，然后 vshow 的 方式也是一样的， 接下来我们从 u y 上来看一下效果。首先点击切换 vif， 可以 看到通过 vif 的 方式渲染了三千个， diy 花了十七点六毫秒。接下来我们看一下切换 vif， 可以 看到通过 vif 只花了九点七毫秒，差一点就在于 vif 每次切换的时候呢，都需要销毁动并且重建动，而 vif 呢，只需要改个样式，瞬间就能完成。那什么时候使用 vif， 什么时候使用微秀呢？第一种场景是频繁切换显示状态的时候呢，最好使用微秀，比如 types 切换弹窗显示手缝型菜单。第二种是如果条件很少改变的时候呢，比较适合使用 vif， 典型的比如用户权限的判断，手屏数据的加载等等。第三种是需要组建销毁生命周期的时候呢，也最好使用 vif， 因为 vif 它不会触发 errant 的， 就比如说关闭弹窗的时候需要重置表单，这个场景不同的用法性能也是不一样的。现在你会使用 vif 和 vif 了吗？