- 博客(94)
- 收藏
- 关注
RSS订阅原创 输入的ip地址添加校验规则(Vue)
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
2021-07-15 14:58:08
2930
1
原创 数据结构学习之队列
文章目录1. 认识队列2. 队列结构的实现常见队列队列的常用方法封装方法测试3. 队列的笔试题1. 认识队列队列结构是一种常见的线性结构其限制为今允许在表的一端进行插入操作,在表的另一端进行删除操作.进行插入的一段称为队尾进行删除的一段称为对头或队首简单的一个队列结构如下图所示:队列的特点向队列中插入新的元素称为进队或入队,元素进队之后成为新的队尾元素删除队列中的元素称为出队或离队,元素出队后,后继的元素直接成为队首元素由于队列的掺入和删除操作分别在个子的一端进行,每个
2020-11-08 16:02:57
208
原创 数据结构学习之栈
文章目录1. 认识栈结构2. 常见的栈笔试题3.栈结构的实现3.1 栈的创建3.2 栈的常见操作列举3.3 封装方法测试4. 栈结构的应用4.1 简单应用二进制转十进制4.2 求解迷宫问题1. 认识栈结构栈结构栈结构是一种常见的线性数据结构栈是一种只能在一端进行插入或删除操作的线性表表中允许插入,删除操作的一端称为栈顶,表的另一端称为栈底.向一个栈插入新元素又称作进栈、入栈或压栈，它是把新元素放到栈顶元素的上面，使之成为新的栈顶元素；从一个栈删除元素又称作出栈或退栈，它是把栈顶元素删除掉，
2020-11-06 21:45:51
295
原创 2020-10-22美图笔试 实现跑马灯动画效果
请至少使用一种方式显示一个跑马灯动画效果,页面每隔2s显示下一条用户信息.const arr = [‘A用户5秒前购买了…’,‘B用户3秒前购买了…’,‘C用户1秒前购买了…’,]第一眼看到觉得用单纯的setTimeout就可以实现效果,但是后来才明白这样只能循环一次,最终还是要依赖promise来实现,具体代码如下: <div id="box"></div> <script> const arr = [ 'A用户5秒前购买了.
2020-10-22 22:01:00
215
2
原创 Javascript中的局部变量、全局变量的详解
文章目录1. js声明变量的几种方式在看这篇文章的内容之前我们先来看下面的一道题目(这两天参加校招笔试,碰到了很多这种题目) var test = 'test'; function f() { console.log(test); var test = 'hello'; console.log(test); } f();执行函数fn的时候会输出什么呢?天啦,这道题我会,js中的作用域链中说了,使用一个变量的时候会先向自
2020-09-26 11:29:10
489
3
原创 flex布局复习知识
文章目录1. 什么是flex布局2. 基本概念2.1 普通流规则2.2 弹性盒模型规则2.3 弹性盒模型宽度设置2.4 弹性盒模型子元素高度设置3. 容器的属性3.1 flex-direction属性3.2 flex-wrap属性3.3 flex-flow属性3.4 justify-content属性3.5 align-items属性3.6 align-content属性4. 项目的属性4.1 order属性4.2 flex-grow属性4.3 flex-shrink属性4.4 flex-basis属性4
2020-09-21 21:29:31
276
1
原创 CSS 不定宽高的盒子水平垂直居中
在平时练习的时候经常会碰到盒子需要定位的问题,一般都是使用 margin:auto 就可以实现盒子的定位了.有同学说在面试的时候碰人家问了这道题,说实话,突然还有点懵,我想没有宽高的盒子看都看不见,何谈定位,其实是我偏面了,里面可以写一些内容把盒子撑开.具体看下面:1.使用定位来实现 .box1 { position: relative; width: 200px; height: 200px;
2020-09-20 10:03:58
367
原创 前端面试之this指向
文章目录1. 理解this1.1 this到底指向什么2. this的绑定规则2.1 默认绑定普通函数调用函数调用链(一个函数又调用另外一个函数)将函数作为参数传递到另外一个函数中2.2 隐式绑定通过对象调用函数对象的链式调用隐式丢失给函数起别名函数作为另外一个函数的参数2.3 显示绑定call,apply,bind内置函数setTimeout()数组的forEach2.4 new 绑定3. 规则优先级这几天参加了很多面试和笔试,其中有很多的各种各样的this指向的或笔试或面试题,发现自己其实有很多没有搞
2020-09-15 23:24:39
478
1
原创 表单动态操作数据交互
使用 Vue和 BootStrap 实现下面的功能:默认情况下:姓名和学号框全为空的时候,提交按钮不能点击姓名和学号框全有一项不为空的时候,重置按钮才可以点击表格中默认显示暂无数据,添加数据之后暂无数据隐藏点击删除按钮,弹出弹框点击弹框中的删除按钮后才会真正删除数据先搭建一个基本的页面:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <ti
2020-09-08 23:07:24
387
1
原创 前端面试之深浅拷贝
文章目录堆和栈的主要区别js数据类型堆和栈的主要区别其实深拷贝和浅拷贝的主要区别就在于其内存中的存储类型不同.堆和栈都是内存中划分出来用于存储的区域.栈会自动扥配内存空间,由紫铜自动释放堆则是动态分配的内存,大小不定也不会自动释放.js数据类型js 的数据类型大方向上来说有两种:基本数据类型(String, Number, Boolean, Null, Undefined，Symbol)引用数据类型(Array,Object)当一个变量存放基本数据类型时与复杂的数据类型时分别存在
2020-09-06 21:28:32
763
原创 Vue知识总结
文章目录1.概念1.1 对SPA单页面的理解,优缺点是什么?1.2 什么是MVVM?2. 基础知识2.1 v-show 和 v-if 的区别?2.2 computed 和 watch 的区别和运用场景?3.组件3.1 组价中的data为什么是一个函数?3.2 Vue组件间通信的方式?3.3 对keep-alive的理解?4.生命周期4.1谈谈你对 Vue 生命周期的理解？4.2 Vue 的父组件和子组件生命周期钩子函数执行顺序？4.3 父组件可以监听到子组件的生命周期吗?4.4 在哪个生命周期内调用异步请
2020-08-28 22:20:51
464
原创 Vue项目首页实现思路总结
文章目录1.项目的基本配置项目结构css初始化和全局样式vue.config.js和.editorconfigTabBar的封装axios封装首页开发首页NavBar的开发请求首页轮播图和推荐的数据轮播图的展示推荐部分数据的展示TabControl的封装和使用请求首页商品数据展示商品数据点击TabBar切换对应的内容使用better-scroll对项目的滚动进行重构回到顶部backTop组件的封装点击组件回到顶部的封装backTop组件的显示和隐藏根据b站上coderwhy老师的视频做的Vue项目,在老
2020-08-24 23:25:14
3797
13
原创 Vue基础语法复习
文章目录1.插值语法1.1 Mustache1.2 v-once1.3 v-html1.4 v-text1.5 v-pre1.6 v-cloak2.绑定属性2.11.插值语法1.1 Mustache如何将data中的文本数据，插入到HTML中呢？可以通过Mustache语法(也就是双大括号)。Mustache: 胡子/胡须.我们可以像下面这样来使用，并且数据是响应式的1.2 v-once但是，在某些情况下，我们可能不希望界面随意的跟随改变这个时候，我们就可以使用一个Vue的指令v-
2020-08-23 23:15:27
420
原创 vue自定义底部导航栏Tabbar
使用vue封装一个如下图所示的组件主要的项目结构如下:在component/tabbar中新建组件TabBar.vue,内容如下:<template> <div class="tab-bar"> <slot></slot> </div></template><script>import TabBarItem from './TabBarItem' export default {
2020-08-06 21:58:43
1323
1
原创 Vue路由: Vue-router基本配置与使用
目前前端流行的三大框架, 都有自己的路由实现:Angular的ngRouterReact的ReactRouterVue的vue-router当然, 我们的重点是vue-routervue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。我们可以访问其官方网站对其进行学习:https://router.vuejs.org/zh/vue-router是基于路由和组件的路由用于设定访问路径, 将路径和组件映射起来.在vue-r..
2020-08-06 20:32:35
980
原创 前端路由,后端路由,前端渲染,后端渲染了解
文章目录1.什么是路由2. 后端路由阶段2.1 后端路由2.2. 后端渲染2.3 后端渲染的优缺点3. 前后端分离阶段3.1 前端渲染3.2 前端渲染的优缺点4.前端路由阶段4.1 前端路由的概念4.2 单页面开发的优缺点4.3 什么时候使用到前端路由?写在前面:认识前端路由和后端路由前端路由相对于后端路由而言的, 在理解前端路由之前先对于路由有一个基本的了解路由: 简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是: 根据不同的url地址展示不同的页面内容.1.什么是
2020-08-02 21:52:36
403
原创 webpack学习笔记
文章目录一.webpack 的安装一.webpack 的安装装webpack首先需要安装Node.js，Node.js自带了软件包管理工具npmnode -v全局安装webpack,由于项目需要,我这里安装的版本是3.6.0npm install webpack局部安装webpack（后续才需要）–save-dev`是开发时依赖，项目打包后不需要继续使用的。cd 对应的目录 //进入对应的目录npm install webpack --save-dev为什么全局安
2020-07-31 15:38:07
436
原创 关于JavaScript防抖和节流理解
文章目录一.认识防抖和节流1.1 什么是防抖和节流1.2 为什么会需要防抖1.3 为什么会需要节流二.防抖函数的实现2.1防抖案例引入2.2自定义防抖函数三.节流函数的实现一.认识防抖和节流1.1 什么是防抖和节流根据我们之前所学,我们可以知道以下两点:JavaScript是事件驱动的,大量的操作会触发事件,会加入到事件队列中等待处理而对于某些频繁的事件处理会造成性能的损耗因此我们就可以通过防抖和节流来限制事件频繁的发生；防抖和节流函数目前已经是前端实际开发中两个非常重要的函数，也是面试经
2020-07-28 18:30:11
532
原创 AJAX 请求封装
封装的套路：写一个相对比较完善的用例写一个空函数，没有形参，将刚刚的用例直接作为函数的函数体根据使用过程中的需求抽象参数// 创建XHR核心对象 let createXHR = () => { if (window.XMLHttpRequest) { // 现代浏览器兼容 return new XMLHttpRequest(); } // IE兼容 return new ActiveXObject('M
2020-07-24 17:38:09
143
原创 JavaScript正则表达式
文章目录基础知识对比分析转义创建正则字面量方式对象创建正则表达式的方法testexec修饰符不区分大小写全局匹配多行匹配基础知识正则表达式是用于匹配字符串中字符组合的模式，在 JavaScript中，正则表达式也是对象。正则表达式是在宿主环境下运行的，如js/php/node.js 等正则表达式在其他语言知识中也是可用的,只是会有些函数使用上的区别正则表达式是字符串的一种匹配模式，专门为简化字符串操作而生说白了就是为了检索一个字符串中特定字符的规则,正则并不是单纯的字符串,而是一种逻辑公
2020-07-21 11:21:04
178
原创 js中的执行机制 宏任务微任务
做进做了几套题,碰见了好几个和下面的代码相似的例子,发现自己其实并没有理解JavaScript中的事件执行机制的相关内容.像下面的这种例子,在面试题中经常会碰到.console.log(1);setTimeout(() => {console.log(2)}, 0);console.log(3);Promise.resolve(4).then(b => {console.log(b);});console.log(5);//1 3 5 4 2上面死一个简单的例子,还有很多
2020-07-19 18:58:12
767
1
原创 三栏布局的实现方法
三栏布局的实现方法有:absolute 布局float 布局flex 布局grid 布局table 布局1.使用absolute代码如下: <div class="content"> <div class="left">左</div> <div class="center">中</div> <div class="right">右</div>
2020-07-17 21:51:06
200
原创 leetCode题目 —— 一年中的第几天和一周中的第几天（JavaScript）
一年中的第几天给你一个按 YYYY-MM-DD 格式表示日期的字符串 date，请你计算并返回该日期是当年的第几天。通常情况下，我们认为 1 月 1 日是每年的第 1 天，1 月 2 日是每年的第 2 天，依此类推。每个月的天数与现行公元纪年法（格里高利历）一致。示例 1：输入：date = “2019-01-09”输出：9示例 2：输入：date = “2019-02-10”输出：41示例 3：输入：date = “2003-03-01”输出：60示例 4：输入：d
2020-07-17 09:45:58
723
原创 设计一个TODO List,使用html和css,实现添加删除模糊匹配功能
设计一个TODO List，页面结构如下图所示，要求：使用HTML与CSS完成界面开发实现添加功能：输入框中可输入任意字符，按回车后将输入字符串添加到下方列表的最后，并清空输入框实现删除功能：点击列表项后面的“X”号，可以删除该项实现模糊匹配：在输入框中输入字符后，将当前输入字符串与已添加的列表项进行模糊匹配，将匹配到的结果显示在输入框下方。如匹配不到任何列表项，列表显示空注：以上代码实现需要能在浏览器中正常显示与执行。设置页面主题布局的代码如下: <h1>todos&
2020-07-16 11:04:27
662
原创 复习JavaScript数组splice()方法
splice() 方法恐怕是最强大的数组方法了,它有很多中用法,splice() 方法的主要用途是向数组的中部插入项,使用这个方法主要有下面三种规则:1. 删除删除操作:可以删除任意数量的项,只需指定两个参数:要删除的第一项的位置要删除的项数,如solice(0,2),删除数组的前两项,示例代码如下: let arr = [0, 1, 2, 3, 4, 5, 6]; let newArr = arr.splice(0, 2) console.lo
2020-07-06 23:10:13
205
原创 JavaScript数据类型转换总结
文章目录1. typeof 操作符2.转数值2.1 Number()函数的转化规则:2.2 parseInt()2.3 parseFloat()3.转字符串3.1 toString()3.2 String()4. 转布尔值JavaScript中有7种数据类型:6 种原始类型（简单类型）：数值：Number：整数和小数字符串：String：字符组成的文本布尔：Boolean：true和false两个特定值Null：表示无值，即此处的值就是“无”的状态Undefined：表示“未定义”或不存在，
2020-07-05 16:21:59
285
原创 了解childNodes 和 children 区别
做题的时候碰见了关于 childNodes 和 children之间的区别的问题,查了一点点资料,对他们二者之间也有了一些了解,写博客加深一下自己的印象.二者的定义:childNodes: 返回包含指定节点的子节点的集合，该集合为即时更新的集合children : 是一个只读属性，返回 一个Node的子elements ，是一个动态更新的 HTMLCollection,属于非标准型，不过它还是依旧可以被所有的浏览器所支持用下面的一段代码来展示二者之间具体的区别:childNodes的结果:
2020-07-05 09:42:15
3984
2
原创 JavaScript总结part one
1. cookie的弊端:cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性的。第一：每个特定的域名下最多生成20个cookie1.IE6或更低版本最多20个cookie2.IE7和之后的版本最后可以有50个cookie。3.Firefox最多50个cookie4.chrome和Safari没有做硬性限制IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie。cookie的最大大约为4096字节，为了兼容性，一般不能超
2020-06-26 21:36:25
312
原创 JavaScript控制表格行列变色
实现点击按钮控制表格行列变色,效果如下图:具体代码如下:代码还有很多可以优化的地方,大家可以再优化看看:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l
2020-06-21 11:26:15
889
2
原创 JavaScript基础编程题目练习
文章目录1.如何将浮点数点左边的数每三位添加一个逗号，如12000000.11转化为『12,000,000.11』?2.如何实现一个数组的随机排序?3.产生四位随机验证码4.给你一个字符串String=“adadfdfseffqdjhuserfefsefseetsdg”，要求找出里边的字符串qdjhu5.自定义函数实现字符串反转6.判断字符串是不是回文字符串7.javaScript中如何检测一个数据是不是String类型?8.我们可以用2\*1的小矩形横着或者竖着去覆盖更大的矩形。请问用n个2\*1的小矩形
2020-06-20 16:18:23
2304
原创 transfrom translate transition animation傻傻分不清
之前一直还觉得很自信,感觉自己css部分掌握 的很不错,但是知识确实是需要经常回顾的,这半年很少写原生的东西,结果前两天看见一道题目,看见这四个单词我当场石化,完全分不清楚了…为了加深自己的记忆,我写这篇博客稍微总结一下:...
2020-06-19 11:36:48
285
原创 关于DOM2级事件的事件捕获和事件冒泡
当浏览器开发到第四代的是会,浏览器的开发团队遇到了一个很有意思的问题:页面的哪一部分会拥有特定的事件?要明白这个问题问的是什么,我们可以想下面的一个问题,加入我们在一张纸上画了一组同心圆.如果把手放在纸上,那么手指指向的不是那一个特定的圆而是纸上所有的圆.两家浏览器开发团队在看待浏览器事件方面还是一致的.如果我们单击 某个按钮,他们都认为单击事件并不仅仅发上在按钮身上.换句话说,你也同时单击了按钮的容器元素,甚至也单击了整个页面.事件流描述的就是从页面中接收事件的顺序.但是IE 和 Netspace 开发
2020-06-16 20:36:10
693
原创 编写请给 Array 本地对象增加一个原型方法，它用于删除数字数组中重复的数字（可能有多个），返回值是一个包含被删除的重复条目的新数组
这道题目中要求的是在 Array 本地对象增加一个原型方法,它用于删除数字数组中重复的数字（可能有多个），返回值是一个包含被删除的重复条目的新数组.所以在做这道题目之前我们先要理解JavaScript 中 原型 和 原型对象 ,如果还有不清楚的情戳下方链接了解哦>_<https://blog.csdn.net/lhrdlp/article/details/106259275既然是和数组去重相关的题目,我们就先来看普通的数据去重是怎样做的???看下面的代码:function fun(ar
2020-06-15 10:29:40
420
原创 Vue 混入对象
1.认识混入混入是一种代码的组织方式,可以在多个组件间横向的复用代码.定义混入对象,只需要把混入对象添加到组件中,那么该组件就可以获取到该混入对象中存储的任何东西.2.混入的基本使用听到混入这个词是不是会有一种熟悉的感觉,我们在less 的基本语法中也有一个混入Mixin,但今天的混入和那个还是不一样哦…混入(mixin)提供了一种非常灵活的方式来分发vue 组件中的可复用功能.一个混入对象可以包含任意组件选项,当组件使用混入对象的时候,所有混入对象的选项将会被"混合"进入该组件本身的选项.示例
2020-06-14 17:16:50
528
原创 javaScript实现数组的随机排序
方案一已经学过JavaScript,我们当然就可以用数组的排序方法 sort,这是最简单的方式来实现了.sort 方法的基本语法:arr.sort();不传参数就默认排序,可以传入一个函数作为参数,自定义排序规则整体返回:返回排序的数组是否改变原数组:改变原数组使用 sort 实现数组排序的基本语法如下:arr.sort(function(a,b){ return Math.random()-0.5; //==>数组乱序排列})话不多说,直接看代码:let
2020-06-13 22:32:36
578
原创 Vue动态组件和keep-alive保持组件状态
1.动态组件动态组件:顾名思义,动态组件就是可以动态的切换组件的显示需求:根据不同的状态显示不同的状态1.1 使用 v-if 或 v-show 切换组件示例代码如下: <style> *{ margin: 0; padding: 0; } li{ list-style: none; } #app{ wid
2020-06-13 12:32:17
1041
原创 Vue插槽的认识和基本使用
文章目录1.编译作用域2.插槽的基本使用2.1 插入基本的文本内容写在前面:加入我们的需求是设置一个通用性的按钮,按钮的内容是使用的时候来决定,我们可能会通过一个属性来设置按钮的文本,示例代码如下:<div id="app"> <my-com value="注册"></my-com> <my-com value="提交"></my-com> <my-com value="重置">&l
2020-06-12 21:53:47
180
原创 Vue 兄弟组件之间的传参
经过之前的学习,我们已经大致了解到了数据在组件之间的传递父组件通过 props 属性将数据传递给子组件子组件通过自定义事件将数据传递给父组件那么我们之前所了解到的都是父子组件之间的数据传递,那么有时候我们就会碰到不是父子关系的组件也需要数据的传递,这个时候我们怎么办呢?不是父子关系的组件可能会有下面的两种情况:两个组件,有一个共同的父组件的兄弟组件.两个组件之间并没有太大的关系,甚至要找好几层才能找到共同的祖先组件.1.兄弟组件之间的数据传递兄弟关系的组件拥有一个共同的父组件,那么就
2020-06-12 08:37:47
1687
原创 Vue子组件向父组件传参(事件传参)
文章目录1.自定义事件1.1 认识自定义事件1.2自定义事件的基本使用2.子组件触发父组件数据的改变3.子组件给父组件传参1.自定义事件1.1 认识自定义事件处理可以使用原生的 DOM 事件, v-on 也可以触发组件内部的自定义事件,调用 this.$emit("事件名") 就可以触发一个自定义事件.$emit() 触发事件函数接受一个自定义事件的事件名以及其他任何给事件函数传递的参数. 然后就可以在组件上使用 v-on 来绑定这个自定义事件this.emit("事件名",参数1,参数2....
2020-06-11 15:07:06
2639
原创 Vue 组件的双向数据绑定
我们之前已经有学过在普通的 DOM 元素上通过 v-model 指令来进行简单的双向数据绑定,一般我们会在表单元素上使用这个指令.通过下面的代码先复习一下 v-model 指令的基本用法: <div id="app"> <input type="text" v-model = "value"> {{value}} </div> <script> let vm = new Vue({
2020-06-11 09:13:01
279
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人