第1章　Vue.js概述

1.1　单页应用的出现

随着移动电话的普及和微信的流行，很多的Wap（H5）应用也随之出现了，如微店、微站各个App中包含的H5页面。

手机的硬件特点有：

硬件设备差。同主频的手机CPU性能往往是台式机的十分之一（手机的供电与台式机设备相差很远）。
网络速度慢。4G网络在很多时候下载速度只有几百KB，打开一个微信中的网页可能也要很久。

因此，使用传统的Webpack技术开发的网页，在手机端的表现往往特别差。传统技术的特点是：

单击某个链接/按钮，或者提交表单后，Webpack页面整体刷新。
js/css的请求往往很多，过百是很常见的事情。

每次页面整体刷新，都要导致浏览器重新加载对应的内容，特别“卡顿”。另外，加载的内容也很多。很多传统页面的css/js多达上百个，每次打开页面都需要发送上百次请求。如果页面中包含websocket等内容，打开速度就会更慢。

苹果的机器表现还好，iOS设备打开Web页面速度很快，Android设备则大部分都很慢。这个是由手机设备操作系统、软件及智能硬件决定的。

单页应用（Single Page App，SPA）体现出了其强大的优势。

页面是局部刷新的，响应速度快，不需要每次加载所有的js/css。
前后端分离，前端（手机端）不受（服务器端的）开发语言的限制。

越来越多的App采用SPA的架构。如果你的项目要用在H5上，那么一定要使用单页应用框架，如Angular、React、Vue.js都是很好的框架。

我们在公司实际项目中，都使用Vue.js，效果非常好。开发速度快，维护效率高。

因为本文与官方文档不同，是根据实际项目经验，以培养新人的角度来写的，所以会有以下特点。

很少使用的技术略过。
只讲解常见的知识。
在章节上按照入门的难易度程度从简单到复杂。

1.2　为什么要使用Vue.js

在本章中，我们会从多个角度思考这个问题。

1.2.1　单页应用

Web的应用分两类：传统Web页面应用和单页应用（Single Page App）。

1. 传统Web页面

传统Web页面就是打开浏览器，整个页面都会打开的应用。例如，笔者的个人网站http://siwei.me就是一个典型的“传统Web应用”，每次单击其中任意一个链接，都会引起页面的整个刷新，如图1-1所示。

图1-1　个人网站

从图1-1中可以看出，传统的页面每次打开，都要把页面中的.js、.css、图片文件、html文件等资源加载一遍。在图1-1的左下角可以看到，本次共加载了10个请求（4个css，2个js，3个png图片及1个html文件），耗时0.837s。这个在PC端可以，但是在手机端就会特别慢，特别是在安卓手机上。

传统页面的特点就是下面任何一个操作，都会引起浏览器对于整个页面的刷新：

单击链接。
提交表单。
触发location.href='...'这样的js代码。

我们来看一个传统Web页面的例子。

<html>
<head><script src="my.js"></script><style src="my.css"></style>
</head>
<body><img src='my.jpg' /><p> 你好！ 传统Web页面！ </p>
</body>
</html>

每个浏览器都会从第一行解析到最后一行，然后继续加载my.js、my.css、my.jpg这三个外部资源。

其实很好理解，这个就是大家最初想象的Web页面的打开方式。

2. 单页应用（Single Page App）

单页应用，确切的诞生时间不详，可以肯定的是这个概念2003年就在论坛上被人讨论了。在2002年4月，诞生了一个网站：http://slashdotslash.com，就使用了这种思想。

单页应用的精髓是点/单击任何链接，都不会引起页面的整体刷新，只会通过JavaScript替换页面的局部内容。

3. Ajax和XML

说到这里，就不得不提到另一个概念：Ajax（Asynchronous JavaScript），中文可以称之为“js的异步请求”，国内统一称为Ajax。

Ajax的概念是每次打开新的网页时，不要让页面整体刷新，而是由js发起一个“HTTP异步请求”，这个“异步请求”的特点就是不让当前的网页“卡”死。

用户可以一边上下滚动页面，播放视频一边等待这个请求返回数据。结果被正常返回后，由js控制刷新页面的局部内容。

