Sandrahh-CSDN博客

原创前端项目搭建与调试

一.VsCode安装与使用1.1下载VsCodeVS Code的当前版本为1.61，支持Windows，Ubuntu，Machttps://code.visualstudio.com/Download1.2 安装VS Code的安装比较简单，一直下一步即可。安装完成后打开，界面如下：1.3 Vscode的简单介绍搜索，如果资源管理器文件过多，可通过输入内容查询1.4 扩展，搜索内容后安装需要的插件，长使用的插件为配置类插件Beautity:格式化代码工具，美化JavaScript，

2021-10-15 16:56:17 645

原创解析 DOM 模板时的注意事项

解析 DOM 模板时的注意事项有些 HTML 元素，诸如、、和，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如、和，只能出现在其它某些特定的元素内部。这会导致我们使用这些有约束条件的元素时遇到一些问题。例如：<table> <blog-post-row></blog-post-row></table>这个自定义组件会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 is attribute 给了我

2021-07-06 17:39:34 195

原创 VUE中避免 v-if 和 v-for 用在一起

避免 v-if 和 v-for 用在一起永远不要把 v-if 和 v-for 同时用在同一个元素上。一般我们在两种常见的情况下会倾向于这样做：1.为了过滤一个列表中的项目 (比如 v-for=“user in users” v-if=“user.isActive”)。在这种情形下，请将 users 替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。2.为了避免渲染本应该被隐藏的列表 (比如 v-for=“user in users” v-if=“shouldShowUser

2021-07-06 16:37:19 378

原创 vue表单中对数据的转换

在VUE开发项目时，下拉框的label为标签名，value用于区分选择的状态，在表示0，1，2表示下拉字段的状态为离线、在线、故障，主要用于和后端数据交互方便，给表字段传入这个option时，需要对数据进行formatter转换才能在表格里展示对应的离线、在线、故障字段formatter是格式化的意思，也就是以何种形式呈现的意思，对于一个纯文本，我可以将它呈现为checkbox，也可以呈现为input输入框，甚至下拉框等等，或者是在文本外层包裹更多的DOM(当然包裹这样做并没有多大意义)，这就是forma

2021-06-23 10:55:06 824

原创 2020-12-16

Unkown Host"杩欐槸鍦ㄤ富鏈哄悕瑙f瀽鏃堕氬父鍑虹幇鐨勬殏鏃"， You may need to adjust the proxy settings in Gradle Unknown host ‘dl.google.com’. You may need to adjust the proxy settings.前面的乱码显然是编码问题而显示不正常，后面写的是找不到’dl.google.com’主机，那么说明可能被“墙”了。解决方法到C:\Windows\System32\drivers\

2020-12-16 22:15:22 476

原创 js常用数组讲解

push（）在数组末尾插入元素arr.push(value),在数组的末尾提娜佳一个或者多个元素，并返回数组的新长度let arr=[1,2,3,4,5];var arr1=arr.push(6,7);console.log(arr,arr1);数组的arr的值变为arr[1,2,3,4,5,6,7];length接收返回的是修改后的数组长度7pop（）删除数组末尾的元素arr.pop()删除索引值最大的元素，并返回被删除的元素let arr=[1,2,3];var delEle=ar

2020-10-22 22:42:26 89

原创事件循环eventloop微宏任务

凡是异步代码和定时器代码都会等待主程序执行完毕再开始异步操作：1、定时器演示器2、ajax3、绑定的onclick事件函数console.log(1);setTimeout(function(){ console.log(2);},0)console.log(3); //打印的顺序为1，3，2，因为setTimeout是异步函数new Promise就会立即执行console.log(1)new Promise(function(resolve,reject){ console

2020-10-02 11:56:30 159

原创表单标签＜label＞标签

标签为input元素自定义标签标签用于绑定一个表单元素，当点击标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验语法：```<label for="sex">男</label> <input type="radio" name="sex" id="sex"/>核心：标签的for属性应当与相关元素的id属性相同...

2020-09-27 17:24:50 330

原创设置谷歌广告拦截器

await page=await browser.newPage()//监听请求事件，并对请求进行拦截page.on('request',interceptedRequest=>{ //通过URl模块对请求的地址进行解析 let urlObj=url.parse(interceptedRequest.url()) if (urlObj.hostname=="goodleads.g.doubleclick.net"){ //如果是谷歌的广告请求，那么就放弃当次请求，因为谷歌广告响

2020-09-05 13:03:03 418

原创 filter/map/reduce高阶函数

高阶函数编程范式：面向对象编程（第一公民：对象）/函数式编程（第一公民：函数）filter/map/reducefilter中的回调函数·有一个要求：必须返回一个Boolean值true：当返回true时，函数内部会自动将这次会掉的n加入到新的数组中false：当返回false时，函数内部会过滤掉这次的nconst nums=[10,20,111,222,444,40,50]let total=nums.filter(n=>n<100).map(n=>n*2).reduce(

2020-08-19 13:38:28 114

原创网站中LOGO SEO优化

1.logo里面首先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要。2.h1里面再放一个链接，可以返回首页的，把logo的背景图片给链接即可。3.为了搜索引擎收录我们，我们链接里面要放文字额（网站名称），但是文字不要显示出来（1）text-indent移到盒子外面（text-indent:-9999px)，然后overflow:hidden,淘宝的做法（2）直接给font-size:0;就看不到文字了，京东的做法4.最后给链接一个title属性，这样鼠标放到logo上就可以看到提示文

2020-07-18 17:19:03 372

原创 js动画原理

js动画原理1.获得盒子当前位置2.让盒子在当前位置加1个移动距离3.利用定时器不断重复这个动作4.加一个结束定时器的条件5.注意次元素需要添加定位，才能使用element.style.left<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init

2020-07-15 16:28:02 168

原创 JS中this指向的问题

this指向问题this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this指向谁。一般情况下this的最终指向为那个调用它的对象了解this的几个指向1、在全局作用域或者普通函数中this指向全局对象window（定时器里的this指向window）2.方法调用中调用this指向调用它的对象3、构造函数中的this指向构造函数的实例·<!DOCTYPE html><html lang="en"><head> <meta c

2020-07-13 17:28:44 75

原创手机发送短信案例

手机发送短信案例思路：1、按钮点击之后，会禁用disable为true同时按钮里面的内容会变化，2、注意button的值通过innerHTML修改3、里面的秒数再点击按钮之后会变化因此会用到计时器4、定义一个变量，在定时器里面不断递减5、如果变量为0，说明到了时间，需要清除定时器并复原按钮<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">

2020-07-13 16:38:12 322

原创 setInterval倒计时效果

倒计时效果要点：1、这个定时器是不断变化的所以需要定时器来自动变化，所以用setInterval2、三个黑色的盒子分别存放时分秒3.三个盒子利用innerHTML将倒计时间写入4、第一次执行也是间隔毫秒数，因此刷新页面会有空白5、最好采取封装函数的方式，这样可以先调用一次这个函数，防止刚开始刷新页面空白问题。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l

2020-07-13 15:52:20 359

原创 JS 调整窗口大小事件案例

JS 调整窗口大小事件案例window.addEventListener(“resize”,function(){});利用这个事件完成响应式布局，window.innerWidth当前屏幕的宽度window.addEventListener（“load”,function(){});窗口加载事件，是为了页面加载完毕就可以执行函数里面相应的事件，这样就可以把JS代码写到页面元素的上方。window.onload是传统的注册时间方式，他可以实现一样的功能但是只能写一次，多写会只以最后一个window.

2020-07-13 11:09:27 1520

Sandrahh的博客