原文链接：https://blog.csdn.net/liang377122210/article/details/71545459
————————————————
最近在逛各大网站、论坛，以及像SegmentFault等编程问答社区，创造Vue.js非常火爆，重复性的提问和内容大概多，楼主自己也趁着这个大前真个热潮，动手学习了一段韶光的Vue.js，目前用它正在做自己的卒业项目。
在做的过程中也对Vue.js的官方文档以及其各种特性有了许多认识。作为一个之前以PHP+模版引擎为主的开拓，从一个从未打仗过除HTML+CSS+JavaScript+JQuery以外的前端技能的人到现在可以独立利用Vue.js以及各种附属的UI库来开拓项目，我总结了一些知识和履历想与大家分享。
下面我就以问答的形式来分享吧。这里假设你仅仅只节制了HTML+CSS+JavaScript，如果你对JQuery这个前端库，以及各种后端模版措辞比如说PHP，JSP还有所理解并且利用过的话那就太好了。
1、Vue.js是什么？
这是官网的先容，是不是以为非常的抽象非常的官方？看完之后可能还是有很多人不是很懂这个框架到底是用来做什么的，什么是“渐进式框架”？什么是“自底向上增量开拓”？什么是“视图层”？什么是“单文件组件”？什么是“繁芜的单页运用？”第二段话里面“相应的数据绑定和组合的视图组件”这又是个啥？还有末了一段话，“Vue.js 与其它库/框架的差异”究竟是什么？
不要担心，如果你逐步看完这里面的所有问答，一定会对前面那些可能你从未听说过的专业术语有一种恍然大悟的觉得。
2、Vue.js到底是什么？
想必现在能看到我这篇文章的人，都是用着APP或者网页版知乎在阅读把。Vue.js便是一个用于搭建类似于网页版知乎这种表单项繁多，且内容须要根据用户的操作进行修正的网页版运用。
3.单页运用程序（SPA）
顾名思义，单页运用一样平常指的便是一个页面便是运用，当然也可以是一个子运用，比如说知乎的一个页面就可以视为一个子运用。单页运用程序中一样平常交互处理非常多，而且页面中的内容须要根据用户的操作动态变革。
4.你前面说的网页版知乎我也可以用JQuery写啊，为什么要用Vue.js呢？
讲到JQuery，就不得不说到JavaScript的DOM操作了。如果你用JQuery来开拓一个知乎，那么你就须要用JQuery中的各种DOM操作方法去操作HTML的DOM构造了。
现在我们把一个网页运用抽象一下，那么HTML中的DOM实在便是视图，一个网页便是通过DOM的组合与嵌套，形成了最基本的视图构造，再通过CSS的润色，在基本的视图构造上“扮装”让他们看起来更加都雅。末了涉及到交互部分，就须要用到JavaScript来接管用户的交互要求，并且通过事宜机制来响运用户的交互操作，并且在事宜的处理函数中进行各种数据的修正，比如说修正某个DOM中的innerHTML或者innerText部分。
我们把HTML中的DOM就可以与其他的部分独立开来划分出一个层次，这个层次就叫做视图层。
Vue 的核心库只关注视图层。
我们为什么要把视图层抽取出来并且单独去关注它呢？
由于在像知乎这种页面元素非常多，构造很弘大的网页中，数据和视图如果全部殽杂在一起，像传统开拓一样全部稠浊在HTML中，那么要对它们进行处理会十分的费劲，并且如果个中有几个构造之间存在藕断丝连的关系，那么会导致代码上涌现更大的问题，这什么问题呢？
你是否还记得你当初写JQuery的时候，有写过$('#xxx').parent().parent().parent()这种代码呢？当你第一次写的时候，你以为页面元素不多，不便是找这个元素的爸爸的爸爸的爸爸吗，我大不了在注释里面写清楚这个元素的爸爸的爸爸的爸爸不就好了。但是万一过几天之后你的项目组长或者你的产品经理溘然对你做的网页提出修正哀求，这个修正哀求将会影响页面的构造，也便是DOM的关联与嵌套层次要发生改变，那么$('#xxx').parent().parent().parent()可能就会变成$('#xxx').parent().parent().parent().parent().parent()了。
这还不算什么，等往后产品迭代越来越快，修正越来越多，而且页面中类似的关联和嵌套DOM元素不止一个，那么修正起来将非常费劲。而且JQuery选择器查找页面元素以及DOM操作本身也是有性能丢失的，可能到时候打开这个页面，会变得越来越卡，而你却无从下手。
当你在编写项目的时候碰着了这种问题，你一定会抱怨，为什么世上会有HTML这种像盗梦空间一样的须要无数div嵌套才能做出页面的措辞，为什么当初学JQuery看中的是它简洁的DOM操作，现在却一点也不以为它有多简洁，难道我学的是假的JQuery？为什么写个代码这么难，你想砸电脑，你想一键盘拍在产品狗的脑袋上，责怪他每天改需求才让你原来花暗香茶清味的代码变得如此又臭又长。
这个时候如果你学过Vue.js，那么这些抱怨将不复存在。
5.Vue.js为什么能让基于网页的前端运用程序开拓起来这么方便？
由于Vue.js有声明式，相应式的数据绑定，与组件化的开拓，并且还利用了Virtual DOM这个看名字就以为高大上的技能。
可是这些名词都是啥？
6.相应式的数据绑定
这里的相应式不是@media 媒体查询中的相应式布局，而是指vue.js会自动对页面中某些数据的变革做出相应。至于是如何相应的，大家可以先把下面这段代码随便粘贴到一个扩展名为html的文件然后用浏览器打开，随便在文本框里面输入一些笔墨，不雅观察一下页面变革。
是不是会创造一个很神奇的征象，文本框里面输入的笔墨和后面的p标签中的内容一起变革？
换句话说，p标签里面通过{{ message }}这个写法与input标签中的value绑定在了一起，个中变革，其余一个和它绑定的数据就随着变革。
结合标题来说，便是vue.js会自动相应数据的变革情形，并且根据用户在代码中预先写好的绑定关系，对所有绑定在一起的数据和视图内容都进行修正。而这种绑定关系，在图上因此input 标签的v-model属性来声明的，因此你在别的地方可能也会看到有人粗略的称vue.js为声明式渲染的模版引擎。
7.组件化开拓
还记得在传统前端开拓的时候，我们都是每个人做一个页面，然后末了套入各种后端模版引擎，比如说PHP的Smarty或者Java的JSP等等。
但是现在我们做单页运用，页面交互和构造十分繁芜，一个页面上就有许许多多的模块须要编写，而且每每一个模块的代码量和事情量就非常弘大，如果还按照原来的方法来开拓，那么会累去世人。而且碰着往后的产品需求变更，修正起来也非常麻烦，恐怕动了个中一个div之后，其他div随着雪崩，全体页面全部乱套，或者由于JavaScript的事宜冒泡机制，导致修正一些内层的DOM事宜处理函数之后，涌现各种莫名其妙的诡异BUG。
在面向工具编程中，我们可以利用面向工具的思想将各种模块打包成类或者把一个大的业务模块拆分成更多更小的几个类。在面向过程编程中，我们也可以把一些大功能拆分成许多函数，然后分配给不同的人来开拓。
在前端运用，我们是否也可以像编程一样把模块封装呢？这就引入了组件化开拓的思想。
Vue.js通过组件，把一个单页运用中的各种模块拆分到一个一个单独的组件（component）中，我们只要先在父级运用中写好各种组件标签（占坑），并且在组件标签中写好要传入组件的参数（就像给函数传入参数一样，这个参数叫做组件的属性），然后再分别写好各种组件的实现（填坑），然后全体运用就举措看成完了。
8.Virtual DOM
现在的网速越来越快了，很多人家里都是几十乃至上百M的光纤，手机也是4G起步了，按道理一个网页才几百K，而且浏览器本身还会缓存很多资源文件，那么几十M的光纤为什么打开一个之前已经打开过，已经有缓存的页面还是觉得很慢呢？这便是由于浏览器本身处理DOM也是有性能瓶颈的，尤其是在传统开拓中，用JQuery或者原生的JavaScript DOM操作函数对DOM进行频繁操作的时候，浏览器要一直的渲染新的DOM树，导致页面看起来非常卡顿。
而Virtual DOM则是虚拟DOM的英文，大略来说，他便是一种可以预先通过JavaScript进行各种打算，把终极的DOM操作打算出来并优化，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，以是叫做虚拟DOM。末了在打算完毕才真正将DOM操作提交，将DOM操作变革反响到DOM树上。
对付vue.js的Virtual DOM，目前业界有着褒贬不一的评价。有人认为Vue.js作为一个轻量级框架，引入Virtual DOM会加大Vue.js本身的代码尺寸，也会花费更多CPU（手机上会更耗电）（把稳：花费更多的CPU并不虞味着会更卡，由于JavaScript打算是后台打算，他的打算量还不至于让DOM操作变得卡顿），并且在操作单个DOM元素的时候，反而多了一道打算工序，会更慢。但也有人认为基本上会用Vue.js开拓的都是页面中内允许多的元素，肯定操作的DOM量级普遍较大，均匀一下还是比较划算的。
9.我到底该怎么用Vue.js做单页运用开拓？
说了这么多，我还是不知道怎么用它做出一个像知乎那样的页面啊，到底怎么学它呢？
前面我们看了一个相应式的数据绑定案例，那只是一个DEMO，而且也看不出有什么实际意义，离真正的单页运用程序还差得远，到底怎么用它开拓真实的项目呢？
我的建议是，先把先容 - vue.js官方文档的根本部分硬着头皮看一遍。除了组件这个小节涉及到了很多晦涩难懂的名词以外，前面几章完备便是把Vue.js当作一个模版引擎来用。
然后开始学习ECMAScript6，Webpack，NPM以及Vue-Cli的基本用法，最好对Node.js也要有所理解。
末了组件部分先大致看一遍，理解组件里面都有哪些观点之后，开始看网上各种实战视频以及文章还有别人开源的源代码。
10.在前面你提到过好几次ECMAScript，这是啥？
ECMAScript听名字彷佛和JavaScript很像，难不成他们有什么千丝万缕的联系？
没错你猜对了，他们之间还真有着很深的联系。
引用阮一峰老师的话：（ECMAScript 6入门）
而ECMAScript6便是新一代的JavaScript措辞。
这里也强烈推举大家学习ECMAScript6的时候参考这本书ECMAScript 6入门
11.我在学习Vue.js的时候总是听到Webpack，这是啥？
Webpack是一个前端打包和构建工具。如果你之前一贯是手写HTML，CSS，JavaScript，并且通过link标签将CSS引入你的HTML文件，以及通过Script标签的src属性引入外部的JS脚本，那么你肯定会对这个工具感到陌生。不要紧，我们先来理解一下为什么要用Webpack，然后带着缘故原由去学习就好了。
12.为什么要用Webpack
前面说了，做一个单页运用程序本身就相称繁芜，而且在做的时候肯定会利用到很多素材和别的第三方库，我们该如何去管理这些东西呢？
还有前面讲到了Webpack是一个前端打包工具，前端代码为什么要打包呢？由于单页运用程序中用到很多素材，如果每一个素材都通过在HTML中以src属性或者link来引入，那么要求一个页面的时候，可能浏览器就要发起十多次要求，每每要求的这些资源都是一些脚本代码或者很小的图片，这些资源本身才几k，下载连1秒都不须要，但是由于HTTP是运用层协议，它的下层是TCP这个运输层协议，TCP的握手和挥手过程花费的韶光可能比下载资源本身还要长，以是须要把这些小文件全部打包成一个文件，这样只要一次TCP握手和挥手的过程，就把多个资源给下载下来了，并且多个资源由于都是共享一个HTTP要求，以是head等部分也是共享的，相称于形成了规模效应，让网页展现更快，用户体验更好。
前面说到Webpack还有构建的功能，这就不得不提到了ECMAScript6这个新版本的JavaScript，但是现在国内外还有很多人用着老版本的浏览器，这些浏览器并不支持ECMAScript6，那么我们的前端项目如何在这种浏览器上运行呢？这就须要Webpack的Loader自动载入一个转换器来将我们写的ECMAScript6转换成浏览器能支持的老版本JavaScript措辞，这个转换器的名字叫做babel，如果你往后听到或者看到了这个单词，该当要知道它便是一个ECMAScript6 to 老版本JavaScript的转换器了。这也是Webpack的构建功能。当然对前端有更深入的同学还会知道Sass，Less，stylus之类的CSS预处理器，我们也可以通过在Loader中编写特定的规则来实现自动将这些CSS预处理措辞转换成普通浏览器能识别的CSS代码。
开头的先容提到了vue.js可以利用单文件组件开拓项目，实在也是通过Webpack将单文件组件中的模版，样式以及JS转换到主页面中
当然Webpack不止这点功能，它还可以通过安装各种插件来扩展，比如说热加载技能，便是解放键盘的F5键。让我们修正代码，并且按Ctrl+S保存之后，浏览器页面自动刷新变革，不须要我们去手动刷新，还有一些插件可以自动添加注释，自动给CSS代码加上一些浏览器内核对CSS3兼容前缀，就像webkit-xxx之类的一样。
13.NPM和Node.js又是什么？它们是什么关系？
首先讲讲Node.js。我们知道常日情形下，JavaScript的运行环境都是浏览器，因此JavaScript的能力也就局限于浏览器能授予它的权限了。比如说读写本地系统文件这种操作，一样平常情形下运行在浏览器中的JavaScript代码是没有这个操作权限的。如果我们想用JavaScript写出一些能够运行在操作系统上的，能够具有像PHP，JAVA之类的编程措辞具有的功能的程序该怎么办呢？Node.js就办理了这个问题。Node.js是一个做事真个JavaScript运行环境，通过Node.js可以实现用JavaScript写独立程序。像我们之条件到的Webpack便是Node.js写的，以是作为一个前端开拓，纵然你不用Node.js写独立程序，也得配一个Node.js运行环境，毕竟很多前端工具都是利用它写的。
NPM是一个node.js的包管理器。我们在传统开拓的时候，JQuery.js大多都是百度搜索，然后辞官网下载，或者直接引入CDN资源，这种方法太过于麻烦。如果往后碰着其他的包，这个包的代码本身可能还调用了其他的包（也称这个包和其他的那几个包存在依赖关系），那么我们要在自己的项目中引入一个包将变得十分困难。现在我们有了NPM这个包管理器，直接可以通过
的办法引入它，比如说
就自动在当前项目文件夹下导入了这个包，并且npm自动下载好了vue这个包依赖的其他包。
至于有的人在按照网上的npm教程配置的时候踩坑了，创造下载速率很慢或者完备下载不了，那是由于我国有着众所周知的缘故原由，网上也有各种办理方法可以办理这个问题，大家多善用搜索引擎。
前面提到了Webpack可以安装各种插件来扩展功能，实在也是通过这种办法扩展。
如果你学过PHP的话，NPM就和PHP里面的Composer差不多。也和CentOS下的yum和Ubuntu下的apt-get差不多。
14.Vue-CLi又是啥？
它是一个vue.js的脚手架工具。说白了便是一个自动帮你天生好项目目录，配置好Webpack，以及各种依赖包的工具，它可以通过
的办法安装，后面的-g表示全局安装的意思，意味着你可以打开命令行之后直接通过vue命令调用它。
15.我该不该学Vue.js？
现在Vue.js无论是发展势头还是作者支持还是很好的，而且它本身中文资料就比较多，教程大概多，现在随随便便打开几个和前端开拓有关的知乎专栏，基本上都能见到干系文章，社区也很生动。
至于你该不该学，取决于你自己，如果你当前只是做做以内容展示为主的项目，或者便是整天用各种CMS建站仿站，并且往后都不打算改换更好的事情，那么可以暂时不用学。如果你开拓的项目交各别常多，而且前后端开拓都对前后端分离有很清楚的认识，那么可以大胆的学习，并且在实际项目中利用。
16.Vue.js怎么火起来的？
关于这个问题，网上说法很多，我自己认为紧张还是前些年大前端变革太快，而最近一年开始Vue.js+Webpack这个组合开始逐渐稳定下来了，而且已经有了很多中文资料。
比拟它的竞争对手AngularJS，新旧版本项目无法平滑升级，变革太大让用户觉得不屈稳。
而React本身主流推举用的是JSX，须要额外学习一门语法（什么？学Vue.js还要学ECMAScript6？现在ECMAScript6是趋势，并不是由于Vue.js才要学的），并且React本身用的是render写法编写模版代码，这让很多用习气了Smarty等后端模版引擎得人来利用觉得很不适应，现在看来React本身在中国一些论坛社区的火爆程度还是没有Vue.js高。
当然也并不是说除了Vue.js以外其他框架都很差。像知乎新版也是用React开拓的，他还是有各自精良的地方大家可以深入学习之后做出自己的判断。
17.我在很多地方还看到Vuex和Vue-route，它们又是什么？
Vuex是vue的一个状态管理器。用于集中管理一个单页运用程序中的各种状态。
Vue-route是vue的一个前端路由器，这个路由器不是我们上网用的路由器，而是一个管理要求入口和页面映射关系的东西。它可以实现对页面局部进行无刷新的更换，让用户觉得就像切换到了网页一样。
要讲清楚这两个东西，又得花费大量篇幅，以是这里只是大略提一下，先学好vue.js本身才是最主要的。
18.我还在一些地方看到过Vue-resource和Axios，它们又是什么？
我们在传统的前后端不分离的开拓中，后端直接把数据通过模版引擎拼接进了返回的HTML中。而现在做单页运用程序属于前后端分离开拓，那么这个单页运用程序中的数据就得通过ajax的办法获取，也要通过ajax的办法提交到后端。
在传统开拓中我们都是通过手动操作，或者通过JQuery的ajax方法来进行数据提交获取。
vue.js本身没有封装ajax操作库，以是我们要通过Vue-resource和Axios来进行ajax操作，而由于各类缘故原由，现在vue.js2.0已经将axios作为官方推举的ajax库了。
19.我该学Vue.js2.0还是1.0呢？
现在很多框架和措辞都是学新不学旧（Python逐步也变得如此），因此如果不是为了掩护老旧项目，肯定推举学Vue.js2.0。而且学会了Vue.js2.0，再去学习Vue.js1.0也不是什么难事。
20.写Vue.js用什么开拓工具和电脑呢？
前端开拓基本上不须要太高真个电脑都能胜任，现在这个时期是台电脑，装个编辑器都可以做前端开拓的。
Vue.js的组件文件实质上还是普通的代码文件，以是各种编辑器合营一些语法检讨插件就足够了。我自己用的是sublime text 3，安装一些插件之后可以实现.vue单文件组件高亮代码以及各种自动完成。Webstorm中也有类似插件，大家可以在网上各种传授教化文章的辅导下配置好环境。
我用的主题是Monokai，这个主题在大部分显示器下永劫光不雅观看眼睛不会很疼。我利用的显示器是LG IPS236，部分显示器有亮度色标调节，我这款显示器调到2.0旁边会比较舒适，过低会导致底部的茶色背景变黑，反差较大更加疲倦，过高会导致比拟度不敷，画面泛白影响调色。
结语：
可能包括我在内的很多人在看到Vue.js那神奇的双向绑定优雅写法都会有一种非常惊艳，而看到中文文档发布之后有种想立马学习的冲动。可惜大前端究竟是大前端，如果一个对付前端各个方面没有深入认识就想着能一步登天，肯定对不起大前真个“大”字。原来看着只想学一个Vue.js，没想到顺带把ECMAScript6，Webpack配置，ESLint配置，bable配置，npm利用，node.js语法，往后vue百口桶中的vuex，vue-route等等等等都学了一遍。前段韶光网上也流传出了一个职位叫做Webpack配置工程师，从这里也可以看出弄懂前端这个大杂烩确实不是那么随意马虎。大家一起加油，有什么问题可以在评论区回答。感激各位的支持！
