- 博客(23)
- 收藏
- 关注
RSS订阅原创 Vue | 生命周期与生命周期钩子函数
说到Vue.js的生命周期，总会给出官网的如下视图： 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。比如 created 钩子可以用来在一个实例被创建之后执行代码：new Vue({ dat...
2019-04-28 21:58:05
168
原创 CSS-Learning | 块级格式化上下文BFC的原理、生成方法和应用
块级格式化上下文Block formatting context (简称BFC），其中formatting context是指页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。除了BFC还有，inline formatting context（简称IFC）。BFC是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的B...
2019-04-26 22:20:03
378
原创 JS-Learning | 手动实现new
JavaScript使用new时，函数调用会变成“构造函数调用”，new会劫持所有普通函数并用构造对象的形式来调用它。在调用 new 的过程中会发生下面四件事情：新生成了一个对象链接到原型绑定 this返回新对象接下来，我们来实现一下newfunction _new() { // 创建一个空的对象 let obj = new Object() // 获得...
2019-04-23 09:55:45
197
原创 CSS-Learning | 纯CSS画三角形
使用CSS画三角形有很多方法，以下将介绍两种常见的方法：使用边框法和使用CSS渐变。使用边框首先，我们创建一个带边框的div.triangle { border-width: 30px; height: 40px; width: 40px; border-color: red green blue brown; border-style: solid;}<div cl...
2019-04-22 13:44:39
159
原创 JS-Learning | for in和for of的区别
遍历数组遍历数组我们常用for循环，ES5中新增了forEach、every、filter、map、some、reduce和reduceRight等具有遍历数组功能的方法。使用foreach遍历数组的话，使用break不能中断循环，使用return也不能返回到外层函数。还可以使用for in来遍历数组，但是会出现一些我们不希望的场景。for in遍历遍历数组使用for in遍历数组时，...
2019-04-22 12:27:00
162
原创 JS-Learning | 手写实现call、apply和bind以及理解它们的区别
call、apply和bind的区别call、apply和bind的作用都是改变this的指向。其中，call和apply的区别在于传参的方式不同。call是一个一个的传，apply可以将参数以数组的形式传进去。call 接收多个参数，第一个为函数上下文也就是this，后边参数为函数本身的参数。apply接收两个参数，第一个参数为函数上下文this，第二个参数为函数参数，通过一个数组的形式传...
2019-04-21 17:07:01
679
原创 JS-Learning | 如何使属性或者对象不能被改变？
希望属性或者对象不可改变，可以使用以下方法实现：1.对象常量结合writable: false和configurable: false就可以创建一个真正的常量属性（不可修改、重定义或者删除）：var myObject = {};Object.defineProperty( myObject, "FAVORITE_NUMBER", { value: 23, writable: fa...
2019-04-17 20:07:55
922
原创 JS-Learning | 对象属性描述符writable、enumerable和configurable
属性是指一些存储在特定命名位置的（任意类型的）值。在ES5之前，JavaScript语言本身并没有提供可以直接检测属性特性的方法，比如判断属性是否是只读。但在ES5开始，所有的属性都具备了属性描述符。属性描述符普通的对象属性对应的属性描述符含有：writable（可写）、enumerable（可枚举）和configurable（可配置）。var myObject = { a: 2}...
2019-04-17 19:39:28
1382
1
原创 CSS-Learning | 使用border-radius创建圆形和胶囊形状（长圆形）
boder-radius属性使用border-radius属性来设置圆角半径时可以使用长度值，或者百分比值。在给它指定百分比值时，x轴和y轴分别相对于元素的宽度和高度来计算实际值。所以，我们可以把一个正方形的元素变成圆形，只要把圆角半径设置成**至少50%**就好。如果两个弧线相交，那么两个轴向就会分别缩小半径，直到圆弧不再相交。可以像以下代码中所示，画出圆形和椭圆形。<div ...
2019-04-17 14:18:05
5175
原创 CSS-Learning | 边框border和border-radius属性设置边框半径：圆角
边框元素的边框 (border) 是围绕元素内容和内边距的一条或多条线，每个边框有 3 个方面：宽度、样式，以及颜色。可以使用border-width一次性设置所有边框的宽度，也可以使用border-top-width这样的方位属性设置某条边框的宽度。使用border-color设置所有边框的颜色，也可以使用border-left-color这样的方位属性设置某条边框的颜色。边框的样式可...
2019-04-17 13:47:24
3231
原创 CSS-Learning | background-image属性如何设置背景图片以及相关背景图片语法
背景图片设置背景图片只需设置background-image属性，接受url()函数式表示法，可以使用相对路径，如url(img/cat.jpg)。浏览器此时会在保存当前样式表的目录的img子目标中寻找图片。如果路径以一个斜杠开头，如/img/cat.jpg，则浏览器会在相对于CSS文件所在域的顶级目录的img子目录中寻找图片。这里也可以使用绝对路径，把协议、域名、路径和文件名都写全。除了...
2019-04-17 13:02:24
2116
原创 CSS-Learning | background-color属性如何设置背景颜色以及选取颜色值、透明度方法
背景颜色CSS中设置背景颜色，可以通过两个属性：background-color属性和background属性。// background-color属性body { background-color: #bada55;}// background属性body { background: #bada55;}background是一个简写属性，通过它可以一次性设置与背景相...
2019-04-16 13:20:31
8602
原创 JS-Learning | this机制与判断this是如何绑定的？
this机制是JavaScript非常重要的机制之一，了解this并运用它对一个JavaScript开发者很重要，让我们一起来领略一下this的魅力。为什么要用this首先我们先看一个例子：function identify() { return this.name.toUpperCase();}function speak () { var greeting = "Hello, I...
2019-04-15 21:24:10
141
原创 CSS-Learning | CSS中的网页排版技术与文本属性设置
一个简单的文档页面包括几个标题和一些段落，怎么排版才能提升页面可读性，并且美观呢？这里，介绍一些网页排版属性基本排版技术文本颜色浏览器默认会把绝大多数文本渲染成黑色（链接的颜色是“活力蓝”），白底黑字的对比度极高，但容易形成过分强调。通过color属性，我们可以把正文改成深蓝灰色，链接也调整一下。p { color: #3b4348;}a { color: #235ea7;}...
2019-04-15 15:47:34
324
原创 CSS-Learning | CSS中的定位模型：绝对定位、相对定位、固定定位和浮动（如何清除浮动）
定位模型CSS中有几种不同的定位模型，包括浮动、绝对定位、相对定位和固定定位。除非特别指定，否则所有元素盒子都会在常规文档流中生成，即positioin属性的默认值为static。常规文档流中元素盒子的位置，由元素在HTML中的位置决定。确定元素的包含块至关重要，定位模型不同，计算width、height、margin或padding值为百分比时，计算依据会发生变化。接下来，我们来看看不同定位...
2019-04-14 19:40:04
1834
原创 CSS-Learning | 外边距折叠机制与解决方案
外边距折叠什么是外边距折叠？简单来说，就是垂直方向上的两个外边距相遇时，会折叠成一个外边距。折叠后外边距的高度等于两者中较大的那一个高度。可能出现外边距折叠的情况当两个元素垂直堆叠时，上方元素的下外边距会与下方元素的上外边距相折叠。 折叠前、后当一个元素嵌套着另一个元素的情况下，假设没有内边距或边框来分隔外边距，它们的上、下外边距也会折叠。 折叠前、后...
2019-04-14 18:30:30
267
原创 CSS-Learning | CSS盒模型，块级元素和行内元素
盒模型盒模型是CSS的核心概念，描述了元素如何显示，以及元素之间如何相互作用、相互影响。页面中的所有元素都被看作一个矩形盒子，这个盒子包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。如下图所示： 盒模型内边距： 内容区周围的空间。给元素应用的背景会作用于元素内容和内边距。边框： 在内边距外侧增加一条框线，这条框线可以是实线、虚...
2019-04-14 15:12:04
777
原创 CSS-Learning | HTML文档应用CSS样式的方法
HTML中使用CSS我们写好的CSS样式怎么应用到HTML文档中呢？以下罗列了几种方法：1.把样式放在style元素中，直接放到head部分如果样式不多，又希望能立刻应用它们，可以使用这种方法。<style> body { font-family: Avenir Next, SegeoUI, sans-serif; color: grey; }</sty...
2019-04-13 22:47:34
192
原创 CSS-Learning | CSS加载中如何提升web性能
web性能度量web性能的一个重要指标就是页面内容实际显示在屏幕上需要多少时间。这个指标也叫“渲染时间”。现代浏览器在屏幕上渲染内容前，至少需要HTML和CSS。所以尽快下载HTML和全部CSS极其重要。首先，先了解一下，在HTML文档中应用CSS样式的几种方式接下来这里罗列了能提升web性能的几项要点：1.减少HTTP请求在链接外部样式表时，保证链接文件数量最少至关重要。因为每个文件...
2019-04-13 22:46:14
135
原创 CSS-Learning | CSS选择符的层叠机制、继承机制与选择符的特殊性
CSS的层叠机制由于稍微复杂的样式表可能会存在两条甚至多条规则同时选择一个元素的情况，CSS通过一种叫做层叠机制来处理这种冲突。层叠机制的原理就是为规则赋予不同的重要程度，重要性级别从高到低如下所示：标注为！important的用户样式；标注为！important的作者样式；作者样式；用户样式；浏览器（或用户代码）的默认样式；在此基础上，规则再按【选择符的特殊性】排序。特殊性高...
2019-04-13 21:54:10
144
原创 CSS-Learning | CSS选择符的分类与使用
CSS选择符基本选择符基本选择符包括：类型选择符、后代选择符、ID选择符以及类选择符。类型选择符（元素选择符）：用于选择特定类型的元素，比如段落，只要写出需要添加样式的元素名即可。p { color: black;}后代选择符：用于选择某个或某组元素的后代。（写法：在两个选择符中间添加空格）以下例子中，只有作为块引用后代的段落元素会被选中，从而缩进。blockquote ...
2019-04-13 20:55:37
779
原创 Easy Mock平台的使用
Easy MockEasy Mock 是一个可视化，并且能快速生成模拟数据的服务。 Easy Mock 内置了 Mock.js，让我们可以更愉快的伪造数据了。 Easy Mock 的使用打开 Easy Mock 官网，进行登录（未注册可以直接注册并登录），登录后【我的项目】》【个人项目】 点击页面右下角的“➕按钮”，创建一个项目。 进入以下页面后，就填写相关信息，如下图...
2019-04-12 20:29:54
1139
原创 Mac系统中，通过GitHub Desktop来操作GitHub
GItHub作为开源代码库以及版本控制系统，Github拥有超过900万开发者用户。随着越来越多的应用程序转移到了云上，Github已经成为了管理软件开发以及发现已有代码的首选方法。很多公司都使用github来进行版本控制，所以面试中总会涉及git命令的使用。一般开发人员会通过命令行界面来操作和使用GitHub的，这里我来介绍一个更简单的操作工具：GitHub Desktop（具有图形用户界面...
2019-04-05 13:46:31
544
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人