Vu基础及其开发7

学习书籍的基础掌握前端基础技术，包括HTML、CSS和JavaScript；熟悉前端开发的基本概念和技术，例如DOM操作、浏览器事件、异步编程、ES6+语法等。熟练前端的常用工具，如开发工具VisualStudioCode（或WebStorm、HBuilderX）、浏览器开发者工具、CSS预处理（如：Sass、Less和Stylus）等。第一章初识Vue.js学习目标了解前端技术的发展和前端主流框架熟悉前端架构模式的发展熟悉Vue设计思想和特点以及Vue3的新特性掌握Vue的安装和使用前端技术作为互联网技术中重要组成部分，近些年正在不断的发展。前端开发所设计到的领域范围越来越广，已不仅仅局限于浏览器的呈现，还包括微信小程序、移动端App开发等。并且前端开发处理的业务也越来越多，网页也变得越来越丰富和动态化，这一切都离不开前端技术的核心JavaScript技术。JavaScript的出现使得网页变得更加的动态化和强大，但是现在开发模式中基本上都是前后端分离开发的，以前很多服务端代码的逻辑也放到了前端进行处理，这就导致了前端需要写大量的的JavaScript代码来操作HTML和CSS，如果没有一个标准的组织形式，那么开发一个前端网站是一件极其痛苦的事情。所以现在的前端开发者都会选择使用前端的各种JavaScript框架来实现简单、高效的开发，常见的框架有React、Angular等，而Vue.js也是最主流的框架之一，这也是本书详细讲解Vue.js的原因。前端技术的发展12前端主流框架介绍3前端架构模式4Vue.js的使用5Vue.js介绍前端技术的发展1、前端的起源自1946年世界上第一台计算机“ENIAC”诞生以来，标志着电脑时代的到来。在随后的几十年里，不断涌现出Unix、Linux、MacOS、Windows等操作系统，以及B语言、C语言、C++等编程语言。1989年，英国计算机科学家TimBerners-Lee（蒂姆·伯纳斯·李）在CERN(欧洲粒子物理实验室)为了方便科学家们之间看文档、传论文而发明了万维网（WorldWideWeb，简称WWW）。1990年，蒂姆·伯纳斯·李和同事发明了HTML语言，并使用HTML通过Internet实现了HTTP代理与服务器的第一次通讯，这也是世界上第一套具备前后端的web系统。1991年8月6日，世界上第一个站点info.cern.ch上网，该站点主要介绍万维网是什么、如何使用网页浏览器、如何如何建立一个网页服务器等。1994年10月蒂姆·伯纳斯·李在麻省理工学院成立了万维网联盟W3C，并开始制定web标准规范；同年美国Netscape网景公司推出了第一版Navigator，哈坤·利提出了CSS设计建议。前端技术的发展1995年Netscape的布兰登·艾奇发明了网页编程语言JavaScript，实现了对网页的动态交互和渲染，它的出现使得网页开始从静态页面向动态化发展。JavaScript发展初期并没有指定标准，所以当时除了Netscape的JavaScript外，还有微软的JScript和CEnvi的ScriptEase形成了三足鼎立局面。

