有用的web前端窍门有哪些

发布时间：2023-07-18 10:33:13 所属栏目：PHP教程来源：转载

导读： 　　这篇文章主要介绍“有用的web前端技巧有哪些”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“有用的web前端技巧有哪些&rdq

　　这篇文章主要介绍“有用的web前端技巧有哪些”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“有用的web前端技巧有哪些”文章能帮助大家解决问题。

　　伪元素动态改变其样式

　　我们都用过伪元素，什么::before,::after啊这些等等，但是他们都不会直接在代码里html中生成标签，那么有时我们不行再加dom元素了，明明就用改dom元素的伪元素更简单，如下图：

　　那个蓝色的进度条就是用动态改变伪元素样式的方式来实现的，那么接下来来看下具体实现方案吧！

　　在该dom元素中添加行内样式“--width”,当然我这里是要改变它的宽度，如果你们要变颜色啊啥的，自己根据需要起名字

　　然后在css中：

　　对伪元素使用 var(--width)这种方式，就可以动态改变其属性啦~

　　简单却挺香的vue修饰符

　　前提是vue框架下哈~

　　大家开发中难免会遇到在当前页面中，点击某个按钮等之类的操作后，会在该页面弹出一个带着遮罩层的功能框，要求你点击遮罩层时，该功能框消失；与此同时，功能框中会自带功能点击按钮。那么问题来了，你点击该功能框中的功能按钮时，会先出发该点击事件，然后整个功能框就消失了，因为在你点击该功能框中的功能按钮时，会出现事件冒泡，那么我们如何特别简单的解决呢？只需要.stop，如下代码，在HTML中：

　　<div class="mask" @click="handleClickMask"> //这是遮罩层

　　    <div class="content-box">

　　        <Button @click.stop="handleClickButton">点我</Button>

　　    </div>

　　</div>

　　是滴，你没看错，只需要这个.stop，即可~

　　vue中数据修改后，页面没更新

　　当你觉得你改了数据了，特别是数组那种比较复杂的数据类型，但是页面渲染没有更新，此时你是不是在怀疑，“嗯？说好的数据双向绑定呢？骗人呢？”

　　我每次遇到这个就会先 this.nextTick(() =>{})试一波，要是还不知道这个方法的友友们，自己去搜下吧，铁定刚入前端坑没多久哇~

　　要是还不行的话，我就会[...xxx]，今天就是刚不行一个，

　　像这样转换下就可以，如果直接this.modelList进行遍历就不管用，必须用arr这种，我觉得跟这玩意是复杂数据类型有关，不能只改变他地址，要改变他本身。

（编辑：成都站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!