- 博客(46)
- 收藏
- 关注
RSS订阅原创 react state 深层对象嵌套渲染undefined
最近刚开始写公司react的项目，简单的一些原理运用都已经掌握的七七八八，然后遇到了如题的一个东西。从后台接了一个数据大概类型是这样json:{a:{b:{}},a2}就是对象套对象套对象...的这种，然后把这个值setstate，在render调用的时候出现了问题<p>{json.a.b}<p/> <p>{json.a2}<p/>...
2018-12-19 17:31:47
3040
3
原创 Vue.js2.x源码初步阅览
此篇文章记录自己在看Vue.js源码分析书籍时候的一些点。1.Vue本质上还是一个function，在prototype上挂在了许多扩展的方法 注：为什么不用class而是用function? 因为在prototype上扩展方法的时候，可以在多个模块中分别维护，而class则是在一个模块中实现所有，实现多个模块维护并不方便。2.new Vue之后的流程 进行一系列初...
2018-11-23 15:23:04
210
原创 iframe踩坑
公司需求做一个左右分栏的页面，因为项目比较大，所以左侧页面需要用iframe链接另外一个服务器的地址，因而本次记录一下使用过程中的问题1.跨域 两个项目是挂在两个服务器上的，所以父子组件不能用dom直接拿， 所以使用以下的两个方法 子iframe：function receiveMessage(event) {event.source.postMessage("成功获取直...
2018-11-07 17:39:25
1049
原创 docker 连接宿主Mysql
今天公司项目要配置docker,顺利在windows上装完了之后，发现连接不上本地的mysql，一直报权限问题或者地址错误的问题最后发现1：地址按照下面这个ipv4来2：要在宿主Mysql将localhost权限打开，命令如下mysql -u root -pvmwaremysql>use mysql;mysql>update user set host = ...
2018-10-23 16:40:48
8605
1
原创 vue $set的使用
记一次坑今天公司遇到这么一个需求：一个表单，嵌套三层数组，分为章、节、段，（然后发现ele-table也不好使了）当我在获取后端数据之后，动态给 “段”这个数组里面的某个对象新增属性或者改变属性的时候，绑定在视图上的值是不能双向绑定的。所以一开始的设想觉着可能是类似于深拷贝的那种，vue不能实现深层属性监听，然后就在一直找原因。后来才发现，api漏看了一个比较重要的方法 $set...
2018-10-16 17:48:40
1709
原创 input color 类型使用记录
公司提了做一个调色板更换背景的需求，然后就找到了input 将type设置为color就可以正常调出颜色选择器了但是需要注意的是onchange事件，网上很多教程和博主都写的是直接绑定事件document.qs('#onchange').onchange(()=>{alert(this.value)})然后这样是拿不到的，要在中间加一次点击事件才可以documen...
2018-10-11 14:35:53
1563
原创 sftp的使用
最近公司有个前后端没分离的项目，所以不能在本地调试，只能替换线上测试环境的版本，测试线上的效果。这个时候想到的就是，怎么用本地文件即使替换线上文件。之前在sublime上用过类似的ftp插件，这次试用的是vscode的sftp 简单介绍：安装了之后，调出命令作配置文件，会在开发根目录自动生成sftp.json的配置文件目前我用到的就是如下的一些参数。{"protocol...
2018-09-28 14:09:14
2216
原创 vue-cli3.0的使用踩坑记录
又有一段时间没写过博客了。上家公司做了一个多月，没学到什么东西。跳槽了之后，因为自研项目原本是做的多页vue项目，每次都要单独引进，所以从锻炼经验以及完成任务的角度开始了重构。之前用的是vue-cli2.x的版本，现在使用vue-cli3.0进行搭建。项目结构安装什么的都不想说，只记录有问题的部分。1.vue.config.js3.0没有了相关的config.js，所以需要自己...
2018-09-12 14:04:24
8512
原创 js的对象和java的类的简单区别
记一个面试题。如题java是面向对象的，也就是有继承，封装，多态。js是基于对象的，也就是说没有上述三点。js的继承等是通过原型链或其他方法进行实现的，es6的class本质上还是对象，和java等的class还是不同的。java的类是不可以直接运行的。js的对象是可以直接调用运行的。这也就是基于对象的特点。先写到这。 ...
2018-08-03 10:05:59
3404
原创 Vue slot简单实用
一直看到文档有slot插槽，简单看看文档然后用一下，不用了之后又忘了。现在稍微记一下。1.<slot></slot>匿名插槽，这不知道咋回事我显示不出来。2.<div slot="test"> 具名插槽。给父组件调用的时候给要插入的标签上挂个slot值，子组件slot标签name挂个值对应一下就好了。 <p>这里是父组件调用<...
2018-08-03 09:48:06
284
原创 扑克牌数组问题
最近一大段时间都没写过代码，一直在忙学校的事情。然后前几天接了个电面的题目：给一个字符串数组，代表扑克牌，['1H', '2S', '3D', '4C', …]每个字符串有两个字符，第一个代表数字, 1->1, 2->2, … 9->9, T->10, J -> J, Q -> Q, K -> K第二个代表花色 H->Heart, S->Spa...
2018-06-30 17:11:22
1685
原创 vue-cli跨域相关
这几天用跨域的时候遇到一个问题，断开前端启的端口服务的时候，vscode提示npm需要更新版本从5.6.0-5.7.* 然后就用了npm i npm更新，更新完了之后发现 proxyTable中 使用localhost:8080=>8088的跨域无法使用了，本地的都跨域不了尝试了回退版本以及其他方法都没有办法，最后把localhost换成了 本地Ip 成功了。暂时没有考证这个...
2018-03-20 14:56:45
224
原创 git 权限的问题
这两天遇到git push推不上去的问题然后查了一下，这里记录一下。git remote rm origingit remote add origin git@github.com:yourname/projectname.git这里就相当于重置一下地址。然后是秘钥ssh-keys的问题，因为我没设置。所以，ssh-keyen -t rsa -C "youremail"这样就设置出来了，在C盘 基...
2018-03-04 16:21:14
3142
原创 关于深拷贝和浅拷贝
不好意思的是，这个问题是我在看面试题的时候看到的，并不是在开发过程中专门去看的，我觉得我遇到过但是当时肯定就找别的处理方式盖过去了。在这里记下来是为了以后要记住这个问题当拷贝一个对象的时候，如果浅拷贝的话，简单类型会开辟新地址，而复杂类型的话会直接指向原地址。 如果深拷贝的话，那么都会开辟新地址。但是深拷贝因为一般是递归，性能会有...
2018-02-08 11:12:56
155
原创 target currentTarget 的区别
关于事件冒泡遇到了 event这里就不上代码简单的记一下，很好理解target直接就是哪个元素被点击了就是哪个currentTarget就是给哪个元素绑定的事件，指向的就是哪个 等于当前作用域下的thise.target 指向触发事件监听的对象。e.currentTarget 指向添加监听事件的对象。这块主要用在事件冒泡上...
2018-02-08 11:04:01
411
原创 BFC的理解
今天看面试题的时候遇到了这个问题，原来一直知道有这个东西，但是实际没自己看过。首先我关心到的问题是边距塌陷当两个DIV在同一个BFC块内的时候，如果设置两个元素的margin 或者padding都为100那么原本两个元素的边距应该是200，实际却是100，这是一种规范不是BUG同时还有这个遮盖问题当父元素DIV内的子元素设置为浮动，子元素会覆盖在父元素上，如果想不覆盖，可以
2018-02-07 20:49:44
213
原创 关于onbeforeunload这个方法
想做一个关闭或者刷新浏览器提交vuex里面内容的一个功能然后查了一下页面关闭或者刷新监听的事件页面加载onload页面刷新页面关闭 unload（）页面刷新或者关闭之前 onbeforeunloadwindow.onbeforeunload=function(){ console.log('ssssssssssssssssssssssssss
2018-02-03 19:41:01
1660
原创 ES6 find 和 filter 的区别
遇到个功能是要分类就想说在前端过滤，不要从查数据库的时候过滤了。然后就想说除了filter还有啥好用的发现有个find，测试一番之后发现const list = [{'name':'1',index:1},{'name':'2'},{'name':'1'}]let list2 = list.find(i=>i.name==='1') let list3 = list.filter(
2018-02-03 17:08:12
30483
4
原创 Vue 的 select 选择框的双向绑定
今天遇到要用select来进行切换页面内容的功能然后发现 在select 框上直接绑 v model 是不行的后来查了一下selectv-model="selValue">option:value="list.text"v-for="(list,index)in selList":key="index">{{list.text}}option>sel
2018-02-03 17:01:40
13309
3
原创 ES6中 map遇到的问题
今天在做一个时间处理的时候用到了foreach ,然后就想说能不能用map来遍历 然后发现了这么个东西很多介绍map的教程是这么说的const integers = [1, 2, 3, 4, 6, 7];const twoXIntegers = integers.map(i => i*2);// twoXIntegers are now [2, 4, 6, 8, 12, 14]/
2018-02-02 21:32:23
1865
原创 阻止事件冒泡的问题
今天遇到了一个div的重叠点击的问题类似于这样 如果想在click2点击的时候不触发click1 那么就必须阻止其事件的冒泡注：具体会在以后用高三进行补充原生是使用addEventListener监听的(event)参数的stopPropagation方法在vue中则使用$event 或者 直接使用 @click.stop 直接阻止
2018-02-02 16:06:02
179
转载 将字符串的首位换成大写其余小写。
转载自http://blog.youkuaiyun.com/nazhidao/article/details/51379401
2017-11-23 11:25:39
1053
原创 查找字符串中最长的单词
一、reduce function findlongest(str){let arr=str.split(" ")//切割成数组,注意中间有个空格var longest=arr.reduce((first,next)=>next.length>first.length?first:next)return longest.length]二、sort funct
2017-11-23 11:12:47
960
原创 简单的饼状图
var canvas=document.querySelector('canvas');canvas.width=600;canvas.height = 700;canvas.style.border = '1px solid #000';var ctx=canvas.getContext('2d');var data=[{"value":.4,"color":
2017-08-17 09:06:15
182
原创 简单的进度条
@keyframes move{0%{background-position: 0 0 ;}100%{background-position: 40px 0;}}.progress{width: 500px;height: 40px;margin: 100px auto;background-color: white;border-radius:
2017-08-16 09:44:21
329
原创 常用样式
text-shadow:1px 1px 1px #000 水平偏移量 垂直偏移量 模糊度 颜色 box-shadow:box-shadow: 20px 20px 10px #ccc, 50px 60px 80px red; 同上 inset是内嵌边 box-sizing:content-box,border-box 计算盒子大小的方式发生变化 ba
2017-08-16 09:01:16
127
原创 选择器
1.属性选择器div[type]表示存在 attr 属性即可div[type=input]表示属性值type===inputdiv[type*=i]表示属性里包含 i 字符在任意位置div[type^=i]表示 i 在开始位置div[type$=i]表示 i 在结束位置 2.伪类选择器 div:first-child 第一个子元素即 li div:last
2017-08-15 21:09:04
261
原创 简单的右侧缩略栏风铃效果
$(function(){var timer=null;$('.box').hover(function(){clearTimeout(timer);timer=setTimeout(function(){$('.box').find('a').each(function(index, el) {setTimeout(function(){$(el).stop().an
2017-08-14 21:36:39
217
原创 简单的左右轮播图
$(function(){var sx=0;var timer=null;//底部按钮切换$('.all ol li').hover(function(event) {var index= $(this).index();$(this).addClass('current').siblings().removeClass();$('.all ul').stop().an
2017-08-14 09:35:34
278
原创 简单的上下焦点图
$(function(){$('.all ol li').click(function(event) {$(this).addClass('current').siblings().removeClass();var index = $(this).index();$('.all ul').stop().animate({top:index*-170}, 500);nu
2017-08-14 09:00:09
388
原创 简单的滚动切换
$(function(){var colors=['pink','green','purple','orange','blue'];$("ul li").each(function(index,element){$(element).css('background',colors[index]);});$('ol li').click(function(event) {$(
2017-08-14 08:46:22
247
转载 简单的旋转木马轮播
window.onload=function(){var arrow=document.getElementById("arrow");var wrap=document.getElementById("wrap");var slide=document.getElementById("slide");var lis=slide.children[0].children;var
2017-08-13 20:10:58
1150
原创 兼容性获取样式+缓慢停止的运动
var btn = document.getElementById("btn");var box =document.getElementById("box");btn.onclick=function(){move(box,{width:100,height:600,left:600},function(){move(box,{top:30,lef
2017-08-13 18:16:49
204
原创 兼容性可视屏幕宽高
function client(){if (window.innerWidth!=null ){return{width:window.innerWidth,height:window.innerHeight}}else if (document.compatMode==="CSS1Compat") {return{width:document.documentEl
2017-08-13 17:58:42
245
原创 一个简单的放大镜
var box=document.getElementById("box");var sm=box.children[0];var lg=box.children[1];var mask=sm.children[1];sm.onmouseover=function(){mask.style.display = 'block';lg.style.display = "bloc
2017-08-12 21:17:42
260
原创 简单的鼠标单机跟随
var img=document.getElementById("img");var timer=null;var leaderx=0;var leadery=0;var targetx=0;var targety=0;document.onclick=function(event){var event=event||window.event;var pagex=e
2017-08-12 20:38:06
266
原创 简单的屏幕滚动切换效果
var ul=document.getElementsByTagName("ul")[0];var li1=ul.getElementsByTagName("li");var ol=document.getElementsByTagName("ol")[0];var li2=ol.getElementsByTagName("li");var timer=null;var lea
2017-08-12 18:44:39
1196
原创 获取兼容性的滚动scrollTOP-LEFT值
function scrollTo(){if (window.pageYOffset!=null) {return {left:window.pageXOffset,top:window.pageYOffset}}else if (document.compatMode==="CSS1Compat") {return {left:document.documentE
2017-08-12 18:27:34
309
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人