Vue从入门到精通（2）--第一阶段

第一阶段

html5、css3、ES5

响应式布局、Bootstrap

字体图标

相关教程

html5、css3、ES5

    H5新特性是必须要掌握的。如果你不需要自己绘图，则canvas等知识点了解即可。要做移动端，浏览器对css3几乎不存在兼容问题，各种流畅的动画效果会为手机端加分不少。移动端常用到的知识点包括：

    盒子模型：box-sizing样式；

    css选择器：属性选择器；

    css布局定位：flex

    css动画、过渡：transform、animation

    

    ES5：我并没有去详细的学习ES5的新特性，因为在实际工作中，经常会用到ES5的相关特性但并没有意识到这是ES3还是ES5的范畴。所以，我的建议是，遇到没见过的js语法，可百度现查现学之。有几个新特性还是比较常用的，如下：

Array对象

    判断方法：添加了静态方法Array.isArray(obj)用于判断obj是否为Array对象实例。

    索引方法：添加用于查找指定项索引的方法indexOf()和lastIndexOf()。内部使用全等（===）进行匹配。

    迭代方法：添加了every()、some()、forEach()、map()、filter()方法。

String对象

    trim()方法。
JSON对象

　　添加原生JSON内建对象。
　　

响应式布局、Bootstrap

　　响应式布局，概括来说就是页面中元素的布局、尺寸会随着浏览器窗口的大小而改变。html和css3提供了许多支持响应式布局的特性，上文中说到的flex布局、box-sizing盒子模型都是其中之一，但这还远远不够。

推荐教程《网页设计视频教程-响应式手机网站》，

http://pan.baidu.com/s/1nthBYT7 提取码： 5g1c

http://pan.baidu.com/share/init?shareid=2201138922&uk=354786297 提取码：q2mh

　　Bootstrap可以理解为是一套响应式布局的css库，默认只引用一个css文件即可。当然如果你需要用到它的一些控件样式，还需要引用一个js文件。教程的话，Bootstrap中文网中写的很详细了，这里不再赘述。其教程中也包含sass/less相关的内容，用不到的可以不看。

我咨询过很多做前端的朋友，做布局时，如果你有扎实的css布局基础，布局还是自己写的比较好。用第三方的难免会增加根据项目进行定制的苦恼。

字体图标

　　如果你的网站图标几乎都是扁平化的单色图标，则字体图标或许是更好的选择。有以下几个有点：

是矢量图标，跟文字一样不会因为尺寸的大小失真；

可像字体一样修改颜色；

体积小，一个字体图标文件在10k-30k之间，非常适合移动端；

网上有大连的免费资源，推荐 阿里iconfont http://www.iconfont.cn/plus

由于各浏览器对字体文件的支持不同，所以你的字体文件至少需要四个格式，如下：

@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1483761608434'); /* IE9*/
src: url('iconfont.eot?t=1483761608434#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff?t=1483761608434') format('woff'), /* chrome, firefox */
url('iconfont.ttf?t=1483761608434') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1483761608434#iconfont') format('svg'); /* iOS 4.1- */
}

　　不用担心太多，阿里iconfont商店的式的将需要的图标添加到购物车，之后一键导出后的压缩包里有这四个文件和示例代码。

注：

　　字体图标的编码使用NCR编码的16进制。如下：

　　.icon-ditu:before { content: “\e601”; }

　　有时，我们需要写成：“”。

　　你不需要了解NCR编码，网上相关资料也较少，只需知道在你的字体文件中，每一个（字符）图标都由一个唯一的NCR16进制码表示。

相关教程

ES5：

　　ECMAScript5.1中文版，该规范涵盖了所有ES5的特性，而非单列出了新特性，可作为规范参考书用。

H5、css3：

　　推荐“极客学院”中html5系列教程。这套视频教程部分需要认证，部分需要会员。认证免费，会员的部分也大多不是基础知识，不是必须看的内容。

　　另外，这套视频中的讲师本着“点到为止的精神”，各个知识点并没有详细介绍，想要了解更具体的内容看这位大神张鑫旭的博客。比如transform相关的知识点，我就看了如下两篇文章：

　　



　　Flex布局可参考阮一峰大神的Flex 布局教程：语法篇