总评

这是一本让你思维得到拓展的一本书，配合经典的法院判例，生动的诠释了枯燥难懂的经济学词汇，能够培养自己的经济学思维，让你变得更理性，值得一读。

四大基本约束

1. 东西不够
2. 生命有限
3. 互相依赖
4. 需要协调

稀缺，为何商业是最大的慈善

真实世界 | 经济学的视角

战俘营里的经济学

战俘营是一个微型社会，有人的地方就有交易

1. 货币： 香烟， 劣币驱逐良币
2. 价格与价格波动： 面包的价格会随发放面包的时间波动
3. 通胀与紧缩： 营房周围发生爆炸，差点没命，今朝有酒今朝醉， 都抽起了香烟，导致通货紧缩。听说红十字会送一批香烟过来，物品价格大涨，但是之后被证实为谣言，导致泡沫被戳破，价格大幅回落。

结论：经济规律在哪里都起作用

服务端渲染

优势

1. 有利于SEO
2. 首屏加载时间减少

劣势

1. 开发 客户端代码不能用在服务端
2. 需要一个服务端环境，耗费更多的服务器资源

引言

项目中，使用

1
2
3
4

div:first-child // 父元素的第一个div元素
div:first-of-type // 父元素下的div元素中的第一个
div:last-child
div:last-of-type

四个伪类，选出第一个或最后一个元素，并赋予相应的样式。

但是遇到了一个问题，就是如果对一个class类使用伪类，会发生意想不到的效果。因为这些伪类的作用对象是元素(tag)而不是类(class)，所以如果相同的类却有不同的元素类型，会发生不同的效果。

总评

身处这个迷茫，诱惑重重的时代，听着”平凡才是真“的“箴言”，很多青年错把平庸当作平凡，殊不知那些历经精彩的人生，回首往事时去谈平凡才有意味，譬如杨慎的《临江仙》，“滚滚长江东逝水，浪花淘尽英雄。是非成败转头空。青山依旧在，几度夕阳红。白发渔樵江渚上，惯看秋月春风。一壶浊酒喜相逢。古今多少事，都付笑谈中”。杨慎，金科状元，明朝三大才子之手，时正任翰林院修撰的杨慎，因“大礼议”受廷杖，削夺官爵，定罪为谪戍终老于云南永昌卫。而你又知道古今多少事？所以骚年，不要为赋新词强说愁，你需要的是把握当下，勇往直前，思考的是做好当下的每一件事，并做到知行合一，走向成功。

无意中在雪球上看到了关于这本书的几篇文章，当时就决定好好看下这本书。看完之后颇有感慨，一些人生道理是我们没有真正知道的，所以更谈不上知行合一，以此记录下来一些总结和感悟，以备查阅。

书籍总结

第1封 好的起点并不决定好的终点

试想，我们这个世界如同一座高山，当你的父母生活在山巅时，你注定不会生活在山脚下；当你的父母生活在山脚下时，注定你不会生活在山巅。在多数情况下，父母所处的位置决定了孩子的人生起点。

但这并不意味着，起点不同，其人生结果也不同。世界上永远没有贫、富世袭之说，也永远没有成、败世袭之说，有的只是奋斗与成功的真理。我坚信，我们的命运由我们的行动决定，而并非完全由我们的出身决定。

第2封 运气靠策划

运气是策划的残余物质

通过了解自己的目标，了解自己的实力和资源创造运气

webpack + vue + vue-router学习笔记

安装webpack

1
2

npm init
npm i -D webpack webpack-cli

建立代码目录

使用webpack

终端

1
2
3
4

# {extry file}出填写入口文件的路径，本文中就是上述main.js的路径，
# {destination for bundled file}处填写打包文件的存放路径
# 填写路径的时候不用添加{}
webpack {entry file} -o {destination for bundled file}

1. 命令：webpack app/main.js public/bundle.js
2. 出错及更正：ERROR in multi ./hello.js bundle.js Module not found: Error: Can't resolve 'bundle.js，更正：webpack版本过高,原来的命令已经不适用了，更换打包命令：webpack app/main.js -o public/bundle.js

12.5更新

拖拽

前端经常使用拖拽进行图片上传，那么拖拽是如何实现的呢？
使用拖拽基本过程如下：首先定义哪些元素是可拖动的，在鼠标左键点击一个可拖动元素进行拖拽；拖拽元素进行移动，拖拽元素的位置发生改变，可以通过绝对定位实现；鼠标释放拖拽元素。

HTML5实现

拖拽删除元素实例

1
2

<div id="main">垃圾桶</div>
<div id="test-drag" draggable="true">拖拽元素区域:拖拽到垃圾桶中删除</div>

Javascript代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

var dragElement = document.getElementById("test-drag");
var targetElement = document.getElementById("main");

//拖动对象操作
dragElement.ondragstart = function (event) {
    console.log("开始拖拽");
    event.dataTransfer.setData("deleteDiv", this.id);

};
dragElement.ondrag = function () {
    console.log("拖动中");
};
dragElement.ondragend = function () {
    console.log("拖动结束");
};


//目标对象操作
targetElement.ondragenter = function () {
    console.log("拖拽对象进入");
};
targetElement.ondragleave = function () {
    console.log("拖拽对象离开");
};

targetElement.ondragover = function (event) {
    console.log("拖拽对象在目标对象上");
    event.preventDefault(); //必须阻止默认事件，否则无法触发ondrop
};

targetElement.ondrop = function (event) {
    console.log("拖拽对象松手释放在目标对象上");
    var deleteDivId = event.dataTransfer.getData("deleteDiv"); //得到数据--id值  
    var deleteDiv = document.getElementById(deleteDivId); //根据id值找到相关的元素  
    deleteDiv.parentNode.removeChild(deleteDiv); //从父元素中删除子节点  
};

44年前我们把人送上月球，但在CSS中我们仍然不能很好实现垂直居中——@James Anderson

让一个元素水平居中对于CSS来说非常简单：如果是一个内联元素，我们可以在他的父元素上设置text-align:center;，如果是一个块元素，我们可以使用margin:auto;。然而，只要一想到让一个元素垂直居中，让人死的心都有了。

多年来，垂直居中已成为CSS的不朽神话，也是前端专业人士群体中的一个内部笑话。原因是：

• 经常需要使用
• 理论上看上去非常简单
• 过去实战中要实现是极其困难，特别是元素大小固定时

选择器是匹配元素的一种模式，不只是在CSS中，JavaScript对CSS的选择器也是支持的，比如document.querySelector( )和document.querySelectorAll( )。

选择器类型

基本选择器

• 通配符选择器( * )
• id选择器( \#ID )
• 类选择器( .className )
• 元素选择器( E )
• 后代选择器( E F )
• 子元素选择器( E>F )
• 相邻兄弟元素选择器( E + F )
• 群组选择器( selector1,selector2,...,selectorN )

参见那些年我们一起清除过的浮动

浮动

文档流: 文档流是文档中可显示对象在排列时所占用的位置。
浮动的定义: 使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。

浮动的实际用途，可设置文字环绕或使元素宽度由内容填充（类似inline-block)。使用浮动需要注意的是如果浮动的元素高度比父级容器还高，那么需要设置父级容器的overflow属性为auto,使其自动撑满。

HTTP 首部字段

HTTP 首部字段作用

起传递重要信息的作用。
使用首部字段是为了给浏览器和服务器提供报文主体大小、所使用的语言、认证信息等内容。

HTTP 首部字段结构

HTTP首部字段是由首部字段名和字段值构成的，中间用冒号:分隔。