第1章——Vue.js基本简介
本章概述
本章主要讲解Vue.js的基本知识、Vue.js的发展历程、使用的开发软件等内容，为使用Vue.js前端框架开发项目奠定基础。通过本章内容的学习，读者可以了解Vue.js的基本知识及发展历程，还可以了解Vue.js的模式及它和其他流行前端框架之间的对比等。
本章要点
· Vue.js基本介绍。
· Vue.js框架的发展历程。
· Vue.js的模式介绍。
· Vue.js与Angular对比。
· Vue.js与React对比。
· Vue.js的兼容性。
1.1 前端框架的发展历程
我们都知道，三个非常受欢迎的前端框架Vue、Angular、React 已经逐渐应用到各个项目和实际的应用中，它们都是MVVM数据驱动框架的一种。前端静态页面HTML、JavaScript、Ajax、Node.js等的问世，都对前端框架技术有着重大的影响。
1.1.1 前端静态页面走向动态页面的转变
前端主要是针对浏览器进行开发的，代码在浏览器中运行。想要学习前端的基础还需从学习HTML开始。1991年出现了世界上第一个网页，当时的HTML代码如下：
<HEADER>
<TITLE>The World Wide Web project</TITLE>
<NEXTID N="55">
</HEADER>
<BODY>
<H1>World Wide Web</H1>
The World Wide Web(W3) is a wide-area
<A NAME=0 HREF="WhatIs.html">hypermedia</A>
从上面的HTML源码中可以看到代码标签多，且格式没有明确规范，对于规范书写存在着问题。在这种情况下，Tim Berners Lee创建了W3C标准机构，使得HTML的代码有一定的规范，但是在网页设计方面还是存在局限问题，不满足当时的需求。 在这种情况下Sun公司编写了Java小程序（Applet），可以在页面中实现酷炫的动态效果，大大增加了页面的美观效果。紧接着网景
公司为了适应发展和需求花了两周时间开发出JavaScript语言，就是我们经常说的JS脚本语言HTML语言和JavaScript的诞生使得网页之间可以进行更好的交互，但是出现了页面规划不整齐的情况，而且代码量大，代码利用率低。后来Tim的朋友发布了CSS，至此前端三大核心出现。
在前端技术不断发展的同时，也出现了一系列的问题，比较繁杂的就是前端页面的浏览器不兼容问题。同一个DOM操作可能会需要写很多适配代码来兼容不同浏览器，于是比较便捷的语言jQuery诞生了，一套代码可以多端运行，使得代码的开发更加便捷。
1.1.2 程序后端走向前端的转变
后端主要针对服务器的开发，代码在服务器中运行。在前端发展的早期，网页的开发主要是由后端来主导的，前端可以对DOM进行操作。 后端的开发我们一般也称为服务器端开发。开发的数据不会对用户显示，主要是负责前端的请求，从而进行逻辑处理和数据的交互。例如上班的打卡信息，后端进行逻辑判断，是否在规定的时间、规定的地点进行打卡，若符合则将打卡的数据信息存储到数据库。简单来说，后端负责数据，前端负责其他工作，这种分工模式使得开发更加清晰也更加高效。随着基础设置的不断完善以及代码封装层级的不断提高，使得前端能够完成的事越来越多，这是技术积累的必然结果。前后端分离的好处是前端关注页面展现，后端关注业务逻辑，分工明确，职责清晰，前端工程师和后端工程师并行工作，大大提高了开发效率。
1.2 Vue.js介绍
随着Vue.js不断地完善，慢慢地适应了市场的需求，它深得开发者的喜爱。Vue.js建立于Angular和React的基础之上，保留了Angular和React的优点并强化了自身的独特之处，这保证了Vue.js足够的美好来吸引JS开发者的“胃口”。从JS前端框架的市场占有率和商业应用上讲，React仍占据很大的市场。但是毫无疑问，Vue.js不会消失，它正在持续地、一步步地被大家认可并付诸实践。事实上，据StateOfJS的调查结果显示，使用过Vue.js并将再次使用的开发者数量占比从2017年的19.6%上升到2018年的28.8%。在同一份调查的“用户满意度最高的前端框架”这一项上，Vue.js获得了91.2%的满意度。
1.2.1 Vue.js是什么
Vue.js是一款用于构建用户界面的渐进式框架。与其他大型框架不同的是，Vue被设计为自下向上逐层应用。Vue.js的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另外，当与现代化的工具链及各种支持类库结合使用时，Vue.js也完全能够为复杂的单页应用提供驱动。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。Vue.js是用于构建交互式的Web界面的库，它提供MVVM数据绑定和一个可组合的组件系统，具有简单、灵活的API。从技术上讲， Vue.js集中在MVVM模式上的视图模型层（ViewModel），并通过双向数据绑定连接视图（View）和模型（Model），实际的DOM操作和输出格式则被抽象出来构成指令和过滤器。相比其他的MVVM模式框架，Vue.js更容易上手，可以通过简单而灵活的API创建由数据驱
动的UI组件。
1.2.2 Vue.js发展历程
Vue.js正式发布于2014年2月，从脚手架、组件、插件，到编辑器工具、浏览器插件等，基本涵盖了Vue.js从开发到测试等多个环节的工具。
Vue.js的发展历程如下。
（1）2013年12月24日，发布v0.7.0。
（2）2014年1月27日，发布v0.8.0。
（3）2014年2月25日，发布v0.9.0。
（4）2014年3月24日，发布v0.10.0。
（5）2015年10月27日，正式发布v1.0.0。
（6）2016年4月27日，发布v2.0的Preview版本。
（7）2017年第一个发布的Vue.js为v2.1.9，最后一个发布的 Vue.js为v2.5.13。
（8）2019年发布的Vue.js为v2.6.10，是比较稳定的版本。
1.3 Vue.js中的开发模式
无论是前端还是后端开发，都有一定的开发模式。下面将介绍MVC模式（这种模式在Java后端开发中很常见）、MVP模式及Vue.js中常见的MVVM模式。
1.3.1 MVC模式介绍
MVC的英文全称是Model View Controller，它是一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特地发展起来，用于映射传统的输入、处理和输出功能在一个图形化用户界面的逻辑结构中。MVC开始是存在于桌面程序中的，M是指业务模型，V是指用户界面，C则是指控制器。使用MVC的目的是将M和V的实现代码分离，从而使同一个程序可以使用不同的表现形式。例如一批统计数据可以分别用柱状图、饼图来表示。C存在的目的则是确保M和V的同步，一 旦M改变，V应该同步更新。模型-视图-控制器（MVC）模式是Xerox PARC（施乐帕克研究中心）在20世纪80年代为编程语言Smalltalk-80发明的一种软件设计模式，已被广泛使用。后来被推荐为Oracle旗下Sun公司Java EE平台的设计模式，并且受到越来越多使用ColdFusion和PHP的开发者的欢迎。MVC模式也存在一定的优点和缺点。下面详细解析MVC。
（1）模型：模型表示企业数据和业务规则。在MVC的三个部件中，模型拥有最多的处理任务。例如，可能用像EJBs和ColdFusion Components这样的构件对象来处理数据库。被模型返回的数据是中立的，就是说模型与数据格式无关，这样一个模型可以为多个视图提供数据。由于应用于模型的代码只需编写一次就可以被多个视图重用，因此减少了代码的重复性。
（2）视图：视图是用户能看到并与其交互的界面。对以前的Web应用程序来说，视图就是HTML元素组成的界面；在现今的Web应用程序中，HTML依旧在视图中扮演着重要的角色，但一些新
的 技 术 已 层 出 不 穷 ， 它 们 包 括 Adobe Flash 和 像 XHTML 、XML/XSL、WML等一些标识语言与Web Services。MVC的优点是，它可以为应用程序处理多种不同的视图，而在视图中其实没有真正的处理发生。作为视图来讲，它只是作为一种输出数据并允许用户
操纵的方式。
（3）控制器：控制器接收用户的输入并调用模型和视图去完成用户的需求，所以当单击Web页面中的超链接和发送HTML表单时，控制器本身不输出任何内容和做任何处理。它只是接收请求并决定调用哪个模型构件去处理请求，然后确定用哪个视图来显示返回的数据。
1.3.2 MVP模式介绍
MVP的英文全称为Model View Presenter，它是从经典的MVC模 式 演 变 而 来 的 。 它 们 的 基 本 思 想 有 相 通 的 地 方 ： Controller/Presenter负责逻辑的处理，Model提供数据，View负责
显示。MVP从MVC演变而来，通过表示器将视图与模型巧妙地分开。在该模式中，视图通常由表示器初始化，它负责呈现用户界面 （UI），并接收用户所发出的命令，但不对用户的输入做任何逻辑处理，而仅仅是将用户输入转发给表示器。通常每一个视图对应一个表示器，但是也可能一个拥有较复杂业务逻辑的视图会对应多个表示器，每个表示器完成该视图的一部分业务处理工作，降低了单个表示器的复杂程度；一个表示器也能被多个有着相同业务需求的视图复用，增加单个表示器的复用度。表示器包含大多数表示逻辑，用以处理视图，与模型交互以获取或更新数据等。模型描述了系统的处理逻辑，但对于表示器和视图一无所知。
1．MVP模式的优点
MVP模式的优点体现在以下三个方面。
（1）View与Model完全隔离。Model和View之间具有良好解耦性的设计，这就意味着，如果Model或View中的一方发生变化，只要交互接口不发生变化，另一方就无须对上述变化做出相应的变化，这 使得Model层的业务逻辑具有很好的灵活性和可重用性。（2）Presenter与View的具体实现技术无关。也就是说，采用诸如Windows表单、WPF（Windows Presentation Foundation）
框架、Web表单等用户界面构建技术中的任意一种来实现View层，都无须改变系统的其他部分。甚至为了使B/S、C/S部署架构能够被同时支持，应用程序可以用同一个Model层适配多种技术构建的View层。
（3）可以进行View的模拟测试。由于View和Model之间的紧耦合，在Model和View同时开发完成前对其中一方进行测试是不可能的。出于同样的原因，对View或Model进行单元测试很困难。MVP模式解决了上述所有的问题。在MVP模式中，View和Model之间没有直接依赖，开发者能够借助模拟对象注入测试两者中的任意一方。
2．MVP模式与MVC模式的区别
MVP模式示意图如图1-1所示。作为一种新的模式，MVP与MVC有着一个重大的区别：在MVP中View并不直接使用Model，它们之间的通信是通过Controller来进行的，所有的交互都发生在Controller内部；而在MVC中View会直接从Model中读取数据，而不是通过Controller。在MVC中，View是可以直接访问Model的。View中会包含Model信息，不可避免地还要包括一些业务逻辑。在MVC模式中，更关注Model的不变，而同时有多个对Model的不同显示及View。所以在MVC模式中，Model不依赖于View，但View是依赖于Model的。不仅如此，因为有一些业务逻辑在View中实现，导致要更改View也是比较困难的，至少那些业务逻辑是无法重用的，代码复用率低
上一篇： CSS注入的四种实现
下一篇： 基于PHP视频点播在