1996年11月，Netscape决定将JavaScript提交给国际标准化组织ECMA（前身为欧洲计算机制造商协会）希望JavaScript能够成为国际标准。1997年，在ECMA的协调下，由Netscape、Sun、微软、Borland共同确定了一个统一标准：ECMA-262，规定了浏览器脚本语言的标准，并将这种标准称为ECMAScript。现在，完整的JavaScript实现由三个部分组成：ECMAScript、文档对象模型（DOM）和浏览器对象模型（BOM）。随着时间的推移，HTML、CSS和ECMAScript标准得到了不断更新和改进。这三个技术已成为前端开发的核心技术，扮演着至关重要的角色。前端技术的发展2、从未分离的前后端开发到前后端分离开发前后端未分离时代：在互联网发展早期，HTML、CSS和JavaScript技术已经问世，但开发出的页面却依然是静态的，即页面中展示的数据都是固定的。如若想要实现动态网站，就需要借助服务器端技术，比如JSP、PHP、ASP等，来生成动态页面。那时候的前后端开发是紧密结合的，前端代码是后端代码的一部分。前端使用HTML、CSS和JavaScript技术编写静态模板，后端使用模板组装数据并将其返回给浏览器进行展示。这种做法的缺点在于，由于需要服务端返回整个页面内容，响应速度就较慢。而且，只要页面中有数据改变，就需要重新加载整个页面的内容。Ajax的诞生：2005年Ajax被JesseJamesGarrett正式提出，并且Ajax技术已经应用到了Google的Gmail、GoogleMap等应用中被引起广泛的重视。Ajax允许JavaScript脚本发送HTTP请求给服务端，并把服务端返回的数据使用JavaScript渲染更新页面，而不需要重载整个页面，这使得程序能够更快地回应用户的操作。前端技术的发展前后端分离时代：随着Ajax技术的问世，前端开始独立处理数据渲染逻辑，不再依赖于JSP等服务端动态页面技术，而后端只需要关注数据的提供。因此，前后端开始出现了明确的分工，前端开始独立进行开发、测试和部署，技术也得到了快速的发展。为了提高代码复用性、维护性和按需加载等，模块化开发应运而生。随后，随着前端实现的功能越来越复杂，大量采用MVC或MVVM架构模式的框架出现了。此外，前端也逐渐走向工程化阶段，从多页面网页应用到SPA单页面应用，再到服务端渲染技术SSR等技术层出不穷。前端技术的发展12前端主流框架介绍3前端架构模式4Vue.js的使用5Vue.js介绍前端主流框架介绍尽管使用HTML、CSS、JavaScript也能开发网站，但是大型商业应用的功能和代码量非常的庞大，其交互逻辑也十分复杂繁琐。因此，为了快速、高效地开发应用并提高其灵活性和可扩展性，采用前端优秀框架成为了不错的选择。由于不同用途需要，前端涌现出各种框架，而当前最主流的三大框架分别为Vue、React和AngularJS

