0%

vim 手册

vimtutor

插入模式下

ctrl+h 删除上一个字符

ctrl+w 删除上一个单词

​ctrl+u 删除当前行

非插入模式下

代码之间跳转

调回之前的代码

Mac 下

control + '-'

容器的属性

flex-direction 属性

规定灵活项目的方向

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;
| value | description |
|:—–|:—–|
|row |默认值。灵活的项目将水平显示,正如一个行一样。 |
row-reverse |与 row 相同,但是以相反的顺序。
column |灵活的项目将垂直显示,正如一个列一样。
column-reverse |与 column 相同,但是以相反的顺序。

flex-wrap 属性

规定flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

flex-flow 属性

是 flex-direction 和 flex-wrap 属性的复合属性。默认值为row nowrap。

flex-flow: flex-direction flex-wrap|initial|inherit;

justify-content

justify-content属性定义了项目在主轴上的对齐方式。

justify-content: flex-start | flex-end | center | space-between | space-around;

align-items

定义项目在交叉轴上如何对齐。

align-items: flex-start | flex-end | center | baseline | stretch;

align-content

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

项目的属性

order

定义项目的排列顺序。数值越小,排列越靠前,默认为0。

flex-grow 属性

用于设置或检索弹性盒子的扩展比率。

flex-grow: number|initial|inherit;

flex-shrink 属性

指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。

flex-shrink: number|initial|inherit;

flex-basis 属性

用于设置或检索弹性盒伸缩基准值

flex

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

兰亭集序

【作者】王羲之 【朝代】魏晋

永和九年,岁在癸丑,暮春之初,会于会稽山阴之兰亭,修禊事也。群贤毕至,少长咸集。此地有崇山峻岭,茂林修竹,又有清流激湍,映带左右,引以为流觞曲水,列坐其次。虽无丝竹管弦之盛,一觞一咏,亦足以畅叙幽情。

是日也,天朗气清,惠风和畅。仰观宇宙之大,俯察品类之盛,所以游目骋怀,足以极视听之娱,信可乐也。

夫人之相与,俯仰一世。或取诸怀抱,悟言一室之内;或因寄所托,放浪形骸之外。虽趣舍万殊,静躁不同,当其欣于所遇,暂得于己,快然自足,不知老之将至;及其所之既倦,情随事迁,感慨系之矣。向之所欣,俯仰之间,已为陈迹,犹不能不以之兴怀,况修短随化,终期于尽!古人云:“死生亦大矣。”岂不痛哉!

每览昔人兴感之由,若合一契,未尝不临文嗟悼,不能喻之于怀。固知一死生为虚诞,齐彭殇为妄作。后之视今,亦犹今之视昔,悲夫!故列叙时人,录其所述,虽世殊事异,所以兴怀,其致一也。后之览者,亦将有感于斯文。

译文

永和九年,时在癸丑之年,三月上旬,我们会集在会稽郡山阴城的兰亭,为了做禊事。众多贤才都汇聚到这里,年龄大的小的都聚集在这里。兰亭这个地方有高峻的山峰,茂盛的树林,高高的竹子。又有清澈湍急的溪流,辉映环绕在亭子的四周,我们引溪水作为流觞的曲水,排列坐在曲水旁边,虽然没有演奏音乐的盛况,但喝点酒,作点诗,也足够来畅快叙述幽深内藏的感情了。这一天,天气晴朗,和风温暖,仰首观览到宇宙的浩大,俯看观察大地上众多的万物,用来舒展眼力,开阔胸怀,足够来极尽视听的欢娱,实在很快乐。人与人相互交往,很快便度过一生。有的人从自己的情趣思想中取出一些东西,在室内(跟朋友)面对面地交谈;有的人通过寄情于自己精神情怀所寄托的事物,在形体之外,不受任何约束地放纵地生活。虽然各有各的爱好,安静与躁动各不相同,但当他们对所接触的事物感到高兴时,一时感到自得,感到高兴和满足,竟然不知道衰老将要到来。等到对得到或喜爱的东西已经厌倦,感情随着事物的变化而变化,感慨随之产生。过去所喜欢的东西,转瞬间,已经成为旧迹,尚且不能不因为它引发心中的感触,况且寿命长短,听凭造化,最后归结于消灭。古人说:“死生毕竟是件大事啊。”怎么能不让人悲痛呢?每当看到前人所发感慨的原因,其缘由像一张符契那样相和,总难免要在读前人文章时叹息哀伤,不能明白于心。本来知道把生死等同的说法是不真实的,把长寿和短命等同起来的说法是妄造的。后人看待今人,也就像今人看待前人,可悲呀。所以一个一个记下当时与会的人,录下他们所作的诗篇。纵使时代变了,事情不同了,但触发人们情怀的原因,他们的思想情趣是一样的。后世的读者,也将对这次集会的诗文有所感慨。

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

animation-name

指定要绑定到选择器的关键帧的名称

animation-duration

动画指定需要多少秒或毫秒完成

animation-timing-function

设置动画将如何完成一个周期

animation-delay

设置动画在启动前的延迟间隔。

animation-iteration-count

定义动画的播放次数。
| value | description |
| —- | —- |
|n| 一个数字,定义应该播放多少次动画 |
|infinite| 指定动画应该播放无限次(永远)|

animation-direction

指定是否应该轮流反向播放动画。

animation-fill-mode

规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。

animation-play-state

指定动画是否正在运行或已暂停。

@keyframes

1
2
3
4
5
6
7
8
9
10
11
12
13
@keyframes name
{
from {background: red;}
to {background: yellow;}
}

@keyframes name
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

设置环境变量

export http_proxy=http://127.0.0.1:8123/

export PATH=$PATH:<PATH 1>:<PATH 2>:<PATH 3>

等号前后不能有空格
用冒号分隔

删除环境变量

unset http_proxy

查看环境变量

echo $PATH

env

连接

默认端口 27017

1
mongo

指定端口 27027

1
mongo --port 27027

连接远程主机上的 MongoDB 实例

1
2
3
4
5
6
mongo "mongodb://mongodb0.example.com:28015"

mongo --host mongodb0.example.com:28015

mongo --host mongodb0.example.com --port 28015

退出

1
quit()

切换数据库

1
use <database>

列出数据库

show dbs

列出数据表

show tables

查询数据

db..find()

new Vue 都发生了什么

new vue => init => $mount => compile => render => vnode => patch => DOM

响应式原理

依赖收集

依赖触发

nextTick

如何实现

1
Object.defineProperty()

Virtural Dom

编译原理