- 博客(38)
- 收藏
- 关注
RSS订阅
原创 2020年写给自己的一封信
我是一个前端开发者,一个刚入行没多久的小菜鸟,说实话刚了解前端的时候,我第一感觉是很装逼,哈哈哈哈哈哈,当时虚荣感就上来了,就想学习,想去了解IT行业,慢慢的对它产生了兴趣,有一种求学的心态,我发誓,我这辈子从来没觉得自己会去学习,会去努力.当自己为了自己喜欢的某一件事情去拼搏,去努力的时候,心里特别的澎湃,我希望自己能不忘初心,想记住自己梦开始的感觉,希望自己越来越好,我今年23岁,如果说到现在...
2020-01-30 21:26:29
1369
原创 useEffect(fn, []) 不等于 componentDidMount()
使用 Hooks 模式进行编程时，我们需要忘记生命周期和时间线的概念，使用以状态为中心，以及对应状态发生变化时。那些副作用需要重新执行的思想来进行编码。
2022-08-24 15:15:42
1027
原创 dependencies和devDependencies的区别
在项目中安装css-unicode-loader修复线上环境icon乱码，直接yarnaddcss-unicode-loader，代码PR的时候被问为什么安装dependencies？**开发依赖**例如css-loader，webpack的loader文件，是在打包过程中使用，而不是项目中依赖的，所以上线以后不需要在下载依赖。例如elementUI，vantUI，这些UI库我们会在业务代码中引用，这个时候依赖需要安装在dependencies中。...
2022-08-01 14:13:58
450
原创 深拷贝和浅拷贝的区别?
区别深拷贝指向一个新的对象,指针指向的是一个新的内存浅拷贝指向的是同一个对象,指向指向的是同一个内存场景浅拷贝let obj = {a:1,b:2}let a = obja.a = 2//结果 obj中的值也会发生变化 {a:2,b:2}深拷贝let obj = {a:1,b:2}let a = JSON.parse(JSON.stringify(obj))a.a = 3console.log(obj) // {a:1,b:2} //没有发生改变 //备注: 对象转成字符串
2021-10-08 17:06:19
185
原创 JavaScript面向对象_封装
概念:面向对象编程就是将你的需求抽象成一个对象,然后针对这个对象分析其属性和方法,这个对象称之为类JavaScript是弱类型语言, 拥有封装,灵活的特点通过this添加的属性方法和prototype添加属性方法有什么区别? 通过this添加的属性和方法是在当前对象上添加的, 然而,javascript是一种基于原型(prototype)的语言,所以每次创建一个对象时, 他都有一个原型prototype用于指向其继承的属性,方法, 通过prototype继承的方法不是对象自身的,所以在使用的
2021-08-25 17:26:37
115
原创 Vue配置动态路由传参,以及接收的2种方法
路由的配置 { //路由的配置 接收一个属性名为id的变量 path: '/about/:id', name: 'About', component: () => import('../views/About.vue'), props:true }接收参数第一种 : $route.params ... <div> {{$route.params.id}} </div> 第二种 : props接收 ... <
2021-07-18 11:55:34
586
原创 vue中禁止f12 右键 选择
created(){ this.$nextTick(() => { // 禁用右键 document.oncontextmenu = new Function('event.returnValue=false') // 禁用选择 document.onselectstart = new Function('event.returnValue=false') //禁止f12 document.οnkeydοwn = new Fun
2021-03-21 21:19:08
1023
4
原创 弹性盒设置width失效
应用场景:在弹性盒布局的结构下,做超出部分元素滚动,需要设置display: flex;flex-wrap: nowrap; 子元素的width属性会失效,解决方案:需要用flex 指定写法 : flex: 0 0 50px;
2021-03-10 17:49:31
882
1
原创 以淡然心过生活
人是不能太闲的，闲久了，努力一下就以为在拼命。过度考虑别人的感受，是一种对自己的不认同。总是活在别人眼神里的人，也等于从来不曾存在过。你再优秀也会有人对你不屑一顾，你再不堪也会有人把你视若生命。人生的需求如同吃饭，只能吃两碗的饭量，如果贪图饭菜的香味多吃两碗，不但不能正常享受多吃的好处，相反倒会因为胃承受不了而带来痛苦。不能爱得太满，不然时间久了稍微有点力不从心会视为你不上心，把你的付出当成理所当然，从而把你变成工具，人也往往对最容易得到的最不屑一顾，不加珍惜。一旦失去了再也回不到从前，再也无法享受到待遇
2020-12-15 15:50:03
197
1
原创 this.$nextTick()
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。如果你在created()操作DOM节点是获取不到的,所以使用要使用nextTick,等DOM节点更新结束后,再执行纯纯的表层知识~勿喷...
2020-11-20 10:32:01
79
原创 atndv Table 动态表头动态数据,动态合并单元格
1.合并的数据格式长什么样子? // 后台返回的数据格式 , 栗子3级数据 , colunm1 , colunm2 , colunm3 是跟表头dataIndex对应的 dataSoucre:[ { colunm1:'1', colunm2:'', colunm3:'', level:0, children:[ { colunm1:'', colunm2:'1-1', colunm3:'', level:1, c
2020-10-19 11:43:39
249
转载 a++ 和 ++a 的区别
1.a++ 和 ++a 的区别：（1）a++ ：存储新值，用旧值（上一个值）来计算，也就是输出旧值；（2）++a ：存储新值，用新值（当前的值）来计算，也就是输出新值；2.实例：(1)var a = 0;console.log(a++) //输出0// 1 存储新值// 0 用旧值计算（输出）(2)var a = 0;console.log(++a); //输出1// 1
2020-09-28 17:02:24
1351
原创 vue 热加载 加快项目编译速度
babel-plugin-dynamic-import-node 解决:vue整体项目太大,每次修改编译速度太慢 step1: 下载插件 (推荐用yarn) yarn add babel-plugin-dynamic-import-nodestep2: 修改 babel.config.js文件 module.exports = { presets: [ '@vue/app' ], env: { development: {
2020-09-21 11:03:39
2045
3
原创 vue实现移动弹出框
<template> <div> <div> <a-button type="primary" @click="showModal">Open Modal</a-button> <a-modal v-model="visible" title="Basic Modal" @ok="handleOk"> <p>Some contents...</p>
2020-09-11 15:22:04
960
原创 css 瀑布流
FlexBox版本瀑布流给你们展示一下我超强的画工,跟你们表达一下瀑布流的布局如果你不懂Flex布局,那就直接copy代码, 简单粗暴 <div class="IndexBox"> <div class="itemBox"> <div class="item"> <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=163808881,411637235
2020-09-04 14:52:52
69
转载 ios 苹果不兼容overflow:scroll
场景下拉加载的过程是懒加载,父元素的容器是动态高度而不是固定的,需求是要求手机1屏展示,也就是说,父元素的高度是固定的.超出部分滚动bug 原理:bug原理,点击进入代码这个-135px 因为我们需要是1屏高度减去导航栏的高度剩余高度就是父元素的固定高度解决让存放list的元素最小高度大于父元素高度 +1，然后给父元素添加 -webkit-overflow-scrolling: touch;属性，这样可以令一开始的时候就添加一个scrollView...
2020-08-21 09:35:56
934
转载 {__ob__: Observer}怎么拿值？
vue编码中经常出现获取到的数据是：{ob: Observer} 格式的，详细如下解决方法如下：将返回的数据data先转换为JSON字符串形式，然后再从字符串形式转换成JSON格式JSON.parse(JSON.stringify(data))
2020-08-18 17:31:51
4347
2
转载 日期格式化 方法 yyyy-MM-dd hh:mm:ss
dateFormat:function(time) { let date=new Date(time); let year=date.getFullYear(); /* 在日期格式中，月份是从0开始的，因此要加0 * 使用三元表达式在小于10的前面加0，以达到格式统一 如 09:11:05 * */ let month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()
2020-07-22 09:24:31
794
原创 Vue 动态组件的理解
什么是动态组件让多个组件使用同一个挂载点，并动态切换，这就是动态组件<template> <div> <div>动态渲染组件</div> <div> //component标签就是挂载点, :is=绑定的组件名字 <component :is="currentComponent"></component> </div> <button
2020-07-21 15:29:30
459
原创 vue v-model v-on v-bind 的区别
作用 v-model : 使用在表单控件中,创建数据双向绑定//在输入框中<input v-model = 'value' />data(){ return{ value:'' }} v-bind : 1.动态的绑定数据或者属性 2.给组件传值//如果current 等于 0 绑定 active 不等于 绑定 ''//:class 等于 v-bind:class<p :class="current == 0 ? 'active': '' "><p
2020-05-24 12:57:36
661
原创 vue2.0 v-for 和 v-if 为什么不能同时使用?
因为v-for指令的优先级高于v-if当它们处于同一节点。v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中一般v-if 用在父元素 嵌套子元素渲染
2020-05-17 14:59:25
1208
原创 vue 2.0 使用$refs出现undefined
这是官网给出的定义,必须组件渲染完成后才生效像一些弹出框调用组件,点击的时候组件没有加载完,所以用this.$refs 调用不到,解决方法在methods中，使用 this.$nextTick(() => {}) 等页面渲染好再调用...
2020-05-11 13:47:22
389
原创 input 输入框 限制2位小数
<input type="number" @keydown="InoutChange" v-model="绑定的变量">methods:{ InoutChange(e){ //正则过滤2位 e.target.value = (e.target.value.match(/^\d*(\.?\d{0,1})/g)[0]) || null }}...
2020-05-08 11:09:46
737
原创 vue 底部footer导航组件
底部导航一定要用路径!!! 贼TM关键 举个例子: 你随便定义了一个变量 flag : 0, 跳转首页, falg:1,跳转我的 底部导航的组件不可能全项目使用, 点击我的 这个时候flag 已经变成了1, 从我的进入详情页,从详情页返回的时候,虽然路由没有变,但是flag 已经初始化成了0, 我们的判断条件没办法自定义,每次从详情页返回的时候都会被初始化, 所以我们要用路径判断!!!...
2020-04-21 10:06:55
2525
1
原创 vue 实现二级菜单拖动穿梭框
项目需求：1. 需要拖拽效果。2. 把A菜单的子菜单拖动到B菜单项目难点：把A菜单下的子菜单拖动到B菜单，如何判断插入的节点！问题解析：1.拖动效果 ： 在h5 中drag Api要让一个元素有支持拖拽，需要在标签上做一个标识。 <div draggable="true"></div>元素在拖放过程中触发的事件1. dragstart：事件主体...
2020-03-13 18:18:55
1074
原创 H5 Api scrollIntoView()方法
Element.scrollIntoView() 在vue项目过程中,我写过一个滚动导航,用的是a标签锚点跳转, 点击的时候,url地址会发生改变,那么路由返回上一级就会报错, 这个时候我查到了h5中的scrollIntoView()语法element.scrollIntoView(alignToTop,scrollIntoViewOptions)说明alignToTop:可选Bo...
2020-01-16 09:37:33
661
原创 html2canvas+canvas2image 做vue移动端页面海报
做了3天左右,海报的效果终于实现了,我只想说太坑了...................... 首页介绍2个插件 1 html2canvas 是把DOM结构生成canvas 2 canvas2image 是把canvas生成图片 //原生canvas.toDataUrl()安装yarn add html2canvasyarn add canvas2image注意canvas...
2020-01-14 15:15:42
1131
原创 vue生成二维码的插件以及华为手机长按不保存的问题
介绍二个比较简单的生成二维码的插件1.QRcode 2.vue-qr其实这俩款插件 唯一的区别的就是vue-qr可以在二维码中间加一个logQRcode(使用过)安装:(yarn/npm)yarn add qrcodejs2npm install qrcodejs2在需要的组件内引用import QRCode from 'qrcodejs2' <div class="qr...
2020-01-13 15:15:08
591
转载 带有示例的高级TypeScript类型
Advanced TypeScript Types with ExamplesImprove your understanding of TypeScript and learn these提高你对TypeScript的理解,学习这些advanced techniques to help you master the language and utilize高级技术来帮助你掌握语言和使用T...
2019-12-11 18:01:28
743
原创 几个比较简单又重要的表
Boolean:数据类型转换为true转换为falseBooleantruefalsestring任何非空字符串‘’(空字符串)Number任何非零的数字值(包括无穷大)0和NaNObject任何对象null操作符:2个等于号判断的是值3个等于号判断的是类型表达式值null == undefinedtrue...
2019-12-06 18:55:43
84
原创 判断变量类型是不是数组
普通函数写法用ES5的方法: 1.利用Array原型上的isArray()方法,是数组放回true,不是返回false function fn1(obj){ if(Array.isArray(obj)){ //原型方法调用 原型.方法 Array.isArray() console.log('Array') }else{ console.log(`Not is Arr...
2019-12-06 14:12:02
476
原创 高级JS不知道的冷知识----逗号操作符
逗号操作符必须有(),括号内用逗号分隔var a = (1,2,3)//会输出3//解析: 逗号操作符 会把()里 最右边的输出或者赋值 var c = ( function a(){}, function b(){} )() //解析: 会把后面的b函数赋值给c...
2019-12-06 13:51:48
130
原创 TypeScript基础
什么是TypeScript?TypeScript 是 JavaScript 的超集;通俗点也可以理解成TypeScript是JavaScript的扩展语法TypeScript 生于JavaScript 忠于JavaScript就像Sass Less 一样; 虽然用Sass Less 的语法但是最终会编译成css,TypeScript 也一样,虽然用的是TypeScript进行编写,最后...
2019-12-05 19:15:21
175
原创 JavaScript----面向对象的个人理解
JavaScript的 编程思想 1.面向过程(pop) -----> 按照步骤一步一步进行 2.面向对象(oop)------> 以对象功能来划分 面向对象的特性 1.封装线 ---> 代码封装 直接使用 2.继承性 ---> 继承父类方法 3.多态性--->不同的环境展示不同的状态 优缺点 面向过程 : ...
2019-12-03 18:42:24
192
原创 高级JS不知道的冷知识----script标签
script 标签1.首先了解HTML的结构,分为head 和 body 标签,我们可以理解成html是从上往下加载的2.js 分为内部js 和外部js外部引入的js文件一般放到head 部分 在页面加载之前引入js文件,保证当前页面可以正常调用,内部js一般会放到body的下面为什么本地的js脚步会放到body下面?1.页面加载js脚本时,会阻塞页面其他资源的加载,如果把本地的js...
2019-12-01 16:03:18
329
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人