这样做的好处是：

（1）大大节省了页面的整体加载时间。各种.js、.css等资源文件加载一次就够了。

（2）节省了带宽。

（3）同时减轻了客户端和服务端的负担。

在智能手机和App应用（特别是微信）流行起来之后，大量的网页都需要在手机端打开，Ajax的优势就体现的淋漓尽致。

虽然Ajax的名称本意是“异步js与XML”，但是现在在服务器端返回的数据中几乎都使用JSON，而抛弃了XML。

在2005年，国内的程序员论坛开始提及Web 2.0，其中Ajax技术被人重视。到了2006年初，可以说Ajax是前端程序员的加薪利器。市面上的所有招聘“前端Web程序员”的职位描述中都认为Ajax是重要的加分项。

可惜当时jQuery在国内不是很普及，Prototype也没有流行起来。笔者与北京软件圈子里的各大公司的同行们交流时，发现大家用的都是“原生的JavaScript Ajax”，这种不借助任何第三方框架的代码写起来非常臃肿、累人，而且考虑到浏览器的兼容问题，开发起来也很让人头疼。

例如，当时的代码往往是这样的：

上面的代码仅仅是为了兼容各种浏览器。实际上，后面还有几十行的冗余代码，之后才是正常的业务逻辑代码。

到2008年，国内开始流行Prototype、jQuery之后，发起一个Ajax请求的代码精简成几行：

jQuery.get('http://some_url?para=1', function(data){// 正常代码
})

那时候开始，Ajax在国内变得越来越普及。

4. Angular

第一个单页应用（SPA）的知名框架应该是Angular，由Google在2010年10月推出。当时的Gmail、Google Map等应用对于Ajax技术运用到了极致。而Angular框架一经推出，立刻引燃了单页应用这个概念。尽管后来各种SPA框架层出不穷，在2015年之前，Angular稳坐SPA的头把交椅。

5. 当下的SPA技术趋势

SPA框架已经成为了项目开发必不可少的内容，只要有移动端开发，就会面临以下两个选择。

做成原生App。
做成SPA H5。

无论是iOS端还是Android端，都对SPA青睐有加。

（1）打开页面速度特别快。打开传统页面，手机端往往需要几秒，而SPA则在0.x秒内。

（2）耗费的资源更少。因为每次移动端只请求接口数据和必要的图片资源。

（3）对于点/单击等操作响应更快。对于传统页面，手机端的浏览器在操作时，点击按钮会有0.1s的卡顿，而使用SPA则不会有卡顿的感觉。

（4）可以保存浏览的历史和状态。不是每一个Ajax框架都有这个功能。例如，QQ邮箱，虽然也是页面的局部刷新，但是每次打开不同的邮件时，浏览器的网址不会变化。而在所有的SPA框架中，都会有专门处理这个问题的模块，叫做router（路由）。

例如：

http://mail.my.com/#/mail_from_boss_on_0620对应老板在6月20日发来的邮件。

http://mail.my.com/#/mail_from_boss_on_0622对应老板在6月22日发来的邮件。

在2011和2012年，各种SPA框架出现了井喷的趋势，包括Backbone、Ember.js等上百个不同的框架。近几年，比较流行的框架是Angular、React和Vue.js。

1.2.2　知名的单页应用（SPA）框架对比

在学习Vue.js之前，我们要知道为什么学习它。

目前市面上比较知名的单页应用SPA框架是Vue.js、React、Angular，我们依次来了解一下。

1. Angular

Angular作为SPA的老大哥，源于Google，在过去若干年发挥了非常大的价值。现在的版本是4.0

它的优点是：

业内第一个SPA框架。
实现了前端的MVC解耦。
双向绑定。Model层的数据发生变化会直接影响View，反之亦然。

缺点也很明显：

难学，难用。
Angular 1.x的文档很差。2.0稍微好一些。

Angular 1.x的文档directive被无数人吐槽看不懂。文档不全，没有示例代码。很多东西调试起来也没有专门的工具。另外，想使用第三方组件的话，需要单独为Angular做适配。例如，jquery-upload前端上传文件的组件，非常不好用。

