第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也是比较困难的,至少那些业务逻辑是无法重用的,代码复用率低