Vue.js新手入门指南

时间 2019-11-11

原文原文链接

最近在逛各大网站，论坛，以及像SegmentFault等编程问答社区，发现Vue.js异常火爆，重复性的提问和内容也不少，楼主本身也趁着这个大前端的热潮，着手学习了一段时间的Vue.js，目前用它正在作本身的结业项目。javascript

在作的过程当中也对Vue.js的官方文档以及其各类特性有了许多认识。做为一个以前以PHP+模版引擎为主的开发，从一个从未接触过除HTML+CSS+JavaScript+JQuery之外的前端技术的人到如今能够独立使用Vue.js以及各类附属的UI库来开发项目，我总结了一些知识和经验想与你们分享。html

下面我就以问答的形式来分享吧。这里假设你仅仅只掌握了HTML+CSS+JavaScript，若是你对JQuery这个前端库，以及各类后端模版语言好比说PHP，JSP还有所了解而且使用过的话那就太好了。前端

1.Vue.js是什么？

Vue.js（读音 /vjuː/, 相似于 view）是一套构建用户界面的渐进式框架。与其余重量级框架不一样的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，而且很是容易学习，很是容易与其它库或已有项目整合。另外一方面，Vue 彻底有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是经过尽量简单的 API 实现响应的数据绑定和组合的视图组件。vue

若是你是有经验的前端开发者，想知道 Vue.js 与其它库/框架的区别，查看对比其它框架。java

这是官网的介绍，是否是以为很是的抽象很是的官方？看完以后可能仍是有不少人不是很懂这个框架究竟是用来作什么的，什么是“渐进式框架”？什么是“自底向上增量开发”？什么是“视图层”？什么是“单文件组件”？什么是“复杂的单页应用？”第二段话里面“响应的数据绑定和组合的视图组件”这又是个啥？还有最后一段话，“Vue.js 与其它库/框架的区别”到底是什么？node

不要担忧，若是你慢慢看完这里面的全部问答，必定会对前面那些可能你从未据说过的专业术语有一种恍然大悟的感受。ios

2.Vue.js究竟是什么？

想必如今能看到我这篇文章的人，都是用着APP或者网页版知乎在阅读吧。Vue.js就是一个用于搭建相似于网页版知乎这种表单项繁多，且内容须要根据用户的操做进行修改的网页版应用。git

3.单页应用程序（SPA）

顾名思义，单页应用通常指的就是一个页面就是应用，固然也能够是一个子应用，好比说知乎的一个页面就能够视为一个子应用。单页应用程序中通常交互处理很是多，并且页面中的内容须要根据用户的操做动态变化。es6

4.你前面说的网页版知乎我也能够用JQuery写啊，为何要用Vue.js呢？

讲到JQuery，就不得不说到JavaScript的DOM操做了。若是你用JQuery来开发一个知乎，那么你就须要用JQuery中的各类DOM操做方法去操做HTML的DOM结构了。github

如今咱们把一个网页应用抽象一下，那么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的文件而后用浏览器打开，随便在文本框里面输入一些文字，观察一下页面变化。

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;vue.js测试 - 代码之美专栏&lt;/title&gt;
    &lt;!-- author:昌维 代码之美 https://zhuanlan.zhihu.com/codes --&gt;
    &lt;script src="https://unpkg.com/vue/dist/vue.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="app"&gt;
        &lt;input type="text" name="" value="" placeholder="在这里输入文字，下面会跟着变化" v-model="message"&gt;
        &lt;hr&gt;
        &lt;p&gt;{{ message }}&lt;/p&gt;
    &lt;/div&gt;
    &lt;script type="text/javascript"&gt;
        var app = new Vue({
          el: '#app',
          data: {
            message: 'Hello Vue!'
          }
        })
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

是否是会发现一个很神奇的现象，文本框里面输入的文字和后面的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入门）

要讲清楚这个问题，须要回顾历史。1996年11月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给国际标准化组织ECMA，但愿这种语言可以成为国际标准。次年，ECMA 发布262号标准文件（ECMA-262）的初版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是1.0版。
该标准从一开始就是针对 JavaScript 语言制定的，可是之因此不叫 JavaScript，有两个缘由。一是商标，Java 是 Sun 公司的商标，根据受权协议，只有 Netscape 公司能够合法地使用 JavaScript 这个名字，且 JavaScript 自己也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA，不是 Netscape，这样有利于保证这门语言的开放性和中立性。

所以，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 Jscript 和 ActionScript）。平常场合，这两个词是能够互换的。

而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 install xxx包名称

的方式引入它，好比说

npm install vue

就自动在当前项目文件夹下导入了这个包，而且npm自动下载好了vue这个包依赖的其余包。

至于有的人在按照网上的npm教程配置的时候踩坑了，发现下载速度很慢或者彻底下载不了，那是由于我国有着众所周知的缘由，网上也有各类解决方法能够解决这个问题，你们多善用搜索引擎。

前面提到了Webpack能够安装各类插件来扩展功能，其实也是经过这种方式扩展。

若是你学过PHP的话，NPM就和PHP里面的Composer差很少。也和CentOS下的yum和Ubuntu下的apt-get差很少。

14.Vue-CLi又是啥？

它是一个vue.js的脚手架工具。说白了就是一个自动帮你生成好项目目录，配置好Webpack，以及各类依赖包的工具，它能够经过

npm install vue-cli -g

的方式安装，后面的-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的方式提交到后端。

在传统开发中咱们都是经过xmlhttprequest手动操做，或者经过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中也有相似插件，你们能够在网上各类教学文章的指导下配置好环境。

结语

可能包括我在内的不少人在看到Vue.js那神奇的双向绑定优雅写法都会有一种很是惊艳，而看到中文文档发布以后有种想立马学习的冲动。惋惜大前端终究是大前端，若是一个对于前端各个方面没有深刻认识就想着能一步登天，确定对不起大前端的“大”字。本来看着只想学一个Vue.js，没想到顺带把ECMAScript6，Webpack配置，ESLint配置，bable配置，npm使用，node.js语法，之后vue全家桶中的vuex，vue-route等等等等都学了一遍。前段时间网上也流传出了一个职位叫作Webpack配置工程师，从这里也能够看出弄懂前端这个大杂烩确实不是那么容易。你们一块儿加油，有什么问题也能够在评论区回复，我会抽空补充在文章内容中。谢谢各位的支持！~

转载于：https://zhuanlan.zhihu.com/p/25659025做者：昌维