虽然Angular的功能很全面，但是由于学习曲线过于陡峭，上手很慢，维护起来也很麻烦。因此，现在在论坛上的口碑也开始下降。官方网站为https://github.com/angular。

2. React

React是由Facebook推出的SPA框架，宣称的特点是Learn once, write anywhere，很吸引人。

React的优点是：

使用js一种语言就可以写前端（H5、App）+后端。
ReactNative可以直接运行在手机端，性能很棒，接近于原生App，并且可以热更新，免去了手机端App每次都要重新下载和安装的过程。
周边组件很多。

React的缺点是：

（1）html代码（这样的标签）需要写在js文件中。例如：

上面代码的编程方式也叫“多语言混合式编程”。最大的特点是代码难以理解、开发和调试。

（2）把前后端代码写在一起的风格。

//前端代码
....


// 后端代码
....

所有做过传统Web框架的人都觉得奇怪。其他表现尚可，学习难度低于Angular，高于Vue.js。官方网站为https://github.com/facebook/react。

3. Vue.js

Vue.js（读音同View）是一个MVVM（Model - View - ModelView）的SPA框架。

View：视图。
Model：数据。
ModelView：连接View与Model的纽带。

Vue.js一经推出，就获得了各大社区的好评，几乎是一边倒的声音。它的优点是：

（1）简单好学，好用。

Angular：学习二周到四周。
React：学习两周。
Vue.js：三天到一周。

这三个框架做的事都一样。

（2）Angular、React具备的功能，Vue.js都具备（React Native除外）。

Vue.js在2014年2月被推出的时候，核心文档就具备了两种语言：中文和英文，这对于母语是汉语的国人来说意义重大，可以非常快的上手。官方网站为https://github.com/Vuejs/vue。

4. 为什么用Vue.js，不用React、Angular

首先，我们在评价一个技术的时候，最简单的办法就是看它有多火，这个体现在Github的stars数目上。

截止到2018年6月底，三个项目的关注数分别是：

Angular：3.8万。
React：10.4万。
Vue.js：10.5万。

可以看出，Vue.js排在第一位。

其次，我们看一下stars的增长趋势。

根据统计（http://www.timqian.com/star-history/#facebook/react&angular/ angular&Vue.js/vue），截止到2018年6月底，Vue.js的增长趋势一直是最高的，React居中，Angular最低，如图1-2所示的github上三种框架的关注变化曲线。

图1-2　github上三种框架的关注变化曲线

第三，Vue.js的作者是中国人，官方文档也是中文的（地址：http://cn.Vue.js.org）。

读者可以参考以下两篇文章。

https://cn.Vue.js.org/v2/guide/comparison.html；
https://www.quora.com/How-does-Vue-js-compare-to-React-js。

1.2.3　被腾讯和阿里巴巴所青睐

Vue.js的思想可以说是对国内互联网巨头产生了较大的冲击。腾讯的微信和阿里巴巴的Weex项目的实现方式与Vue.js是非常相似的。

可以说，学会了Vue.js就基本学会了微信小程序和阿里巴巴的Weex。这个对于需要不断学习新知识的程序员来说，是非常好的消息。有大公司的支持，这个技术一定是非常有前景的。

1. 微信小程序

微信小程序是微信在2017年出现的技术，基于微信。使用SPA的开发技术，就可以运行在安装过微信的手机上。表现效果与原生App几乎一样。

微信小程序的代码特点、文件组织形式及各种概念，与Vue.js是非常相似的。

2. 阿里巴巴Weex

Weex致力于使开发者能基于当代先进的Web开发技术，使用同一套代码来构建Android、iOS和Web应用。

Weex以及支持了对于Vue.js 2.0的直接集成。也就是可以在Weex中直接写Vue.js的代码。Weex与React Native一样，都是使用Web开发的相似代码，让程序以Native App的形式跑起来。

Weex以官方文档的形式告诉大家如何使用Vue.js，链接如下：

https://weex.apache.org/cn/guide/use-vue.html 。

1.2.4　用到Vue.js的项目

