内容简介
本书以一个多年前端“老司机”的视角,循序渐进地介绍当前流行的前端框架Vue.js 3的新特、各能及其在商业开发中的应用。全书共15章,第1~6章介绍Vue.js 3的模板、组件、交互处理等基础知识;第7章介绍Vue.js 3框架的响应式原理及组合式API;第8章介绍使用Vue.js 3框架开发前端动画效果;第9章介绍开发大型项目的脚手架工具VueCli和Vite;第10章介绍基于Vue.js 3的UI框架Element Plus;第11~13章分别介绍网络请求框架vue-axios、路由管理框架Vue Router、状态管理框架Vuex;第14章和第15章介绍两个相对完整的项目的开发,即学习网站和电商后台系统。本书试图介绍Vue.js 3全家桶及周边框架和工具的综合应用,旨在使读者通过阅读本书开发自己的应用程序。本书还在各章安排了小型范例和练习题,并提供了教学、源代码及PPT课件。 本书既可以入门,也可以进阶,适合Vue.js 3初学者和前端开发人员使用,也可以作为网课、培训机构与大中专院校的教学用书。
目录
章从前端基础到Vue.js3 1.1前端技术演进 1.2HTML入门 1.2.1准备开发工具 1.2.2HTML中的基础标签 1.3CSS入门 1.3.1CSS选择器入门 1.3.2CSS样式入门 1.4Javascript入门 1.4.1为什么需要Javascript 1.4.2Javascript语法简介 1.5渐进式开发框架Vue 1.5.1个Vue应用 1.5.2范例:实现一个简单的用户登录页面 1.5.3Vue3的新特 1.5.4为什么要使用Vue框架 1.6小结与练习 第2章Vue模板应用 2.1模板基础 2.1.1模板插值 ……
摘要与插图
1.pan style="font-family: 宋体;">前端技术演进
说起前端技术的发展历程,还是要从HTML说起。1990年12月,计算机学家Tim Berners-Lee使用HTML语言在NeXT计算机上部署了套由“主机-网站-浏览器”构成的Web系统我们通常认为这是世界上套完整的前后端应用,将其作为Web技术开发的开端。
1993年,款正式的浏览器Mosaic发布,1994年年底,W3C组织成立,标志着互联网进入了标准化发展的阶段,互联网技术迎来快速发展的春天。
1995年,网景公司推出Javascript语言,赋予了浏览器更强大的页面渲染与交互能力,使之前的静态网页开始真正地向动态化的方向发展,由此后端程序的复杂度大幅度提升,MVC开发架构诞生,其中前端负责MVC架构中的V(视图层)的开发。
2004年,Ajax技术在Web开发中得到应用,使得网页可以灵活地使用异步请求来动态地更新页面,复杂的渲染逻辑由之前的后端处理逐渐更替为前端处理,开启了Web2.0时代。由此,类似jQuery等多流行的前端DOM处理框架相继诞生,以其中流行的jQuery框架为例,其几乎成为网站开发的标配。
2008年,HTML5案发布,2014年10月,W3C正式发布HTML5Web Site向Web App进化,2010年开始相继出现了AngularJS、Vue JS等开发框架。这些框架的应用开启了互联网网站开发的SPA时代,即单页面应用程序时代(Single Page Application),这也是当今互联网Web应用开发的主流方向。
Ajax阶段、MVC阶段,终发展到了SPA阶段。
在静态页面阶段,前端代码只是后端代码中的一部分,浏览器中展示给用户的页面都是静态的,这些页面的所有前端代码和数据都是后端组装完成后发送给浏览器进行展示的,页面响应速度慢,只能处理简单的用户交互,样式也不够美观。
在Ajax阶段,前端与后端实现了部分分离。前端的工作不再仅仅是展示页面,还需要进行数据的管理与用户的交互。当前端发展到Ajax阶段时,后端更多的工作是提供数据,前端代码逐渐变得复杂。
随着前端要完成能越来越复杂,代码量也越来越大。应运而生的很多框架都为前端代码工程结构管理提供了帮助,这些框架大多采用MVC或MVVM模式,将前端逻纸中的数据模型、视图展示和业务逻辑区分开来,为更高复杂的前端工程提供了支持。
前端技术发展到SPA阶段则意味着网站不再单单用来展示数据,其是一个完整的应用程序,浏览器只需要加载一次网页,用户即可在其中完整使用多页面交互的复杂应用程序,程序的响应速度快,用户体验也好。
1.2 HTML 人门
首先,HTML是一种编程语言,是一种描述的网页编程语言。HTML的全称为Hyper TextMarkup Language,我们通常也将其称为超文本标记语言,所谓超文本,是指其除了可以用来描述文本信息外,还可以描述超出基础文本范围的图片、音频、等信息。
虽然说HTML是一种编程语言,但是从编程语言的特上来看,HTML并不是一种完整的编程语言,其并没有很强的逻辑处理能力,更确切的说法为HTML是一种标记语言,其定义了一套标记标签用来描述和控制网站的渲染。
标签是HTML语言中重要的一部分,标签是指由尖括围的关键词,例如<hl>、<html>等。在HTML文档中,大多数标签都是成对出现的,例如<h1></h1>,在一对标签中,前面的标签是开始标签,后面的标签是结束标签。例如是一个简单的HMTL文档示例:<html>
<body>
<hl>Hello World</h1>
<p>HelloWorld 网页</p>
</body>
</html>
上面的代码中共有4对标签:html、body、hl和p,这些标签的排布与嵌套定义了完整的HTML文档,终会由浏览器进行解析渲染。
1.2.pan style="font-family: 宋体;">准备开发工具
HTML文档本身也是一种文本,我们可以使用任何文本编辑器进行HTML文档的编写,只需使用.html文本后缀名即可。但是使用一个强大的HTML编辑器可以极大地提率,例如很多HTML编辑器都会提供代码提示、标签高亮、标签自动闭合能,这能都可以帮助我们在开发中十分快速地编写代码,并且可以减少因为笔误所产生的错误。
Visual Studio Code(VsCode)是一款强大的编辑器,其除了提供语法检查、格式整理、代码高亮等基础编程常用能外,还支持对代码进行调试和运行以及版本管理。通过安装扩展VSCode几乎可以支持目前所有流行的编程语言。本书示例代码的编写也将采用VSCode编辑器完成。你可以在官方网站(scode.visualstudio.com)下载新的VsCode编辑器。
目前,VSCode支持的操作系统有macOS、Windows和Linux,在网站中下载适合自己操作系统的VsSCode版本进行安装即可,如图1-1所示。



VIP会员