Vue父组件数据更新子组件相关内容未改变（watch解决）
## vue父组件数据更新子组件相关内容未改变父组件在父组件中，根据后台给的数据（数组），v-for生成子组件
123456<div class="exist"> <existProject :itemprop="item" v-for="(item, index) in getData" :key="index" :index="index" @click="sendIdTogetData(index)" v-show="true"></existProject> </div>
子组件（existProject）
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585 ...
关于Element+ui，多选框组无法选中问题
遇到一个问题，在使用element ui的多选框组件el-checkbox-group和el-checkbox的时候出现了无法选中选项的事情
1234<el-checkbox-group v-model="checkList" :min="less" :max="most"> <el-checkbox v-for="(item,index) in listDate.options" :key="index" :label="item"> </el-checkbox></el-checkbox-group>
其中，listDate是通过父组件传递过来的值，因为我要实现的是可以控制多选框组最多和最少的选项，按照el-checkbox-group要求，checkList是数组，如果不绑定min和max是可以选中的，但是反正就会出现复选框选不中的情况。
查看别人的资料和官 ...
前端Canvas绘制多啦a梦
最近学了canvas，写个小实例来巩固一下知识点上一下效果图：运用到的函数（具体使用方法可以自行搜索相关文档）
moveTo()
lineTo()
arc()
quadraticCurveTo()
bezierCurveTo()
beginPath()
fillStyle
stroke()
fill()
代码内容：1.绘画头部先利用arc()，画出外部的圆，再利用二次贝塞尔曲线画出面部轮廓效果图：（白色多出的部分没关系，因为还要画项圈）代码：
123456789101112131415161718cxt.beginPath();//起始路径 cxt.lineWidth = 1;//线宽度为1 cxt.strokeStyle = '#000';//笔触的颜色 cxt.arc(200,200,140,Math.PI*0.3,Math.PI*0.7,1); cxt.fillStyle = '#0bb0da'; cxt.fill(); cxt.stroke(); cxt.beginPath ...
性能优化：细说浏览器渲染的重排与重绘
前端性能优化：细说浏览器渲染的重排与重绘前端性能优化因为涉及到计算机网络、数据算法、图形图像处理、浏览器渲染等多方面计算机知识，常作为前端工程师乐此不疲的技术讨论话题，也正因如此，它也是面试时容易被问及的面试题之一。
缘起
本篇文章缘起一次偶然的面试问答所引申出的思考整理，着笔于浏览器渲染的角度，探讨前端性能优化的思路和实践建议，当然，浏览器渲染是一个复杂的过程，本文笔者将围绕重排和重绘两个关键词开始行文。
目录结构
文章大致行文思路如下：
URL从输入到页面展示的过程
DOM和JavaScript的关系
为什么操作DOM会很“慢”
浏览器解析HTML的过程
重排
重绘
优化方案
URL从输入到页面展示的过程
在探讨浏览器解析html之前，先了解url从输入到最后页面渲染的过程是一个很有必要的步骤，它可以帮助我们把握整体流程，让我们在了解HTML解析细节之前知道它处于整个请求周期中的哪一阶段，这对我们构建完善知识图谱很有帮助。
首先，我们假设输入的url的请求为最简单的Http请求，以GET请求为例，大致分以下几个步骤：
用户在浏览器的地址栏输入访问的URL地址。浏览器会先根 ...
批改网修改禁止粘贴到可粘贴
方法一：
打开一篇禁止粘贴的作文 2.打开f12控制台，点击这个小按钮（我这是Google浏览器）3.把鼠标放到这个输入作文的框上，旁边的element或对应到这个textarea文本域4.右键点击这个标签，选Edit as HTML5.在两个标签内放入作文即可方法二：1.还是上面步骤一到步骤三，找到<textarea></textarea>这个标签，看它的id号，这里的id是contents2.在console控制台输入3.就可以复制粘贴了
有关原型的一些方法
整理一下有关原型或者原型链上常出的一些方法
1. istancenofa instanceof b用来判断a的原型链上是否有b的存在
1234567891011121314// instanceoffunction Father(){ this.sayFather = 'i am father'}function Son(){ this.saySon = 'i am son'};Son.prototype = new Father();var son = new Son();console.log(son instanceof Son) // trueconsole.log(son instanceof Father) // trueconsole.log(son instanceof Number) // falseconsole.log(son instanceof Object) // trueconsole.log(Father instanceof Object) // true
2 ...
浏览器存储
浏览器存储在开发过程中，有些数据我们需要多次用到，但是如果每一次需要就去和服务器请求，那么无疑会造成一定的资源浪费，所以我们可以根据业务需求，把一些数据在浏览器中存储起来，目前最常见的存储方案是：
Cookie
web存储(localStorage和sessionStorage)
IndexedDB
Cookie背景因为HTTP协议是无状态的，即服务器不知道用户上一次做了什么，这严重阻碍了交互式Web应用程序的实现。在典型的网上购物场景中，用户浏览了几个页面，买了一盒饼干和两瓶饮料。最后结帐时，由于HTTP的无状态性，不通过额外的手段，服务器并不知道用户到底买了什么，所以Cookie就是用来绕开HTTP的无状态性的“额外手段”之一。服务器可以设置或读取Cookies中包含信息，借此维护用户跟服务器会话中的状态。
Cookie的又称是HTTP Cookie，最初是在客户端用于存储会话信息，从底层来看，它作为HTTP协议的一种扩展实现，Cookie数据会自动在web浏览器和web服务器之间传输，因此在服务器端脚本就可以读写存储的cookie的值，因此Cookie通常用于存储一些通用 ...
浏览器控制台输出图片
浏览器控制台输出图片在浏览b站的时候打开浏览器控制台会出现b站的logo，其实他是通过一下函数玩转了ASSII-Aar ，后续有了解到可以在某些网站上可以将英文转化为ASSII-Aar
但是最近我发现了西瓜影视输出的是一张图片
其实他是输出了一张网络图片（居然还可以这样玩）
出于好奇我也想试一下
输出图片尝试在控制台输出我最爱的哆啦A梦
使用网络图片地址
1console.log("%c ", "background:url(https://inews.gtimg.com/newsapp_bt/0/11616110357/641) no-repeat ;line-height:600px;font-size:600px")
使用base64（base64代码比较大，不美观，而且打包体积会变大）
12console.log("%c ", "font-size:1200px;line-height:600px;background:url(data:image/jpg;base64,UklGRvo2AA ...
纯前端微信小程序实战
## 纯前端微信小程序实战最近在学习微信小程序开发，记录一下我的第一次纯前端小程序开发（无后台操作），也可以分享给还未开发过微信小程序，想找一个微信小程序的项目练习的朋友们，附上github地址：github地址https://github.com/Larmyliu/wechat_program一、先建立一个微信小程序项目要先在微信开放平台注册，拿到AppID，不拿AppID也可以开发小程序，但是有很多接口无法调用二、下载微信开发者工具三、在项目中新建小程序项目这里我就遇到了一个坑，在勾选的时候勾选了云开发，结果在里面一脸懵逼，没有后台经验的朋友不需要勾选
四、敲代码，调api
项目描述：1.是对ofo自行车的小程序模拟开发2.对页面进行简单的逻辑处理（主要还是查找微信官方api）注意：因为里面有一个要获取单车的密码和车牌号，所以前端可以直接mock假数据，通过链接访问假数据的地址，我是在eolinker上创建的假数据同时也要在微信开放平台中添加服务器域名，添加上后要在微信开发者工具内更新配置总结：具体的代码内容可以上github上下载clone，微信其实把很多组件都已经封装好了，而 ...
答辩整理
答辩整理魔方是如何建模的
这里主要使用到是three.js技术，第一步是画外形，虽然外观上看上去是一个大的正方体，但其实是做了26个小正方体拼接而成，期间会记录给一个小正方体的坐标位置，最后加上黑色边框，在浏览器上渲染出来。第二步是操控魔方视角，虽然说魔方已经在浏览器渲染出来了，但是因为无法操控空间视角，只能看到魔方的某一个面，这时候要加上three.js提供的视角控制库，我这里用的是轨道空间库，完成视角空间库的初始化，就可以观察到魔方的每一个面，整体就会出现一个3D的效果。最后一步就是监听鼠标事件，达到转动魔方的效果。
转动魔方是如何实现的
首先确定触摸点，通过监听鼠标事件操作就可以获得一个平面2D的XY坐标，然后就是通过一个平面2D坐标映射成为3D坐标的问题，这时需要引用three.js提供的Raycaster，原理就是在点击的位置和相机的位置发送一条射线，被这根射线射中的物体都被记录下来，这样就可以知道在三维空间中鼠标移过了什么物体。接下来确定转动方向，根据xyz正负轴分为六个方向，根据滑动的两点确定转动向量，然后判断转动向量和这六个方向向量夹角最小的方向即为转动方向，之后根据 ...