刚刚看到了一个up主分享的零基础前端路线,感觉深有体会且受到了启发,准备根据这个路线查漏补缺,记录分享一下~
一、HTML
div、label、span、b、p、ul、ol、li、dl、dt、dd、i、em、h1、h2、h3、input,掌握这些基本的标签。
二、CSS
1.语法:
1、. 操作符 ,使用class引用
2、#操作符,使用id引用
2.基本概念:
1、层叠式是什么意思?
2、CSS盒模型
3、CSS定位
4、CSS文档流的概念
5、CSS的四种定位
6、CSS优先级
3.实例:
各种购物网站(京东,淘宝)的静态页面(做一到两个即可)
三、JS
1.语法:
1、var创建变量
2、function,函数的基本使用
3、fun(xx),函数的调用和传参
4、this是什么
5、for循环
6、[ ],{ },数组和对象
7、for in 循环,键值对操作
8、document是什么
9、操作dom:creatElement,appendChild,innerHTML,setAttribute(n,m)
2.事件
onclick
3.实例:
1、轮播图
2、静态留言板
3、带了菜单的横向导航条,二维数组
这一阶段不用做太多原生JS的实例,目的是写熟练,不要出现拼写错误,理解基本开发的业务逻辑和需求分析。
四、Node.JS
1.nodeJs是什么?安装node成功
2.npm、node命令的基本使用
3.安装:vue-cli,保证成功并运行
至于其它的,事件、回调、buffer、stream、模块、路由、file、get/post、Express等等,先放一边。这一阶段要解决的,就是保证成功安装 VueJs。
五、Vue.JS
1.vue-cli,安装成功、并运行成功
2.vue模板语法,
{ {msg}} ,之类的
3.vue常用指令:v-html,v-show,v-if,v-blind(:),v-onclick(@click),v-model,v-for
4.vue组件
5.vue路由
实例:
1、轮播图
2、静态留言板
3、带了菜单的横向导航条,二维数组
把之前用原生Js写过的例子,再用vue写一遍。因为之前写过,所以业务逻辑都是一样的。
目的是为了掌握与熟练使用vue,实现开发需求、并理清vue实现业务逻辑的思路
六、深入Node.JS
1.get、post请求
2.express 或 koa2,响应get请求
3.axios异步
4.目的是写自己的接口可以自己测试,响应get、post请求,变身为全栈开发
自学到这一步,相应的知识点、结构就已经有了。接下来要向纵深发展。
七、ES6
只做一件事,把上面的实例、demo,都有es6重新实现一遍。
目的是掌握es6的使用。
八、相关理论(进阶)
1.单例、工厂、观察者、OO等设计模式
2.http、tcp/ip协议
3.原型链、构造器、继承
4.模块化、公共、私有方法
5.数据结构、常用算法
6.浏览器渲染原理与机制
7. JavaScript性能与优化,移动端适配方案
8.html5、css3、前端工程化相关知识