当前位置: 首页 > Web前端 > vue.js

2020年3月遇到的知识点整理

时间:2023-03-31 19:19:07 vue.js

*注:本文是工作过程中遇到的知识点整理,涉及的东西价格比较比较乱。如有错误,欢迎指正和指导。1:前端img标签显示base64格式的图片数据:,文本数据data:text/plain,文本数据data:text/html,HTML代码数据:text/html;base64,base64编码的HTML代码数据:text/css,CSS代码数据:text/css;base64,base64编码的CSS代码数据:text/javascript,Javascript代码数据:text/javascript;base64,base64编码的Javascript代码数据:image/gif;base64,base64编码的gif图片数据data:image/png;base64,base64编码的png图片数据data:image/jpeg;base64,base64编码的jpeg图片数据data:image/x-icon;base64,base64编码的图标图片数据2:cssopacity影响子元素解决方案为父元素设置背景色加透明opacity:0.5。发现效果是子元素也继承了父元素的属性,文字变成透明的,如果不是这样的话。只需使用background:rgba(0,0,0,.5)代替。三:vue锚点(双向)效果1、首先将点击侧边栏的功能固定到左侧页面的页面锚点

右键页面jsmethods:{//点击锚点操作scrollAnchor(anchorId){window.scrollTo({top:this.$refs[anchorId].offsetTop-100,//避免页面直接跳到顶部behavior:'smooth'//Slow})}}2、页面滚动监控滚动条Vue页面需要能够监听页面滚动,需要在被监听页面的滚动条样式中不能设置为隐藏。如果页面设置了overflow:hidden,监控的scrolling值一直为0。注意cssoverflow对页面的影响,改成overflow:visible或者其他。htmljs四:Vue绑定多个类:class="{'redRoom':Number(items.status)===1,'greenRoom1':Number(items.状态s)===2,greenRoom2:Number(items.status)>2}":class="[computedView(item.n)?'numberParty':'numberCircle',{'select-active':items.istrue}]"5:tool.js文件中将用户输入的身份证最后一位x转为大写//IDcard将身份证最后一位转为大写constIDcardToUpperCase=(value)=>{if(!value)return''//判断输入字符串是否有x或X,如果有则直接转为大写,因为身份证一般是数字+X,所以可以直接转为大写,number不使用大小写的区别if(value.indexOf('x')!=-1||value.indexOf('X')!=-1){returnvalue.toUpperCase()}returnvalue}export{IDcardToUpperCase}六:前端安全相关前端安全系列(一):如何防范XSS攻击?前端安全系列二:如何防范CSRF攻击?七:判断H5页面在小程序并关闭所有H5页面跳转到a的页面pplet本身npminstallnpminstallweixin-js-sdk在引入importwxfrom'weixin-js-sdk'letua=navigator.userAgent.toLowerCase()//微信环境if(ua.match(/MicroMessenger/i)=="micromessenger"){wx.miniProgram.getEnv((res)=>{if(res.miniprogram){//小程序中wx.miniProgram.reLaunch({//关闭所有H5页面,输入小程序url:'/pages/result-page/result-page?isFromWeb='+1})}else{//小程序中没有}})}八:JS基础,提前在js中声明函数,可以像传递其他值一样传递函数常见的用法是将_匿名函数_作为回调函数传递给异步函数。函数声明functionfoo(){}之上的方法将在执行前被解析(提升),因此它存在于当前上下文的任何位置,即使它是在函数定义体之上调用的。富();//正常运行,因为在代码运行之前foo已经被创建functionfoo(){}functionassignmentexpressionvarfoo=function(){};此示例将匿名函数分配给变量foo。富;//'未定义'foo();//错误:TypeErrorvarfoo=function(){};由于var定义了一个声明语句,变量foo的解析是在代码运行之前,所以foo变量在代码运行时就已经定义好了。但是,由于赋值语句只在运行时执行,所以在执行相应代码之前,foo的值默认为undefined。命名函数赋值表达式的另一个特例是将命名函数赋值给一个变量。varfoo=functionbar(){bar();//有效}bar();//错误:ReferenceErrorbar在函数声明之外不可见,因为我们已经将函数赋值给foo;但是内部栏仍然可见。这是由于JavaScript的命名过程,函数名称在函数内部始终可见。参考文章:js秘密花园。另一个知识点:JS解析执行过程