滴滴出行。
饿了么：开源了一个基于Vue的UI库（https://github.com/ElemeFE/element）。
阿里巴巴的weex（https://github.com/alibaba/weex）。
GitLab（https://about.gitlab.com/2016/10/20/why-we-chose-vue/）。
facebook（https://newsfeed.fb.com/welcome-to-news-feed?lang=en）。
新浪微博。

更全列表可见https://github.com/Vue.js/awesome-vue#projects-using-Vue.js。

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

Vue.js之深入浅出
介绍引言 Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或…...
2024/4/21 3:26:00
使用Angularjs和Vue.js对比
使用Angularjs和Vue.js对比之前项目都是使用Angularjs，在初步使用Vue.js后做一个简答的对比笔记 #首先当然是Hello World了 ~vue.js <div id"app">{{ message }} </div> new Vue({el: #app,data: {message: Hello Vue.js!} }) ~Angular…...
2024/4/21 3:25:59
vue.js与angular.js的区别（个人）
刚进入实训讲师就要发一些什么比较高大上的东西，本人才疏学浅浅浅的分享一下angularjs 和vue.js的区别。只是简单的理解一下大神勿喷。生实训之前学习的angular.js 只是理解了一些些小部分，angular不多说，就是操作数据用的，…...
2024/4/21 3:25:59
vue.js安装步骤使用Node.js安装
一、简介 Vue.js 是什么 Vue.js（类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目…...
2024/4/21 3:25:57
这份Vue.js你值得拥有，写完老板叫我转前端
Vue.js1：概述1-1：MVVM模式的实现者1-2：为什么要使用Vue.js2：第一个Vue程序2-1：下载地址2-2：代码编写3-2：Vue的闪烁问题3-3：解决方案4：Vue的基本语法4-1：v-bin…...
2024/4/21 3:25:58
Vue.js学习(一)
1，Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。 1.1，MVVM模式下图…...
2024/4/21 3:25:55
React.js, Angular.js, Vue.js 三个框架哪个好
React,Angular,Vue, 这三个框架社区里讨论的时间可不短了，但对于一个小白来说，准备上手这三款框架，究竟从哪一个开始学习最佳，需要分析一波～ 首先从Angular.js说起，Angular.js目前指1.6版本之前的老Angular…...
2024/4/20 11:35:02
Vue.js的介绍以及核心技术的讲解
随着用户对Web前端的使用体验升级，导致Web前端开发的工作难度增大。为了提高开发效率和代码复用率, 近几年,互联网前端行业发展迅速,涌现出一大批优秀框架这些框架逐渐改变了传统前端的开发方式,譬如:谷歌的AngularJS,脸书的ReactJS这些MVVM框架的碰到以及器件化的…...
2024/4/21 3:25:53
vue.js概述
vue.js概述 Javascript中，最具代表性的框架有Angular,React和Vue这三个主流框架，其中Vue框架是其中最年轻，发展最快的框架之一。 Vue是一种基于MVVM设计模式，轻量级，并具有高效数据绑定和灵活组件系统的现代化的Javas…...
2024/4/21 3:25:52
vue.js框架原理浅析
vue.js是一个非常优秀的前端开发框架，不是我说的，大家都知道。首先我现在的能力，独立阅读源码还是有很大压力的，所幸vue写的很规范，通过方法名基本可以略知一二，里面的原理不懂的地方多方面查找资料&#…...
2024/4/21 3:25:51
Element+Vue.js
前端框架，目前流行node 、Vue ,react 、angular 等。之前看了node 和vue的视频，还挺有意思的，也练习了下。对尤雨溪的vue挺感兴趣。最近在一个项目中用了element，element是饿了么团队的开源杰作，后台管理系统大家可…...
2024/4/20 11:54:35
React.js VS Vue.js
无意中，我在DZone上发现了这一篇关于React.js 和Vue.js二者比较的文章，就本人一段时间以来对于二者的试应用来看，感觉分析的算是比较中肯，故摘于此，因时间关系请原谅没有翻译成中文。原文内容如下： JavaScr…...
2024/4/20 5:03:21
vue.js搭建个人博客
为何选择vue.js搭建博客为什么会选择使用vue.js框架搭建博客呢？原因有多个。作为前后端分离的多数据绑定项目，首选的就是mvc 以及mvvm等框架，也就是主流的angular.js 和vue.js，之前有用angular.js 写过项目，但是数据…...
2024/4/20 20:07:24
vue.js库使用
1. vue.js介绍 Vue.js是前端三大新框架：Angular.js、React.js、Vue.js之一，Vue.js目前的使用和关注程度在三大框架中稍微胜出，并且它的热度还在递增。 Vue.js可以作为一个js库来使用，也可以用它全套的工具来构建系统界面&#x…...
2024/4/20 20:07:23
vue.js是什么框架？有什么优势？
vue.js (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 Vue.js是一套构建用户界面的渐进…...
2024/4/20 20:07:22
如何安装vue.js以及创建第一个vue项目
本次的主题是如何安装vue.js以及创建第一个vue项目现在前端主流的有三大框架，vue，angular，react，vue是国人大牛创建的，一开始的定位是依赖库，但发展到目前已经是一个成熟的前端框架了，所以我们有…...
2024/4/27 20:27:25
Vue.js 在Visual Studio Code中启动
Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。 ViewModel是Vue.js的核心，它是一个Vue实例。Vu…...
2024/4/20 11:53:52
Vue.js框架入门之vue简介及其基本语法(一）
Vue.js框架入门之vue简介(一）一、什么是Vue.js?二、MVC、MVVM模式简介1、MVC：Model(模型)View(视图)controller(控制器)2、MVVM：Model(模型)View(视图)ViewModel(视图模型)三、vue.js的安装1、直接用 script引入2、CDN引入3、NPM安装四、Vue…...
2024/4/20 20:07:19
Vue.js（一）——发展背景与简介
这一章节主要介绍Vue前的网站开发现状以及Vue的介绍 1、网站交互和开发方式 1.1、网站交互方式的发展经典的多页面> 交互方式前后端融合在一起，开发和维护效率方式差用户体验一般，点击刷新跳转，等待时间长每个页面都需要重新加载 …...
2024/4/20 20:07:18
在HTML中使用Vue.js
在非前后端项目中做页面时, 现在时常是只由后端人员一手开发, 在html或ftl文件中写js和 jquery总是令后端开发者如鲠在喉, 此时若能引入vue或者angular将极大提升开发效率(一般来说都会允许引入, 但博主也见过比较执拗的项目经理不允许使用前端框架非要用jq的) 在html中使用vu…...
2024/4/20 20:07:18

第1章　Vue.js概述

第1章　Vue.js概述

1.1　单页应用的出现

1.2　为什么要使用Vue.js

1.2.1　单页应用

1. 传统Web页面

2. 单页应用（Single Page App）

3. Ajax和XML

4. Angular

5. 当下的SPA技术趋势

1.2.2　知名的单页应用（SPA）框架对比

1. Angular

2. React

3. Vue.js

4. 为什么用Vue.js，不用React、Angular

1.2.3　被腾讯和阿里巴巴所青睐

1. 微信小程序

2. 阿里巴巴Weex

1.2.4　用到Vue.js的项目

相关文章

最新文章

第1章 Vue.js概述

第1章 Vue.js概述

1.1 单页应用的出现

1.2 为什么要使用Vue.js

1.2.1 单页应用

1. 传统Web页面

2. 单页应用（Single Page App）

3. Ajax和XML

4. Angular

5. 当下的SPA技术趋势

1.2.2 知名的单页应用（SPA）框架对比

1. Angular

2. React

3. Vue.js

4. 为什么用Vue.js，不用React、Angular

1.2.3 被腾讯和阿里巴巴所青睐

1. 微信小程序

2. 阿里巴巴Weex

1.2.4 用到Vue.js的项目

相关文章

最新文章

第1章　Vue.js概述

第1章　Vue.js概述

1.1　单页应用的出现

1.2　为什么要使用Vue.js

1.2.1　单页应用

1.2.2　知名的单页应用（SPA）框架对比

1.2.3　被腾讯和阿里巴巴所青睐

1.2.4　用到Vue.js的项目