vue如何获取元素更改样式
粉丝1209获赞1.6万
相关视频
06:08
08:17查看AI文稿AI文稿这一节课讲一下在无忧中啊如何操作盗墓元素。官方不推荐使用原生 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 属相来获取动物元素啊。和组建这节课我们就讲到这里啊。
05:34查看AI文稿AI文稿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 软一下，我们看下效果刷新啊。对，这个我刚才打包的是两个减号的版本，不是等号哈。
6980程序员小山与Bug
03:13查看AI文稿AI文稿好，首先我们要达到这样的效果，是吧？这里还有个边界啊，背景颜色是不是啊？比如说背景颜色我们怎么设？其实我们在展示自己的作品的时候呢，我们可以右键来检查的，是不是好检查的时候呢？元素这里 点中啊，比如我想要这里颜色，我要改，我检查，我要点这里颜色要改，我点查这里，他们这里有自动变化，是不是？好，这时候我要调这个颜色 啊，我就在这个颜色上面点右键检查，他这里会自动锁定这个标签，然后这个标签在这边右边呢，就会看样式 啊，样式还有大小，假如我姑姑大啊，我放大一点，比如这里八百，我就再点进去 改了一下，是不是好像你就变这样子？九百，哎，太宽了，是不是？我就可以直接在这里上面修改，直接看到这样子好，然后这里觉得，哎，太宽了，一千太宽了，我九百啊，虽然九百 还有位置，是不是？那我就可以调了，到底调多少啊？今晚饿不行了，是不是啊？我就看的很清楚吗？然后呢？这里颜色呢？ 好，在这里就可以去改变他，是不是啊？改的住呢？我们在这个地方啊，点这个原颜色的图标啊，在这里设，是不是啊？然后改一种颜色啊，你就在这拖动，当你可以其他颜色，你可以这样拖动 啊，点这个小图标啊，在这里拖动，是不是啊？看到上面没有，但如果说白色，那就可以调动，是吧？还是灰色，是不是啊？这样拖动好，拖动完之后我怎么存起来呢？这里是我把这个数字牵起来， 把这个啊制服串啊复制，看到这个的标签没有打开我的，打开我的这里的标签，是不是看到没有这个 ing 一是吧打开，然后就回到这里来，就这个标签， 然后在上面样式代码里面，这里我就可以把这个数字把它换过来啊，注意不要多了，是不是转换过来保存好，然后继续刷新一下，是不是那尺寸改了没有？ 还没改是吧？啊？九百二，我又去去了，刚才你这里改为九百二，保存好，然后进行刷新啊，他就变正，我们看到了，看没有这里好，这时候呢，我们要集中是不是或者是中间距离？那其实就图片问题了 啊，这两个是肿的，这个是其中一个，是不是啊？我们再去射他的大小啊，就可以达到这种效果啊。所以呢，我们这里啊，主要一个 这里的应用，还有这里应用就用的是什么检查元素的啊？右击检查元素啊，元素和样式的应用是在调试网页。
12百练成才
08:35查看AI文稿AI文稿下面这个问题，导航里边我单独说一个东西，叫做激活状态，这啥意思呢？就是我们搞定这个选中效果， 其实这个选中效果啊，导航就通过个 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， 这就是我们目前的啊，这个地方的做。
341渡一前端直播必修课
12:05
04:17查看AI文稿AI文稿还是有一些非常非常小的隐患，这种隐患呢，我希望大家永远不要遇到，遇到了之后呢就有点麻烦了。你看现在是不是效果，各种效果都完成了，无刷新跳转完成了，根据不同的页面渲染不同的组件完成了，其实也并不复杂啊。 好了，还有什么事呢？加个东西叫命名路由，这个啥意思呢？其实目前呢还是有一些非常非常小的隐患，这种隐患呢，我希希望大家永远不要遇到，遇到了之后呢就有点麻烦了。什么隐患呢？是这样子， 写来写去，写来一去，因为都快写完了，有很多的抄链接。突然有一天啊，你的万二的项目经理，万二的产品经理就跑过来了，哎，小伙，哎，咱们想把这个文章页面啊，这个 vlog 啊，给他改一下，改成什么呢？改成阿铁口， 你看你要不要崩溃。那你就改呗，我们就跑到这个哪里去哪里去改，改到这个吗？配路由配置这里是吧？把这个路由配置从 vlog 变成 article， 这样你改了过后，你会发现链接全部不能用了，首页没问题，文章匹配不到了，对吧？是不是匹配不到这个主见了？ 关于我这都没问题，就这个东西匹配不到了。那如果说你在页面上到处是抄链接，到处都要跳到文章页面改的链接地址是不是很多，你还跑到主线里面到处去改，但这个是个小问题啊，也有的时候呢，如果说发生了，他就不是小问题了，没有发生就是小问题。那怎么解？能不能解决呢？可以解决的，可以解决的。你看啊，我们改动了这个路径含义变没变？ 含义不能变吧？你含义变了就是需求都变了，那需求变了肯定要说你在改改贷吗？这是毫无疑问的。没办法，那含义一般是不会变的啊，他只是路径变了，这含义还是博客。 因此呢，怎么办呢？怎么来解决这个问题呢？我们叫做命名路由。什么叫命名路由？我给每一个路由啊取个名字，比方第个路由的名字就叫哄啊，管理路由是啥随便你路由 是啥无所谓，反正你就叫了个名字。你名字不能变，因为名字表表示是含义，含义不能变对吧。路径随便变，我们先给它变成 vlog 吧。 好，那么接下来呢，我们在跳转的时候啊，我这里该给每个路由取个名字，然后跳转的时候呢，就不是直接像之前那样子啊，写个 two 然后呢？写个什么啊？负是吧，这样子就是平直接写路径了。你不要写路径了， 你该写对象啊。写对象的话是不是必须要用动态绑定对吧。你不要写 gs 代码才能写对象，写对象对象里边用 name 首先来表示我要跳转的路由名字，那他就会从从那个路由配置里面去找。哎，你跳转的名字是负哎，找到这个了哦，他的路径是这个名词呢，他会自动的把这个路径放到这来。 明白明白的意思吧。这样子呢，是不是就解除了跟路径之间的偶合了。那你只需要关注名字就行了。因此呢我这边把这改一下啊，我这里不用宁可这个名字了啊，你这个属性了啊，那换一个 嘞。我们这里呢用哄 message 对吧。我们这里只不过是循环绑定而已，其实就是把这个东西名字呢放到 to 这里，而 to 是什么呢？ to 是一个对象，对象里边 name 的属性给它复制为 itune 的嘞，对吧？只不过一个循环动态绑定而已， 那么他就会根据名不同的名字去找到对应的路径生成。好，你看没问题对吧？你看，没问题。好，接下来一看，神奇的事情发生了，我现在呢，去改动这个 vlog， 改动的路径 r t 口现在有没有问题？现在不会有问题了。为什么？因为我们这边关联的是名字，不是路径的，是不是解除了跟路径之间的偶合啊，那么他会根据名字动态的去修改他的路径。你看啊，首页现在文章自动就变成 r t 口了， 看到没，是不是很舒服？这样子啊，这叫命名路由，并不复杂吧。关注多余简介号的同 学打断一下，我是袁老师，你能跟着我卷到这里，那我就再送你一个能卷死所有人卷的五体投地的课程。这套课就是我录制的大师课，里边包含原理、原码，思想，还有笔面试题， 这些都是求职提薪、跳槽绕不过去的内容。并且呢，我毫不夸张的说，论这些内容的价值，如果说一份工作年薪三十万，那么大时刻这几天讲的东西可能在你的面试中就能值十万。 单说他里边涉及到的面试题，只要你面试的时候遇到了，这是大概率事件，你把我给你的答案不用百分之百，能够说个百分之六七十，对面试官的杀伤力都是核弹级别的。不管他曾经面试过多少人，这种场面他没见过，我一点不跟你开玩笑。 当然呢，我也欢迎各大公司的主管面试官前来参考借鉴，同时呢，也送给各位同学拿去学习提升。怎么领取评论区第一条，进粉丝群，然后根据提示领取就可以了。
481渡一前端直播必修课
00:13查看AI文稿AI文稿vivo 三在自定义元素方面有很多颠覆性的变化，生理的时候要留意，比如自定义元素检查现在在模板编译期间执行 a 字属性仅仅用在可以通灵的组件上。
61北大陆神说前端
08:29查看AI文稿AI文稿好了，那么这种太白蓝呢？可能你以前已经做过了，对不对？好，那么结构样式这块你也应该很清楚了，所以结构样式这块不要求大家啊，不要求大家。呃，这个在课堂上写啊，那么呃，这个呢，我会待会发给大家啊，有一个未完成版，叫选项卡的一个未完成版，那么因为我们要来完成呢，我们把它拿过来， 那么这个这个逻辑啊，这个目前它里面就只有，它里面就只有啊，这个对，结构样式现在点击点不了，对不对？ 好，那么为了跟刚才的那个案例做区分哈，我把这个 glow 的啊，我换成一个 sky， sky 啊， sky， blue， 好，那么做一个区分啊，做一个区分来，我把他这个东西，嗯，拿一下复制粘贴。好， 那么这个时候我们现在来看，就这个，所以现在点击是没有作用的。好，那么我先给大家分析一下，虽然没有写，我还是给大家分析一下，说这个东西如果布局应该怎么布啊？呃，来给大家说一下，首先分上 上下结构对不对？分上下结构啊，上下结构，那么上盒子上盒子有三个按钮吧？对，对，三个按钮。然后为什么有一个蓝色的呢？因为他身上有一个类，叫做当前类，对不对？对，有一个当前类， attem 或者卡润都行。啊，那么 好，那意思就是我把这个泪给到第二个，他样式就在他上身上。好，那么这边呢？这边的话，他其实现在只看到一个按钮一对应的内容，其实应该还有两个，对不对？按钮二和按钮三对应的内容对不对？好，那么现在为什么看不到他们呢？ 很简单隐藏了啊，也就是说现在还是一样，他相当于也有一个当前类，是不是？对，也有一个当前类啊，好，那么我们啊，这个给大家分析了之后，我们来看一下刚才我们的分析啊，那么确实他这个盒子确实是这样子的，就是上面上盒子，然后还有下盒子， 对，上盒子有三个，三个按钮，同样身上有一个当前内好，然后下盒子也有三个，那么卡顿也是当前内 好，那么下盒子看到啊，下盒子，这，下盒子这里面的 div 其实应该是隐藏的，对不对？对，应该是有一个 discree 浪的啊，我们来看一下有没有， 你看 table condense 啊，那么内容里面有一个 display 那，但是卡润他就 display rock 啊，确实是有这么个东西。好， 同样的道理，这里面也是一样， at 我的话，他应该就是，你看 at 我的话，他应该就是一个背景天蓝色啊，所以这个已经 ok 了，布局已经 ok 了，那么这时候我们开始来分析代码啊，我们的 view 代码应该怎么写？那么这时候呢，首先引住他，引住了，对不对？好，他引住了，所以我们在 这里面直接就六六就行了，六，六六。好，那么这样的话，我们首先也要给他一个，那么现在找不到他的 id， 对不对？找到 id 用泪啊，他有泪，我们就用泪点，这个东西 没有了。好，那么这个我们有这块有一个经验哈，所以这个你应该看得懂。好，接下来写的一塔，那么的一塔目前好像还不知道要写什么，所以就先不用写，先不用写，我们先分析分析他待会应该怎么切换。 待会的千万很简单，无非就是把这个泪是不是给过来。对，对，无非就是把这个泪给过来。你看我泪给过来了他这个东西就有了啊。好，所以，所以，但是啊但是我们现在的思路其实应该换一换了，朋友们 他这个累有时候会有 at， 不对不对，其实有时候其实应该是没有的，对不对？ 对，所以对于他来讲啊有时候有有时候没有。是不是三元上服？对，所以把它首先第一步加什么 冒号才能写三余丈夫对不对？对，好，所以有时候有要么这个要么就是空，是不是这意思？对，所以前面应该加一个条件什么时候有是吧？ 好，那什么时候有呢？呃点击时候啊。点击是点击啊，但是当然你不觉得一开始刷新页面其实不用点击吗？对吧？所以应该是这么想来。好好听啊好好听。 页面页面上所有可以展示并且样式进行切换的通通最后都归根为数据的变化， 记住这句话啊页面上你所有看到的变化全部都是谁？都是低卡里面的数据在变，那意思就是我的这个切换是不是也是可以看成是一个数据在变。 比方说我定一个变量，然后一的时候他为一的时候表示定一个变量啊， 一的时候表示当前内在这里为二的时候表示当前内在这里为三的时候表示当前内在这里。可不可以？ 可以，所以我就来定义这么样一遍啊我们现在这个东西啊还没写完整所以他就这样。好，那么我现在定义这样一个变量啊这个变量啊 number 我就给他唯一。那么这个东西用来做什么的？用来表示，用来表示当前类在谁身上？好，那么老师说了，一就表示按钮一身上， 二就表示按钮二乘三，所以这个时候你应该是 number 等等于一，是不是？这意思？对，好， number 等于一吗？等于一，我就第一个有 at 不累，你看一下是不是 有了吧？有了，那么现在呢？来，我把 number 一改哈，改成二，改成二，那这个时候我们看一下。 没有。哎，老师，你不是改成二吗？他身上怎么没有泪呢？咱们写了没有？没有，所以其实对于他们三个人来讲都是有可能有泪，有可能没有泪，对不对？对，所以应该把这三个把这个给他复制过来粘贴一下，然后给他改成 二。等于二的时候我就有这个类，当然他等于二的时候，其实前面一个不成立了，对不对？不，成立了。好，所以同样的道理， 下一个会不会啦？不会啊，当然我给大家看。好，现在我给他改成二，你看一下现在是二就有了。对，同样的道理啊，同样的道理。好，所以把这个东西拿过来粘贴一下。好，现在呢？就把这东西改成三就可以了。然后我们来看一下现在。 好，那么你现在点击肯定没有效果了吗？对不对？点击试卷写了没有？没有？没有啊，别急，我们先看三有没有效果，我改成三啊，改成三，来看一下现在是不是三就有了。好，所以接下来一步就是点击试卷了，对不对？ 我现在在三，这里，现在这个东西是什么？叫做默认值为三，是不是？好，现在呢？我点击一，是不是这里要过来， 那么其实什么叫这里这个样式要过来呢？其实 number 把它改成一是不是就可以了？所以我在他身上写一个什么点击事件叫做，哎，可 等于，那我改谁？ number 等于一，我把 number 改成一，是不是这个条件就成立了？对，那同时后面这两个条件就不成立，所以只有他有 at， 后面两个没有。来，我们看一下这个事件成立了没有？来，点一下啊？ 点一下是不是过来了？当然第二个，第三个还没有，因为还没有加事件，所以后面这两个会了没有。 来，哎，可立，可没错。复制粘贴来， number 等于多少？二，二，没错，等于二。那这样的话我们来看一下前两个按钮至少可以了， 是不是？嗯，前两个你会啊，那么剩下第三个会了吗？会了，就是复制粘贴而已啊。那所以把这个东西拿过来，所以三，二三。好了，那么给大家解释一下啊，解释一下为什么这个代码是这么样子的？来，一二三。那么现在你， 你先，你先看啊，就是我每次一刷新全部都是什么，都是在三，对不对？这个原因是什么？原因？是初始值对不对？对，所以现在的话 ok 了，来，我们看点点，点点是不 ok？ 好，那么现在呢？给大家解释一下为什么是这个样子来， 所以看代码是怎么执行的啊？首先用户去点，用户没有点击，是不是什么事情都没发生？对，用户一旦点击，他改了，谁改了？底下这个数据对不对？你看是不是又是一个手机的箭头？ 好，那么这个数据一旦发生变化，又影响了上面是不是使用的这个 number， 所以这个影响了，这个谁做的？这个是 view 做的对不对？对。 view 就帮我们去，你看用户点击 view 帮我们修改了这个值，同样的因为这个值变，那 view 又帮我们修改了界面，更新了一下，重新判断了一下。 啊？所以这么样一个流程啊，这么一个流程来给大家点时间啊，把这个东西的理解一下，然后呢？把它写出来，然后这个东西我发一下啊，我发一下这个未完成。
30前端乐哥
12:11查看AI文稿AI文稿小伙伴们大家好，欢迎来到朝夕教育好，接下来呢，我们一起来看一看啊，咱们的底部导航栏，它的一个诶样式结构 底部好，这个是咱们的底部导航栏。那首先啊，第一步呢，我们先要考虑的是什么呀？来找到咱们的这个样式这边来啊， 那我们的底部导航栏，首先第一步要考虑到的，他应该是在咱们整个页面的哎，底部呀，应该是属于哎，你看我这我的滚动条，在滚动的时候呢，他是没有跟随我们的滚动条来进行移动。 所以说我们第一步会考虑到哎，他应该是使用了一个啊固定定位 好，固定定位诶，诶，然后呢，它的这个是靠我们的诶下面 好，那么我们要不要给他一个高呢啊，百分之这个一百。然后呢，当然啊，他也是有高好，那这个高，比如说是六十哎，我记得在咱们的 啊另外一个 c s 的文件里面呢，它设置了有一个这样的值啊，啊，设置了有一个 found 跟 size， 有一个百分之六十二点五。 好，这样设置的这个原因是什么意思呢？那我们后面呢哎，有一个注释，就是说设置过这个根节点文字大小以后呢，所有子节点的文字大小都会相对于这个根节点来 计算。那么意思就是说我们的这个呃字体的大小呢，是为十 px， 因为我们知道一般各大主流他的浏览器放不到赛子，默认只能是十六 px 的。那么也就是说换算成 r e m 呢，就表示我们的 e r e m 啊， e r e m 来我的下面写一个啊，也就是说我们这里的啊， e r e m 呢，它相当于呃默认是等于十六 p x 的 啊。为了将这个 r e m 呢跟 p x 啊进行换算啊，方便的话，你看我们这样换算是不是很麻烦？那为了它更方便啊，换算的话，我们将它设置为百分之六十二点五一数，它的字体大小呢，就是十 p x， 那么相当于它就是等于了 e r e m 啊，等于 e r e m。 这样画是不是更方便？来换算好，那如果说我们这里需要它的这个高度啊， 是哎，六十。那么六十 p x 换算成 r e m 的话是多少？那么是不是就是六 r e m 了呀？好，那它有一个高啊。设置了以后呢？来我们到哎，这边你就算页面上刷新好，来，我们先到页面上面先来刷新看一下效果。好，他是不是到这个页面底部了？在这啊，这一块来了。 但是我们一定要记得咱们这个固定定位以后，他会有一个特点。什么样的特点？固定定位，他是不占位置的。什么叫不占位置呢？来我画个图啊， 那我们这个图还没有删掉呢，你看啊，这是咱们的整个的一个页面。好，你的页面底部呢？啊，是在哎，在这一块 他是不占位置的。那如果说我们的页面的内容啊，太多了，到这这下面还有滚动条，肯定是会有滚动条的。那如果说一旦有滚动条了以后，我们这个底部的导航栏，他有可能就会把哎，我们这个页面上面的内容是不是就会 遮住啊，是不是就会挡住。所以说我们在这个地方一定要记得啊，你固定定位，他是不占位置的。那要不要占位置呢？他肯定啊，你肯定要占位置，要不然的话他就把上面的内容给遮住了。 那么我们这地方应该来怎么设置呢？哎，应该是这样的啊，也就是说为了呃让这个固定定位占个位置的话，我们可以给他的负啊。然后应该是这样的来我给他添加一个好一个这样的标签啊。 好，我把它给嵌套在这个里面。 好，我把结构呢稍微哎调整一下。那也就是说我们的啊整个的啊，哎，我把它给剪走，应该是设置在它下面的这一个啊， d i v 里面里面嵌套的这个 哎，固定定位。那么它的负呢？我必须要给它一个高啊。六 r e m 你给一个高，相当于把它给撑起来，是不是相当于给他占了一个位置，这样的话啊，他就不会把我们啊上面的这个内容呢来进行遮挡了。好，固定定位了以后，呃， 然后他还有一些什么样的样式来，我们再来看一看啊。呃，有一个啊，白色的啊，背景还有呢，它上面会有一条这样的一个哎，边框线啊。好，来我们把这个样式呢给他也来定一个啊。背景颜色白色，还有 边框线啊，上面的一条边框线 e p x 啊，实线。呃呃，这个颜色呢，比较的浅哈。我我这里我就随便写一个吧。 好，定义完了以后来我们同样的保存一下啊，到页面这边呢哎，来刷新看到了吗？你看这条线是不是有了。好，那么我们里面的这个内容呢？哎，里面的内容啊，应该是定义是不是在这个盒子里面。 那我就需要给他来一个宽了哎，否则他的宽呢，是这个百分之百的嘛。 还记得我们的这个哎盒子的宽吗？好像是七二零 a p x。 好。然后呢，它的这个高二六二一 m。 呃， how to 哎，然后呢，它是一个哎盒子呢，是一个剧中的啊，二九零的二九。 好。写完了以后来我们保存一遍到页面这边呢来刷新，可以看到里面的内容是不跟我们的啊，整个页面的 大小是一致的了。好。接下来呢，就是它里面的啊内容的一些结构了。比如说哎，我们的这个力啊，因为是会计标签吗，他会横着来排列。那我现在需要让他啊这样的横着排列呢，那我们可以方法有很多啊。那我这里呢，使用咱们的 flax 布局 flex 布局。想一下，我们的立标签要横着排列，选中它是它的哪一个标签，它的负啊，负 u l。 比如我们给它的这个 u l 呢，来一个 a display flex。 那 flax 布局默认情况下，它的主轴呢，是水平的水平，意思就是它里面的这个子级标签呢，会沿着这个水平的方向啊来进行排列，你看一二三四是不很水平排列了。好，这个啊，一步一步就可以实现了。 然后呢，然后我们之间这个力和力之间还需要有这个间距呀，你要隔开呀，对吧？好，那 有的小伙伴说你可以给这个立呢一个宽啊，当然你也可以给一个宽。因为我们这里呢是使用的这个是 flex 布局嘛。那我同样的，我就使用这个 flex 里面的这个属性来定义啊，可以直接的给这个立标签呢。哎，来一个 flex 为一。喏， flex 为一了以后呢，你看他们之间的间距是不是就隔开了？ flex 唯一意思就是说啊，填充他们的这个啊，剩余空间啊，好， 有了以后呢啊，然后里面的内容啊，哎，应该是哎，居中对齐呀，那因为我们使用的是这个啊。 flex 里面的居中好呃， 面的内容的居中啊， tax a line center 好。然后还有交叉轴的一个居中。交叉轴的居中呢，是这样的一个属性 align items。 哎，是交叉轴的居中，也就是我们现在所看到的这个呃，水平哦，垂直方向的居中。但是为什么没有这个效果呢？ 哎，知道为什么吗？因为我们现在设置的呢是这个啊。 u l 标签。你看这个 u l 标签，它有高吗？ 你没有高啊，其实水平居中我们这个效果也看到了，看到了吗？你看是不是水平居中效果有啊，但是垂直居中效果为什么没有？你没有给他高啊，你看我们的这个 u l， 你有设置高吗？没有啊， 没有高你看不出来呀。所以说我们这里呢好，必须要给他一个高，你可以给他一个百分之百，因为他的负极呢。不是已经设置了六 r r e m 吗？你看这个时候垂直居中效果是不是有了，很明显啊。 好，我们继续一步一步来往后面看。呃，然后呢？呃，设置完了以后啊， 好，比如说咱们的这个啊，立标签，那立里面的哎，字的字号的大小是不是也要设置一下？好，我来给他设置一个啊，字体大小 r e m。 然后还有为什么我们的诶，这个结构应该是你看大小改变了。但是我们首页呀，会员呀，还有订单呀，我的你应该到下面来呀。 喏，应该是这样的一个效果呀，因为 spa 标签它是一个啊，行类元素，所以说呃， 我们直接的啊。当然这种方法呢有很多，你可以使用 flex 啊，你也可以给它转换它的这个模式啊，直接把它转换为 block 快捷元素是不是就可以了？ 好，转换为快捷元素喏， ok 了没？是不 ok 了好，它的这个样式结构呢，哎，我们可以看到代码量确实也不是特别多。还有一个呢，呃，必须是我们 啊。在这里呢，需要给他设置的就是他的一个啊，颜色啊， 来，我取一下它的颜色吧。 那也就说我们选中的啊，它的这个颜色的呃，一个样式啊。 那么我们要注意的是什么呢？这个颜色的呃，样式呢哎，我点击首页哎，首页，然后点击会员，这个会员的颜色变了，是不是这样的一个效果 哦。这个哦，路由呢，我们还没有设置新，我们先把这个 select 它的样式先设置了啊。好，那下一节课呢，跟大家一起来啊。还有它的这些啊，路由也就我们点击谁啊，然后呢，再展示首页 呀，会员呀，哎，他的路由的一个啊，设置啊。好，行，先把他的样式结构来先定义了啊。首页会员哎，哎，订单哦，这些啊，我看一看 啊，这些因为我们还没有设置是吧？好，先把它的结构先定义了。那本节的内容呢，跟大家就先啊分享到这。