。前端主流框架介绍1、AngularJSAngularJS诞生于2009年，，后为Google所收购。AngularJS是一个以JavaScript编写的应用设计框架与开发平台，用于创建高效、复杂、精致的单页面应用，通过新的属性和表达式扩展了HTML，实现一套框架支持多种平台，适用于移动端和PC端。AngularJS有着诸多特性，最为核心的是：MVVM、自动化双向数据绑定、语义化标签等。Angular是AngularJS的重写，区别于AngularJS的是它使用的是TypeScript语言编写，它采用了现代化的架构模式，包括组件化、服务、依赖注入、模块化等，并且还提供了更好的性能和安全性，以及大量的工具和库来帮助开发人员更快地构建应用程序。前端主流框架介绍2、ReactReact是由Facebook开发和开源的一个可以简单快捷构建用户界面的前端框架，它使用JSX（JavaScriptXML，在JavaScript代码中写XML/HTML格式的代码）语法，主要用于单页面应用程序的开发，性能出众。React的核心概念是组件化，将复杂的UI分解成组件，并组合成树形结构通过构建虚拟的DOM对象，对多次DOM操作进行一次性更新以实现快速的渲染，并且组件也可以复用和嵌套使用；React具有非常好的灵活性，可以与已知的库或框架很好地配合。前端主流框架介绍3、VueVue.js是一款渐进式JavaScript框架，用于构建用户界面。它继承了Angular和React的许多特点（如VirtualDOM、双向数据绑定、响应式属性和组件化开发），并对其进行了改进和优化。Vue采用了自底向上增量开发的设计思路，使得开发人员可以根据需要逐步引入其功能和库。Vue的核心库只关注视图层，易于学习，同时也很容易与其它库或已有项目整合。除此之外，Vue的单文件组件和其生态系统支持库也可以用于开发复杂的单页应用。由于Vue具有轻量级、易用性和灵活性等特点，因此在前端开发中广受欢迎。前端技术的发展12前端主流框架介绍3前端架构模式4Vue.js的使用5Vue.js介绍前端架构模式随着前端业务需求的增多，软件的规模和复杂度也不断增加。在这种情况下，若没有一套完整的架构设计，开发难度将会极大。在开发中，我们一直遵循“高内聚低耦合”的原则。因此，在架构设计上，我们必须考虑解耦，将应用的数据、视图和逻辑进行分离，以提高代码的复用性、可读性和可维护性。下面我们介绍下前端开发的软件架构模式。前端架构模式1、MVC模式MVC是早期最常见的一种架构模式，很多的框架也是MVC架构的。最早是在前后端没有分离的时候，因为前端是属于后端的一部分，后端为了解耦分离而设计出了MVC的模式，之后前端借鉴后端也设计出了MVC的模式来用。MVC中，M指的是Model数据模型，V指的是View视图展示，C指的是Controller控制器。三者之间的交互方式如图1-1所示。在图中View接收到了用户行为然后传递给Controller控制器，控制器完成业务逻辑通知Model改变状态，Model会请求后端API返回数据然后将返回后的数据发送给View更新视图展示给用户。在MVC中Controller担任Model与View之间的桥梁，用于控制程序的逻辑流程。图1-1前端架构模式当然如果有用户操作了，那么MVC的交互方式也可能是如图1-2和图1-3所示。图1-3图1-2前端架构模式2、MVVM模式MVVM（Model-View-ViewModel）,用ViewModel代替了Controller，MVVM的核心思想是可以实现DOM的自动更新。它基于数据绑定，将视图与数据状态解耦。当View中数据变化时将自动反映到ViewModel上，ViewModel会把View的变化同步到Model中，反之，Model中数据变化也会通过ViewModel同步到View上显示出来，如图1-4所示。图1-4MVVM真正意义上的实现了View和Model层的解耦，使得视图的开发和数据状态改变进行解耦，让开发者更加专注于业务逻辑的实现，提高了代码的复用性、可读性和可维护性。同时，前端框架如Vue和React等的出现也为MVVM模式的实现提供了强有力的支持，让前端应用的开发更加高效和便捷。前端技术的发展12前端主流框架介绍3前端架构模式4Vue.js的使用5Vue.js介绍Vue.js介绍1、Vue.js简介Vue.js（以下简称为Vue，读音为/vjuː/，类似view）官方定义为一个渐进式的用于构建用户界面的JavaScript框架，具有很强的可维护性和可测试性。与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用，Vue的核心库只关注视图层，开发者可以使用Vue完整框架加上第三方库进行灵活的开发，也可以在任何项目中把Vue部分功能作为WebComponents进行嵌入以带来更加丰富的交互体验。Vue的核心库及其生态系统完全能够为复杂的单页应用提供驱动，如使用VueRouter可以实现单页面路由、VueX或Pinia可以实现状态管理，使用完整的工具链可以让开发者简单快速的完成项目的构建和部署。Vue.js介绍Vue基于标准的HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，可以帮助开发者高效地开发用户界面。Vue的一些主要特点如下：简单易学：只要熟悉HTML、CSS、JavaScript知识，就可以快速上手Vue，学习成本低。双向数据绑定：Vue基于MVVM模式设计，这样不管是数据或者视图发生了改变都会同步到另一层进行改变，典型的就是表单数据绑定的使用。组件化：组件系统是vue中的一个重要概念，它允许我们使用小型、独立和通常可复用的组件构建大型应用；并且vue支持单文件组件每个vue文件都是一个独立组件，在文件内都包涵了属于组件自己的HTML、CSS（或SCSS）、JavaScript结构。声明式渲染：Vue基于标准HTML拓展了一套模板语法，使得我们可以声明式地描述最终输出的HTML和JavaScript状态之间的关系。响应式：Vue会自动跟踪JavaScript状态并在其发生变化时响应式地更新DOM。指令化：Vue提供了很多的v-前缀的指令，当然开发者也可以自定义指令，这些指令都可以绑定到元素上给元素赋予不同的响应行为。插件化：Vue提供了对插件的支持，只要通过use方式安装了插件就可以全局使用，非常方便，例如：VueRouter、VueX、Axios插件等；Vue.js介绍2、Vue的发展史2013年的时候Google打造的AngularJS大概是成长速度最快的Javascript框架了，它具有基于MVVM模式、具备强大的数据绑定和依赖注入功能等特点，让其成为了构建前端大型应用的一个非常不错的选择。2013年，在Google工作的尤雨溪，受到Angular的启发，开发出了一款轻量级框架，并首次提交到GitHub上当时的名字叫Element后来更名为Seed.js。2013年12月7日，尤雨溪发布版本0.6.0并正式更名为Vue.js。2014年，Vue正式对外发布，并发布了版本号0.8.0、0.9.0，也有了自己的代号：Animatrix，此后，重要的版本都会有自己的代号。2015年6月，代号DragonBall的0.12.0版本在Laravel社区首次使用，从此Vue便在JS社区打响了知名度。 Vue.js介绍2015年10月26日，Vue发布了第一个里程碑版本号1.0.0Evangelion。同年VueRouter、Vuex、Vue-cli相继发布，标志着Vue从一个视图层库发展为一个渐进式框架。2016年10月1日，Vue.js发布2.0版本，它吸收了React的虚拟DOM方案，还支持服务端渲染。自从Vue2.0发布之后，Vue就成了前端领域的热门话题。2019年12年5日，在万众期待中，尤雨溪公布了Vue3源代码，此时的Vue3仍处于Alpha版本。2020年09月18日，Vue.js3.0正式发布。2022年2月7日，Vue3成为新的默认版本。 Vue.js介绍3、Vue3新特性Vue3的发布是对Vue框架的一次重大改造，当然在使用上大部分其实跟Vue2还是一致的，只是添加了部分新的支持或改变。主要改变如下：更好的Typescript支持，Vue3是基于TypeScipt编写的所以支持Typescript语法的使用；移除了一些不常用的API，如inline-template，filter过滤器；新增了一些基于函数的API；通过对虚拟DOM优化、编译模块的优化、SSR渲染的优化等使得Vue3的性能更高，运行速度更快；通过对Tree-Shaking的支持，让模块可以按需引入，项目打包体积更小；新增CompositionAPI（组合API）实现了逻辑的复用，并且更易维护；响应式系统的核心由defineProperty换成了Proxy代理对象；生命周期函数发生了改变，周期函数setup代替了beforeCreate和created，beforeDestroy改名为beforeUnmount、destoryed改名为unmounted，并添加了生命周期相关函数的组合式API；... Vue.js介绍同样Vue3的改变对于其工具链和第三方库的影响也是有的，之前很多对Vue2支持的各种插件也发生了一些改变，主要有以下几个：生态系统提供了新的项目构建工具Vite，Vue2版本的构建工具为Vue-CLI,当然Vue3项目依然可以使用Vue-CLI进行构建；Vue常用的UI框架Element发布了对于Vue3支持的ElementPlus；提供了新的状态管理工具Pinia，Vue2版本的状态管理工具为VueX，同样Vue3中依然可以使用VueX；... 前端技术的发展12前端主流框架介绍3前端架构模式4Vue.js的使用5Vue.js介绍Vue.js的使用1、开发工具的选择选择一个得心应手的开发工具可以大大提高我们的开发效率，前端的开发工具有很多，下面我们介绍几个主流的前端开发工具。WebStormWebStorm是JetBrains公司旗下一款JavaScript 开发工具,功能齐全,集成度高，内置服务器调试，ESlint，代码补全，Emmet语法,ECMAScript6(以下简称为ES6)语法支持等，但是WebStorm的正版是收费的，并且运行占用的内存比较的高。Vue.js的使用VisualStudioCode简称VSCode，是微软旗下的一款轻量级免费开源的开发工具，支持多个平台和多种语言的开发，体积小，占用内存小，功能齐全，页面简洁。并且VSCode也提供丰富的插件能够满足日常开发的需要，非常受开发的喜爱。HBuilderX

