当前位置： 首页 > 后端技术 > Node.js

前端工作笔记

时间：2023-04-04 00:36:44 Node.js

1.jsx中.sync修饰符的写法this.visible=val}}}width={"60%"}>Vue中.sync的原理是：prop.sync="data"just:prop="data"@update:prop="val=>data=val”语法糖，可以在JSX下自己实现监控逻辑。在Vue3中，.sync在自定义组件上被替换为v-model，相当于传递了modelValueprop，并接收到抛出的update:modelValue事件这也可以用作.sync修饰符的替代，并允许我们使用多个v-model2.CSS补充??css控制页面文字无法选中：user-select:none;??关于antd中ul的一个margin-bottom样式干扰，之前一直以为是干扰，其实不是！！这是因为我错误地使用了ul标签！！！ul样式外面应该有一个parentdiv来包裹他们，而不是在ul标签上定义块的高度，ul标签上尽量不要有任何东西，然后在li标签里写v-for。如下

    {{item.link}}webMessage.splice(index,1)">去掉
??继续上面的点，如果ul外面的div是flex，div是min-height和max当盒子的高度是-height时不要设置algin-center！！！，否则ul块将破坏外框。
{{item.title}}
{{item.attached}}
??继续上面的，ul标签默认li循环的结果是竖排的。如果我们设置了ul的display:flex，那么外面的div也设置为display:flex，就可以变成水平的了，而且li的宽度可以自定义这里最重要的是！！不要将ul设置为可滚动的视口宽度！！！??hover时改变另一个元素的显示/隐藏，下面代码需要控制a-icon标签的显示和隐藏，先用visibility的hidden和visible来控制。然后要注意的一点就是不要把visibility:hidden的代码写在内联样式里，因为内联的优先级比较高，不然外部样式表里hover里面的代码肯定是！重要的。{{item.title}}{{item.body}}{{item.time}}
ul{width:94%;李{高度：50%；填充：10px0px；border-bottom:1pxsolid#dddcdc;.closex{可见性：隐藏；}&:hover{.closex{可见性：可见；}}}??关于fixed的居中设置.gs-dialog{position:fixed;左：50%；顶部：50%；边距顶部：-150px；/*基于块高度theight/2*/margin-left:-150px;/*基于块宽度width/2*/width:300px;height:300px;}aboutfixedbasedonparentelementfulllayout.gs-dialog{position:fixed;左：0%；顶部：0%；宽度：100%；height:100%;}??关于input输入框focus的知识点如果强行取消勾选，可以直接设置tabindex=-1，解决tabindex的以下知识点：1.https://developer.mozilla。org...2.http://bluegalaxy.info/codewa...??flex遇到min-height和max-height的innerbox，justify-between之类的无效详解：inner的height图层.recent-open-content需要min和max自由调整，所以外层.recent-open的高度无论设置什么值都是无效的，所以不能再在.recent-样式设置，例如flexjustify-betweenpop-uponopen！！记住，这样只有固定了内盒的高度，我们才能使用flex外盒的快捷写法来设置内盒的样式第一步：设置这个div的边框颜色为透明边框：1px实心透明；第二步：然后引入actionhoverhover{border:1pxsolidred;}??在CSS中定义类时，中间有空格和没有空格的区别1..example和.pp之间用空格隔开，表示后代选择器，在.example中选择.pp选择的元素2..example.pp之间没有空格，selected元素在类中同时包含example和ppselected元素??CSS内联元素和块级元素的区别：一个区别：1.内联元素会排列在一条直线（默认宽度只和内容有关），都在同一行，水平排列。2、每个块级元素占一行（默认宽度为其父容器的100%（与父元素的宽度一致），与内容无关），垂直排列。块级元素从一个新行开始，以一个换行符结束。3、块级元素可以包含行内元素和块级元素。内联元素不能包含块级元素，只能包含文本或其他内联元素。4、内联元素和块级元素的属性区别主要在于盒模型的属性：内联元素的宽高无效（可以设置line-height），margin的top和bottom是无效，填充的顶部和底部无效。显示：块；（字面意思是将表单设置为块级元素）display:inline;（字面意思，表达形式设置为内联元素）二、inline-blockinline-block元素（如input，img）不仅具有块元素可以设置宽高的特性，还具有内联元素默认不换行。当然不止这些特性，比如inline-block元素还可以设置vertical-align（因为这个垂直对齐属性只对设置了inline-block的元素有效）属性。HTML中的换行符、空格和制表符合并为空白。当字号不为0时，空白自然占据一定的宽度。使用inline-block会在元素之间产生间隙。3、修改Mac的本地host，使用sudovim/etc/hosts调试打开配置文件进行编辑###HostDatabase##localhost用于在系统启动时配置loopback接口#。不要更改此条目。##127.0.0.1localhost255.255.255.255broadcasthost::1localhost127.0.0.1test.com//添加此行作为测试域名#由DockerDesktop添加#以允许相同的kube上下文在主机和容器上工作：127.0.0.1kubernetes.docker.internal#第4节结束。root伪类：root这个CSS伪类匹配文档树的根元素。对于HTML，:root代表元素，除了具有更高的优先级外，它与html选择器相同。5.关于标签中oninput和onchange事件的表现6.el.onscroll元素的滚动事件处理函数//监听自定义滚动条事件scrollEvent(){//获取ref="的__wap类menusScrollbar”，元素对象。letscrollbarEl=this.$refs.menusScrollbar.wrapscrollbarEl.onscroll=()=>{this.subHeaderShadow=scrollbarEl.scrollTop>0}},mounted(){//调用mounted会继续监听this.scrollEvent()}七、标签不识别\nCannotrecognize'\n'的解决方法，只需要在标签里设置css样式即可结果为：white-space:pre-line;八、reduce的使用先看reduce源码Array.prototype.fakeReduce=function(fn,initialValue){if(typeoffn!=='function'){thrownewTypeError('fnisnotafunction!');}//保存原始数组letinitialArr=this;//复制原始数组letarr=[...initialArr];如果（初始值）arr.unshift（初始值）；让索引，新值；while(arr.length>1){index=initialArr.length-arr.length+1;//返回数组前2项的计算结果newValue=fn.call(null,arr[0],arr[1],index,initialArr);//删除arr数组的前2项，并将计算结果推送到arr数组Thefirstpartofarr.splice(0,2,newValue);}返回新值；}；使用场景一，数组扁平化函数flattMap(arr){returnArray.isArray(arr)?arr.reduce((acc,value)=>[...acc,...flattMap(value)],[]):[arr];}flattMap([1,[2,3],1]);//[1,2,3,1]2,对象过滤器constpick=(obj,arr)=>{returnarr.reduce((acc,curr)=>{if(currinobj){acc[curr]=obj[curr];returnacc;}},{})}pick({a:1,b:2},['a'])//{a:1}九、$attrs注意含义红色段落的，也就是在一个labelPass上给label组件添加：class="{xxx}"，但是不需要props接收10.优化for循环嵌套（主要解决for循环children）#使用递归的方式遍历和优化函数recursion(arr){arr.forEach(function(item){if(item.children){recursion(item.children);}};}recursion(chapterTree);10、Vue内置的组件转场列表去除了动画转场效果，始终作用于最后一个元素。导致这个问题，修改为id或者其他11.Transform快速绘制阶梯类型12.Transform的translate实现阴影13.keyup,keydown,keypresskeydown:按下键盘keypress:紧接着是keydown事件触发（只有字符键按下时）keyup:释放键盘keykeydown->keypress->keyup1。当用户按下键盘上的某个字符键时，会先触发keydown事件，然后触发keypress事件，再触发keyup事件。如果用户按下字符键，会重复触发keydown和keypress事件，直到用户松开按键2.当用户按下非字符键时，先触发keydown事件，再触发keyup事件触发。如果用户按下了一个非字符键没有松开，keydown事件会被反复触发，直到用户松开按键。keypress的特点1.keypress对中文输入法的支持不是很好，不能响应中文输入。使用此项，可以通过@keypress.enter巧妙利用确认事件2.在chrome中，keypress基本上无法响应大部分系统功能键（如delete，backspace）。键盘中的按键分为字符键（可打印）和功能键（不可打印）。按键支持的系统功能键：Firefox：Esc、Enter、Backspace、PauseBreak、Insert、Delete、Home、End、PageUp、PageDown、F1到F12、箭头键、向上、向下、向左、向右键Chrome/Oprea/Safari:EnterIE:Esc,Enter除了Firefox，其他chrome,oprea,safari,IE上下左右键都不会触发kepress十六、JS多态例如：假设有一只猫和一只狗在family，而且两个宠物都要吃饭，只是食物不一样，根据主人的meal命令，猫要吃鱼，狗要吃肉，这里面包含了多态的思想letpetEat=function(pet){pet.eat()}letDog=function(){}Dog.prototype.eat=function(){console.log('吃肉')}letCat=function(){}Cat.prototype.eat=function(){console.log('吃鱼')}petEat(newDog())petEat(newCat())JS对象可以是Dog类型对象也可以是Cat类型对象，ObjectJS等动态语言中的多态性是与生俱来的。多态的作用就是通过将程序的条件分支语句转化为对象多态来消除这些条件分支语句。如果在使用对象多态性之前代码可能看起来像这样：'吃鱼')}}letDog=function(){}letCat=function(){}petEat(newDog())petEat(newCat())在代码重构的概念中，是否一定有必要排除将if条件转化为多态的形式，或者根据代码的实际情况决定是否转化为多态重构。当然上面还有一个知识点：上面的两个构造函数，和方法都是写在原型上的。如果放到es6类中，这两个方法是实例方法，也就是我们可以简单的得到JS类、类实例方法和构造函数的概念，原型链底层有一致性。JS类不同于java中的类。js是一种基于函数和原型链的语言。

前端工作笔记相关文章
最新推荐
猜你喜欢

Copyright © 2012-2022 程序源 版权所有豫ICP备2022028201号

重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。 如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。