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