HBuilderX是一款Vue官方推荐的国内开发工具，具有编码速度快、强大的语法提示、专为vue打造、提供优秀的vue支持等优点。然而，目前HBuilderX的生态仍有待进一步发展。除此之外，还有一些其他的轻量好用的工具，如：SublimeText等，本书中将使用VSCode作为前端的开发工具。Vue.js的使用2、Vue.js的安装和引入Vue提供多种安装和引入方式，方便开发者在多页面应用的HTML中或单页应用中引入使用。<script>引入如果是在HTML页面中使用Vue，可以直接从Vue官网下载Vue.js的开发版本或生产版本（vue.min.js），并通过<script>标签进行引入。Vue.js的开发版本包含了调试信息和警告，可在开发环境中使用；而生产版本则剔除了调试信息和警告，文件体积更小，适合在生产环境中使用。也可以通过CDN的方式引入，这里我们使用unpkg提供的CDN地址。Vue.js的使用使用ES模块构建版本开发者也可以通过ES模块语法的import引入Vue。使用NPM安装在使用Vue构建大型应用时推荐使用NPM安装。NPM能很好地和诸如webpack或Browserify模块打包器配合使用。同时Vue也提供配套工具来开发单文件组件。如果想要使用NPM安装Vue，需要准备Node.js环境（参考章节7.2）。此外，还可以利用Vue官方提供的构建工具，例如VueCLI和Vite，来构建项目。构建的项目已经自动安装和引入了Vue，可以直接使用。npminstallvueVue.js的使用3、第一个Vue应用—HelloWorld熟