浏览器渲染及动画
2019-09-14
阅读 1 分钟
1.2k浏览器渲染原理： 浏览器在渲染页面之前会先构建DOM树和CSSDOM树。 HTML会转换成文档对象模型DOM，CSS会转换成CSS对象模型CSSDOM。它们两个是互相独立的数据结构。 DOM和CSSDOM组合在一起形成渲染树。 遍历DOM树节点 对每个DOM节点用合适的CSSDOM规则去匹配 计算出最终布局，样式 最后将它们合并到一起，渲染在页面中 样...
JavaScript历史学习总结
2019-09-14
阅读 2 分钟
1.3kjavascript历史 1994年网景公司，发布了 Netscape 浏览器，因此急需一门脚本语言，使得网页可以和人互动。 1995年网景公司，录用的 Brendan Eich，让他担任这门语言的设计师。 公司要求这门语言必须看上去“与java足够相似”，但要比java简单，要让非专业的网页制作者也能很快的上手。 但 Brendan Eich 对java一点兴趣也没...
canvas入门——圆绘制
2019-09-08
阅读 1 分钟
1.5k前面两个参数是x坐标，y坐标，第三个参数是半径，第四个参数是开始的弧度，第五个参数是结束的弧度，第六个参数是顺时针还是逆时针，默认是顺时针。
canvas入门——用canvas制作倒计时项目总结
2019-09-08
阅读 5 分钟
1.4k项目演示 此项目是慕课网上的视频，这篇文章自己的学习总结。 点阵 在canvas中绘制数字，可以使用点阵的方式。 下面是5的点阵布局，1代表要绘制，0代表不要绘制。这里数字采用的是10 * 7的网格系统，冒号是10 * 4的网格系统。 {代码...} 有了这个这个网格的系统，我们就能将数字绘制出来了。 数字绘制 在canvas中如何用...
canvas入门——线段绘制
2019-09-08
阅读 3 分钟
2.5kmoveTo、lineTo 使用canvas绘制一条线段，默认已经拿到canvas的上下文context 绘制一条直线需要使用context提供的moveTo、lineTo方法 moveTo是线段的起点，lineTo是线段下一个点，最后使用stroke进行描边。如下代码 {代码...} 效果图： 如果一段线段分为多段，可以多次使用lineTo方法，将每个顶点都填进去就可以了 {代码...
【重学前端学习笔记】关于类型，有哪些你不知道的细节
2019-08-19
阅读 3 分钟
1k在学习《关于类型，有哪些你不知道的细节》一章节中，讲到了javascript内置了Symbol.toPrimitive属性，可自定义类型转换操作。
【重学前端专栏学习笔记】建立系统的知识架构体系
2019-08-15
阅读 2 分钟
1.3k建立知识架构很够就相当于把知识分类了，输入时有条理的存储，输出时能够快速找出对象的知识点。而追本溯源的学习方法特别适用于一些概念性的东西，可以追溯提出时的背景及之后的演变过程等。
命令行 tree、tldr 安装使用
2019-08-10
阅读 2 分钟
2.3k安装tree tree是一个能够列出递归目录的命令，以图形显示驱动或路径的文件夹结构，可以生成命令树，mac 上没有自带，需要手动安装 {代码...} 安装完tree命令后，找一个目录，尝试输入一下tree，就可以看到当前目录下的目录结构 tree -L 1 只显示一层目录 从上面命令我们可以知道，参数1的意思是一层目录，那么要看2层目...
在命令行中执行 ts
2019-04-08
阅读 4 分钟
14.2k配置 npm 淘宝源 {代码...} 如果后悔了，想撤销淘宝源就运行npm config delete registry 在命令行运行ts文件 首先需要安装ts，ts-node {代码...} 新建1.ts文件，写上这两句话 {代码...} 添加可执行权限（windows 用户可直接执行第 3 步） {代码...} 在命令行中执行1.ts文件 {代码...} 就可以看到终端中输出hello world ...
去哪儿网项目学习总结
2019-03-01
阅读 9 分钟
2.6k移动端浏览器click事件为什么会有300ms的延迟呢？因为在手机上有个双击方案 —— 在手机上快速点击两下，实现页面放大；再次双击，恢复到原始比例。
使用 webpack 构建应用
2019-03-01
阅读 5 分钟
1.6kentry：工程资源的入口，可以是单个文件，也可以是多个文件，通过每一个资源入口，webpack会一次去寻找它的依赖进行模块打包。我们可以把entry理解为整个依赖树的根，每个入口都将对应一个最终生成的打包结果。
初探 Vue 生命周期和钩子函数
2019-02-25
阅读 6 分钟
3.9k简单来说就是好像把人的出生到死亡分成一个个阶段，你取名字肯定是在你出生阶段，而不是在成年阶段；你结婚肯定是在成年阶段，而不是在出生阶段；如果说你在出生阶段想去阶段，那肯定是不行的。组件也是一样，在实例化的时特定阶段调用特定方法，调用的这个方法就是钩子函数。
Vue 中多个元素、组件的过渡，及列表过渡
2019-02-12
阅读 4 分钟
4.8k多个元素之间过渡动画效果 多元素之间如何实现过渡动画效果呢？看下面代码 {代码...} 这么写行不行呢？肯定是不行的，因为 Vue 在两个元素进行切换的时候，会尽量复用dom，就是因为这个原因，导致现在动画效果不会出现。 如果不让 Vue 复用dom的话，应该怎么做呢？只需要给这两个div不同的key值就行了 {代码...} 这个时...
Vue 中 JS 动画与 Velocity.js 的结合
2019-02-12
阅读 4 分钟
2.2k前面学习了用css实现动画效果，那 Vue 中能不能用js实现动画效果呢？ 其实 Vue 提供了很多动画钩子 enter 入场动画钩子函数有before-enter、enter、after-enter before-enter 动画出现前的事件 {代码...} enter before-enter事件结束后执行 {代码...} after-enter enter事件中done被调用后，after-enter事件会被触发 {代...
Vue 中 CSS 动画原理
2019-02-12
阅读 5 分钟
2.6k如果希望hello world有一个动画效果的话，需要在外面套一层transition标签，意思它包裹的内容，有一个动画效果，可以给它一个名字name="fade"。
Vue 动态组件与 v-once 指令
2019-02-11
阅读 2 分钟
3.6k{代码...} 上面代码需实现，当点击按钮时，child-one和child-two实现toggle效果，该怎么实现呢？ {代码...} 通过上面handleBtnClick函数的实现，配合v-if指令就能实现toggle效果 动态组件 下面这段代码实现的效果和上面是一样的。 {代码...} 动态组件的意思是它会根据is里面数据的变化，会自动的加载不同的组件 v-noce指...
Vue 中的作用域插槽
2019-02-11
阅读 2 分钟
5.4k上面代码，如果此时有个需：child组件在很多地方会被调用，我希望在不同的地方调用child的组件时，这个列表到底怎么循环，列表的样式不是child组件控制的，而是外部child模版站位符告诉我们组件的每一项该如何渲染，也就是说这里不用li标签，而是要用slot标签。
在 Vue 中是使用插槽
2019-02-11
阅读 2 分钟
2.4k属性传值 先写一段简单的代码 {代码...} 这种写法有两个问题： p标签外面会有一层div，这个div是无法去掉的，有人会想，能不能用template代替，其实是不可以的，在这里模版站位符是不能用的。 如果content传递的内容很多，代码就会变得很难阅读。 当我的子组件有一部分内容，是根据父组件传递过来的dom进行显示的话，这...
Vue 中非父子组件间的传值
2019-02-11
阅读 3 分钟
13.2kVue.prototype.bus = new Vue()这句话的意思是，在 Vue 的prototype挂载了一个bus属性，这个属性指向 Vue 的实例，只要我们之后调用 Vue 或者new Vue时，每个组件都会有一个bus属性，因为以后不管是 Vue 的属性还是 Vue 的实例，都是通过 Vue 来创建的，而我在 Vue 的prototype上挂载了一个bus的属性。
Vue 中给组件绑定原生事件
2019-02-11
阅读 1 分钟
9.9k当我给一个组件绑定一个事件的时候，实际上这个事件绑定的是自定义的事件，也就是你真正的鼠标点击触发的事件，并不是我绑定的click事件，如果想触发自定义的click事件，在子组件里对元素进行事件绑定，这个事件才是真正的原生事件。
Vue 组件参数校验与非props特性
2019-02-11
阅读 2 分钟
3k现在有这样一个需求，父组件调用子组件的时候，传递的这个content，我要做一些约束，要求它我传递过来的content必须是一个字符串，我们该怎么实现呢？
Vue 中父子组件数据传递
2019-02-11
阅读 3 分钟
3.8k组件中:counter=“1”获取到的是数字，counter=“1”获取到的是字符串，因为加了冒号后，后面值就是js表达式了，它就不是字符串了。它是一个js表达式，当然就是数字类型了。
Vue 中组件使用中的细节点
2019-02-11
阅读 3 分钟
3kis标签 如何使用is标签解决渲染中可能会出现的小bug {代码...} 正常渲染一个组件这样写没有啥问题，但是在table中会有点小bug，如下图 正常来说3个tr应该在tbody里面，而现在和table同级了，这是怎么回事呢？ 在html5规范中，tbody里面必须是tr标签，否则会出错。该怎么解决呢？看下面代码 {代码...} 这段代码是什么意思...
Vue 中的列表渲染
2019-02-11
阅读 4 分钟
5.2k上面是一个最基础的列表渲染，在实际开发中，还有很多细节点，为了提升循环的性能，会给循环项加一个唯一的key值。我们可以用index作为唯一的key值。
Vue 中的样式绑定
2019-02-11
阅读 3 分钟
3.4k现在有这样一个想法，div被点击一次，变成红色，当再次被点击时，恢复为默认的颜色， 再点击一次又变成红色，想实现这样的操作，如果凭借以前对 Vue 的了解，好像是没有办法实现的，因为我们很难想到数据如何和样式进行绑定，Vue 是面向数据的一种编程方式，它不在是直接操作dom的编程方式了，所以呢，我们希望某些数据...
Vue 中计算属性的 setter 和 getter
2019-02-11
阅读 1 分钟
8k计算属性其实是非常强大的，这一节深入的学习下计算属性，先看一段代码： {代码...} 插值表达式{{fullName}}首先回去data中去找fullName这个属性，找不到再去计算属性中去找，找到之后在将它显示在页面之中。 计算属性中的fullName我们换一种写法： {代码...} 当我去使用这个计算属性的时候，调用插值表达式，去读这个内...