面试总结
文章平均质量分 65
人间草木96
这个作者很懒,什么都没留下…
展开
-
js中的 赋值 浅拷贝 和 深拷贝 详细解读
js数据类型主要分基本数据类型和引用数据类型。前者包括Number,String等,后者主要是Object,因此以下会针对不同的数据类型来分析,需要的朋友可以参考一下前言:在学习下面文章前我们简单了解一下的内存的知识,以下先简要提一下。原创 2024-09-19 11:33:57 · 484 阅读 · 0 评论 -
vue组件中父子传值双向绑定
效果图父组件页面父组件页面引用子组件父组件用 :parentmessage.sync="hphm" 传递 hphm 给子组件并接收子组件更新过的 hphm<its-hphmInput class="filter-input" glbm="京" size="small" v-model="searchFrom.hphm" @onChange="hphmToU...原创 2020-04-21 17:41:16 · 1543 阅读 · 0 评论 -
Vue 点击组件外部隐藏组件自身
在开发组件的时候,点击组件外部隐藏组件自身的这种情况很长见到,例如:时间选择框组件,下拉选件等。示图:点击外层元素隐藏自定义车牌选择框代码如图中所写:核心:1、最外层div中添加一个@click.stop(取消事件冒泡),可以不添加事件名。2、在mounted给body添加一个点击事件,事件触发组件的隐藏。 document.bo...原创 2020-04-15 14:12:23 · 1598 阅读 · 0 评论 -
记好这 24 个 ES6 方法,用来解决实际开发的 JS 问题
记好这 24 个 ES6 方法,用来解决实际开发的 JS 问题本文主要介绍 24 中 es6 方法,这些方法都挺实用的,本本请记好,时不时翻出来看看。1.如何隐藏所有指定的元素consthide=(...el)=>[...el].forEach(e=>(e.style.display='none'))//事例:隐藏页面上所有`<img&...原创 2020-03-12 10:52:19 · 321 阅读 · 0 评论 -
12 种使用 Vue 的最佳做法
12 种使用 Vue 的最佳做法随着 VueJS 的使用越来越广泛,出现了几种最佳实践并逐渐成为标准。在本文中,主要分享在平时开发中一些有用资源和技巧,废话少说,我们开始吧。1.始终在 `v-for` 中使用 `:key`在需要操纵数据时,将key属性与v-for指令一起使用可以让程序保持恒定且可预测。这是很有必要的,这样Vue就可以跟踪组件状态,并对不同的元素有一个常量引用...原创 2020-03-12 10:44:56 · 348 阅读 · 0 评论 -
JavaScript的各种日期操作【值得收藏】
前言虽然现在处理日期方面已经有了很成熟的也很好用的库,例如(momentjs和date-fns),但是在实际开发中,我们有时候可能并不需要整个库。所以我就在下面整理了在前端开发时对日期时间的各种操作,也算是比较全的了。其中一部分来自自己,还有一部分来源于我们万能的网友~获取当前时间戳var timestamp = Date.parse(new Date()); //精确到秒...原创 2020-01-13 09:52:28 · 671 阅读 · 0 评论 -
JavaScript 那些写出来会被同事揍的骚操作
JavaScript 那些写出来会被同事揍的骚操作Vue社区今天关注Vue社区,回复“加群”加入我们一起学习,天天进步布拉德特皮juejin.im/post/5e044eb5f265da33b50748c8前言曾经,我接手了一份大佬的代码,里面充满了各种“骚操作”,还不加注释那种,短短几行的函数花了很久才弄懂。这世上,“只有魔法才能对抗魔法”,于是...转载 2019-12-30 10:56:15 · 290 阅读 · 0 评论 -
ES6入门——前端知识点总结
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-U...原创 2019-12-06 15:23:25 · 201 阅读 · 0 评论 -
ES6字符串新增的 startsWith(), endsWith(),includes()三种实例化方法比较
startsWith()方法该方法判断一个字符串是否在另一个字符串的头部,返回一个布尔值,true表示存在 let str = 'hello word' console.log(str.startsWith('he')) // true console.log(str.startsWith('666')) // falseendsWith()方法该方法判断一个字符串是...原创 2019-12-05 17:34:51 · 285 阅读 · 0 评论 -
DOM 高级工程师不完全指南
“前端框架真的太香了,香到我都不敢徒手撕 DOM 了!”虽然绝大多数前端er都有这样的困扰,但本着基础为大的原则,手撕 DOM 应当是一个前端攻城狮的必备技能,这正是本文诞生的初衷 —— DOM 并没有那么难搞,如果能去充分利用它,那么你离爱上它就不远了。三年前我初入前端坑的时候,发现了一个叫做 jQuery 的宝贝,她有一个神奇的 $ 函数,可以让我快速选中某一个或一组 DOM 元素,并...原创 2019-12-05 10:59:11 · 256 阅读 · 1 评论 -
vue中8种组件通信方式, 值得收藏! (面试必问)
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢?首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就好像过年回家,坐着一屋子的陌生人,相互之间怎么称呼,这时就需要先知道自己和他们之间是什么样的关系。vue组件中关系说明:如上图所示, A与B、A与C、B与D、C与E组件之间是父子关系;B与C之间...原创 2019-12-05 09:47:00 · 884 阅读 · 0 评论 -
CSS 动画:纯 CSS 实现 loading 效果
效果代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta ht...原创 2019-12-03 10:05:32 · 434 阅读 · 0 评论 -
JS中test match replace的三个方法的用法区别
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="...原创 2019-12-02 17:28:15 · 385 阅读 · 1 评论 -
如何使用原生CSS在DIV层中画一条线?
效果图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta htt...原创 2019-11-28 16:25:59 · 4461 阅读 · 0 评论 -
Vue组件常用的六种通信方式
Vue.js 组件实例的作用域是相互独立的,不同组件之间的数据不能互相访问,组件有父级组件、子级组件、兄弟组件,如何选择组件之间的通信方式?针对常用的 props、$emit/$on、vuex、$parent/$children、$attrs/$listeners、provide/inject 进行讲解,对比各自的区别以及使用场景。1. props子组件使用props 接收父组件传递的值,...原创 2019-11-22 17:13:34 · 420 阅读 · 0 评论 -
div背景框自定义 而且高度自适应 CSS原生实现
效果代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me...原创 2019-11-21 17:42:05 · 337 阅读 · 0 评论 -
JavaScript数组,数组对象去重
数组去重 let arr2 = ['小王', '小王', '小张'] let newArr2 = [...new Set(arr2)] console.log("TCL: newArr2", newArr2) // TCL: newArr2 (2)["小王", "小张"]数组对象去重1.reduce()方法 let arr = [ ...原创 2019-11-14 14:17:01 · 141 阅读 · 0 评论 -
iframe 的页面方法调用学习
外部调用iframe里的方法document.getElementById('test21').contentWindow.saveData()window.test21.saveData();// test21是iframe的name值iframe里的界面调用外部界面方法window.parent.fnTest20()效果图父html...原创 2019-11-12 17:03:23 · 881 阅读 · 0 评论 -
Javascript 中的 ...(展开运算符)
曾几何时,ES6/ES2015 对 Javascript 语言进行了重大升级。它引入了许多不同的新功能。其中之一就是我们可以用在任何兼容容器(对象、数组、字符串、集合、映射)前面的三个连续点。这些小点使我们能够编写更加优雅和简洁的代码。在本文中我将会解释这三个点的工作原理,并展示最常见的例子。三个连续的点具有两个含义:展开运算符(spread operator)和剩余运算符(rest oper...原创 2019-11-11 11:11:14 · 6638 阅读 · 7 评论 -
CSS3 动画(圆点闪烁动画效果的实现)
代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...原创 2019-11-07 17:13:11 · 12723 阅读 · 2 评论 -
JS中获取元素属性的8大方法
在Web前端开发中经常用到的技术:获取元素属性的一系列方法【innerHTML、outerHTML、innerText 、outerText、value、text()、html(),val()】这些方法,大家应该用过,如果让你说出它们的一些区别和联系,能答得上来吗?接下来让我们一起来温故下。首先我们需要把它们归类下:innerHTML、outerHTML、innerText 、out...原创 2019-11-04 18:00:00 · 1235 阅读 · 0 评论 -
JS 进阶需要掌握的 12 个概念
本文介绍 JS 比较重要的12个概念,但绝对不是说 JS开发人员只需要知道这些就可以了。1.变量赋值 (值 vs 引用)理解 JS 如何给变量赋值可以帮助我们减少一些不必要的bug。相反,如果,不理解这一点,可能很容易地编写被无意中更改值的代码。JS 总是按照值来给变量赋值。这一部分非常重要:当指定的值是 JavaScript 的五种基本类型之一(即Boolean,null,...原创 2019-10-29 09:34:25 · 146 阅读 · 0 评论 -
Moment.js常用API速查
日常开发经常会用Moment.js来处理时间,现对频繁使用的几个API做下整理,以便日后查阅。获取时间moment().valueOf() // 获取时间戳(以毫秒为单位) moment().startOf('day') // 获取今天0时0分0秒moment().startOf('isoWeek') // 获取本周周一0时0分0秒moment().startOf('mo...原创 2019-10-17 10:14:16 · 500 阅读 · 0 评论 -
vue中nextTick()方法的使用学习
nextTick() 用于在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的DOMnextTick()是属于异步更新队列应用场景在Vue生命周期的created钩子函数进行的DOM操作一定要放在vue.nextTick()的回调函数中在数据变化后要执行的某个操作,而这个操作需要使用随机数据改变而改变的DOM结构的时候,这个时候的操作都应该放进Vu...原创 2019-10-15 10:23:58 · 262 阅读 · 0 评论 -
vue-router query和params传参(接收参数)$router $route的区别
1.query方式传参和接收参数传参: this.$router.push({ path:'/xxx', query:{ id:id } }) 接收参数:this.$route.query.id注意:传参是this.$router,接收参数是this.$route,这里千万要看清了!!!this.$...原创 2019-09-26 16:47:24 · 453 阅读 · 0 评论 -
CSS布局方式
网页布局 流动布局 需了解实现块居中常见的几种方式 浮动布局 当设置float:left或者float:right时, 元素会左移或右移直到触碰到容器位置,仍然处于标准文档流中。当元素没有设置宽度值,而设置了浮动属性,元素的宽度随内容的变化而变化。当元素设置为浮动属性后,会对紧邻之后的元素造成影响,紧邻之后的元素会紧挨着该元素显示。当父元素包含块缩成...原创 2019-09-23 17:46:41 · 275 阅读 · 0 评论 -
一些有趣的CSS魔法
鼠标悬浮使内容自撑开在以前遇到这个需求的时候,我们可能会想到用 JS 来操作内容的显式与否。现在,CSS3 的transition可以帮我们更简单地实现。<ul> <li style="padding-bottom: 20px;"> <div class="head"> 列表1 <...原创 2019-09-23 17:35:43 · 266 阅读 · 0 评论 -
一些有趣的CSS布局
前言布局和样式,是每个前端的必修课。在日常的工作中,也会碰到一些特定场景的布局需求,配合上样式,就能实现一些神奇的效果。我搜罗了一些日常开发中遇到的布局,以及浏览各大网站时碰巧发现的神奇特效写法,在此做个分享。由于篇幅原因,会分为 2 篇。今天,会先介绍一些有趣而又实用的布局的写法。之后的一篇,将展现样式的神奇魔法。懒加载占位图自适应在商城中展示商品图片时,如果图片较多,一种比较好...原创 2019-09-23 17:33:53 · 236 阅读 · 0 评论 -
js变量提升与函数提升的详细过程
js变量提升与函数提升的详细过程先来看两个栗子,下面的两段代码分别输出什么?// 代码段1function foo() { var a = 1; function a() {} console.log(a);}foo();// 代码段2function foo() { var a; function a() {} console.log(a);}f...原创 2019-09-23 17:23:57 · 83 阅读 · 0 评论 -
JavaScript 中 call、apply、bind 用法和区别
简介JavaScript 中有三个方法Function.prototype.call()、Function.prototype.apply()和Function.prototype.bind()可以用来指定函数 this 值。call()和apply()类似,都是调用函数,并指定函数的 this 值thisArg和参数,区别在于call()传入参数是通过参数列表的形式arg1, arg2...原创 2019-09-23 14:11:38 · 115 阅读 · 0 评论 -
http状态码
简单版 100 Continue 继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息 200 OK 正常返回信息 201 Created 请求成功并且服务器创建了新的资源 202 Accepted 服务器已接受请求,但尚未处理 301 Moved Permanently...原创 2019-09-23 11:54:22 · 88 阅读 · 0 评论 -
JS正则表达式(火星文)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>正则表达式(火星文)</title></head><body><input type="text" id="myText" plac...原创 2020-05-13 13:39:17 · 1204 阅读 · 1 评论 -
Javascript基础——this指向
Javascript的this指向问题,有些人可能觉得很简单,有些人却觉得扑朔迷离,看完本文之后相应会对this的掌握有一个直观的判断,而不是"开局全靠猜"。敲黑板function函数this指向由调用方式确定,跟定义环境无关。 箭头函数this指向由定义环境决定,与调用方式无关,也不可以bind(this)。严格模式非严格模式下,全局作用域下的this指向window 严格模式...原创 2019-09-27 17:18:20 · 135 阅读 · 0 评论 -
JavaScript里处理数字的一些常用方法
1.toString()把数值转换为字符串。let num = 123;console.log(typeof(num)); //numberconsole.log(typeof(num.toString())) //stringtypeof() 判断数据类型2.toLocaleString() 方法可把一个 Number 对象转换为本地格式的字符串。LocaleString(...原创 2019-09-29 10:27:48 · 371 阅读 · 0 评论 -
JS字符串常用方法 ES6
字符串的遍历器接口ES6为字符串添加了遍历器接口(详见《Iterator》一章),使得字符串可以被for...of循环遍历。for (let codePoint of 'foo') { console.log(codePoint)}// "f"// "o"// "o"除了遍历字符串,这个遍历器最大的优点是可以识别大于0xFFFF的码点,传统的for循环无法识别这样的码点。...原创 2019-09-29 10:55:15 · 273 阅读 · 0 评论 -
JS遍历方法大总结
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Co...原创 2019-09-29 11:57:53 · 226 阅读 · 0 评论 -
JS Math 对象常用方法 ES5
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <script> // 1. abs() 方法 可返回一个数的绝对值...原创 2019-09-29 15:12:41 · 383 阅读 · 0 评论 -
JS正则表达式大全
正则迅雷链接/^thunder:\/\/[a-zA-Z0-9]+=$/ed2k链接(宽松匹配)/^ed2k:\/\/|file|.+|\/$/磁力链接(宽松匹配)/^magnet:\?xt=urn:btih:[0-9a-fA-F]{40,}.*$/子网掩码/^(?:\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(?:\.(?:\d{1,2}|...原创 2019-09-29 15:50:17 · 3020 阅读 · 0 评论 -
ES6中的var, let, const
var, let, const这三个东西, 经常会被问到。汇总一下,基本上就是:var, let, const有什么区别? let, const 有没有变量提升(hosting) ? 什么是TDZ?首先, 我们先整体的看下区别:针对这几点, 我们一个个看。首先, 我们还是先了解一下变量提升.看个例子:console.log(a) // undefine...原创 2019-10-10 09:55:59 · 123 阅读 · 0 评论 -
移动Web开发小结2
不用说我也知道,此类文章太多太多了,常见的譬如:viewport、强制浏览器全屏、IOS的Web APP模式、可点击元素出现阴影(这个我觉得真没必要去掉,用户点击是需要反馈的,而这个背景色刚刚好提供了一种反馈)等等,太多啦,这些相信大家百度一下就可以查到很多资料????本篇文章主要是讲一些其他的或者优化手段。内容不多????1. 弹出数字键盘<!-- 有"#" "*"符号输入 --&g...原创 2019-10-10 16:29:53 · 145 阅读 · 0 评论