【学好】前端新人如何能把框架学好？

这个问题是咱们学习群里的同学问我的，

就是说，基本的js、html、css都ok啦，但前端框架要怎么学习会进度比较快呢？比较笼统的回答当然是要多写多看多练。但是，怎么样做会进度快一点呢？这其中应该也会有一些规律和窍门吧。确实是有一些规律，但也不能说是窍门，因为学习是很难取巧的事情，讲究的是一分耕耘一分收获。

<!-- -->

首先要明白，即：JavaScript不管它变成什么样子，它依然是JavaScript，依然是解释型的脚本语言，依然是事件驱动，依然是从上到下的一行行的运行。

任何一个前端框架，都是对于JavaScript的再封装，目的是提高效率，简化操作。无论这个框架搞了多么奇怪的自有的语法、它内在的运行规律，都是JavaScript，这就是说，你的JavaScript的核心概念要清晰，否则你在学习框架的时候，会遇到“不知为什么会这样”的问题。

就例如，ES6，很多同学担心学不会ES6，其实你ES5搞定的话，ES6你就会发现，它不过是ES5的优化加糖而已，本质上并没有变化。（依然是脚本，依然没有类，依然没有继承。所谓的extends无非是prototype的变形、所谓的Promise无非是把嵌套拉直为一串.then、所谓的generator、yield无非是函数分段执行...）

<!-- -->

WEB前端框架，无论是react还是vue，它们的目的都是收集页面的数据，然后传递给后端，再从后端获得数据，显示在页面上。无论它们的思想是什么双向绑定，还是数据驱动视图，或是其它什么思想，都是为了达成这个目的。

那么第一个阶段，就是要熟悉它们的基本的API操作。我在web前端零基础课之中，也是这么样的顺序来讲解框架，先讲一个思想，再通过一些例子来学习基本的api、命令、语法。然后看它们的数据、值是如何的传递，最后再形成一个整体的项目。

如果是自学前端的话，无论什么样的框架，一定要先看搞清它的基本的api，这个阶段你找任何人东问西问，那都没有用，必须自己多看api。

第二个阶段，就是找到它的“核心”。刚才叫你看api了，但你不要拿着api文档就从第一个开始一直往下看。而是要以框架的“核心”为圆心，通过一些小例子，先掌握一些常用方法，再向外辐射着的去学习、去看。

<!-- -->

例如，我已经掌握一些html、css、js了。那么，VueJs，我会怎么学？

首先肯定是看看这是个什么东西。上网查，喔，这是一个MVVM的框架，讲究的双向绑定，组件化开发，等等。也就是说，vueJs的页面都是用它的组件搭建出来的，在vue这里没有真正的静态页面。

那么我第一步就是，“先在页面上，使用vueJs显示个什么东西出来”，例如一行字。那我怎么显示呢？“字”是什么？其实是数据。那就变成了，怎么把数据显示在页面上。

再查，喔，vue使用 {{}} 这种插值的语法，

再查，它的数据放在哪呢？喔，是放在vue的实例里，

new Vue({

el:'#xxid',

data:{

msg : 'xx 123'

}

});

那么，就是在 div标签里写，{{msg}}，搞定了，文字显示出来了。这时，再回头看看api，关于data这块的说明是什么样的内容，...

<!-- -->

刚才说了，vue什么的，它里面其实都是js，那么js是事件触发的。那我也给vue添加个事件吧，就是点某个按钮，输出个文字什么，..

查，文档里应该有事件的说明，喔，是v-指令，怎么用？

v-on:click="xxbtn";

这个xxbtn是个函数，写哪呢？喔，在Vue的实例的methods里，

new Vue({

el:'#xxid',

data:{

msg : 'xx 123'

},

methods:{

xxbtn(){//...}

}

});

就这么一步一步的往下走着学，...几个例子做起来，vue的基本操作也就ok了。

学会了基本的v-指令之后，再看VueJs的组件，全局和局部。这些基础的都ok之后，就用node安装一个vue-cli，在 .vue 文件里，把之前的东西再写几遍，基本上vue的常用操作就掌握了。

<!-- -->

上面学vue这段是说你如何去熟悉它，但本文的标题是说，“如何学好前端框架”？

那就需要你从三个方面来理解、看待前端框架：

1、从JavaScript的层面 。这是所有前端框架的底层；

2、从业务、需求的层面。为什么有了jQuery之后，又有了reactjs？为什么再之后又有了VueJs？是因为react、vue的思想比jq更先进；

3、从前端框架本身的属性来看，“它”是工具，不是技术。不是学会了前端框架，就是学会了前端开发。

只有从这三点出发，才能去把前端框架给学好。