1. VUE.JS 框架入门

本文档的PDF版本可在此处获取 |HERE|。

本文档中的示例可在此处查看 |HERE|。

本文是四篇系列文章中的一篇：

|[通过示例了解 PHP7| ;

这些都是面向初学者的文档。文章遵循逻辑顺序，但彼此关联较为松散：

文档 [1] 介绍了 PHP 7 语言。仅对 PHP 感兴趣、而不关注后续文章中涉及的 JavaScript 的读者，请在此停止阅读；
文档 [2–4] 均旨在为文档 [1] 中开发的税费计算服务器构建一个 JavaScript 客户端；
第3和第4篇文档中涉及的JavaScript框架[vue.js]和[nuxt.js]需要掌握ECMASCRIPT的最新版本，特别是第6版。因此，文档[2]专为不熟悉该版本JavaScript的读者而设计。它引用了文档[1]中构建的税费计算服务器。因此，阅读[2]的读者偶尔需要回溯查阅文档[1]；
一旦掌握了 ECMASCRIPT 6，即可进阶学习 VUE.JS 框架，该框架支持创建在浏览器中以 SPA（单页应用程序）模式运行的 JavaScript 客户端。本文即为 [3]。它既涉及文档 [1] 中构建的税务计算服务器，也涉及 [2] 中构建的独立 JavaScript 客户端代码。因此，阅读[3]的读者有时需要参考文档[1]和[2]；
掌握 Vue.js 后，您可以继续学习 NuxT.js 框架，该框架支持构建在浏览器中以 SSR（服务器端渲染）模式运行的 JavaScript 客户端。本文涉及文档 [1] 中构建的税费计算服务器、文档 [2] 中构建的独立 JavaScript 客户端代码，以及文档 [3] 中开发的 [vue.js] 应用程序。因此，阅读[4]的读者有时需要参考文档[1]、[2]和[3]；

文档 [1] 中开发的税费计算服务器的最新版本（参见文档 |通过实例学习PHP7语言（2019）|）可以通过多种方式进行改进：

当前版本以服务器为中心。目前（2019年9月）的趋势是向客户端/服务器架构发展：

服务器作为 JSON 服务运行；
一个静态或动态页面作为Web应用程序的入口。该页面包含HTML/CSS以及JavaScript；
Web 应用程序的其他页面由 JavaScript 动态生成：
- HTML页面可通过组合静态或动态片段生成，这些片段由提供入口页面的同一服务器提供，或由客户端JavaScript构建；
- 这些不同的页面显示从 JSON 服务请求的数据；

因此，工作在客户端和服务器端之间进行了分配。服务器负载减轻后，能够服务更多的用户。

与该模型对应的架构如下：

JS：JavaScript

浏览器是客户端：

提供静态或动态页面或片段的服务（上文未展示）；
一个 JSON 数据服务；

因此，JavaScript 代码即为一个 JSON 客户端，因此可以像我们用 PHP 编写的 JSON 客户端一样，组织为 [UI、业务逻辑、DAO] 层（UI：用户界面）。最终，浏览器仅加载一个页面，即首页。其余所有页面均由 JavaScript 获取并渲染。此类应用程序被称为 SPA：单页应用程序，或 APU：单页应用程序。

此类应用程序也属于所谓的 AJAX 应用程序：异步 JavaScript 和 XML：

异步：因为 JavaScript 客户端对 JSON 服务器的调用是异步的；
XML：因为在 JSON 出现之前，XML 是被广泛采用的技术。不过，AJAX 这个缩写词至今仍被沿用；

本文将探讨这种架构。在客户端，我们将使用 JavaScript 框架 [Vue.js] [https://vuejs.org/] 编写针对文档 [1] 中所述 PHP JSON 服务器的 JavaScript 客户端。

[Vue.js] 是一个 JavaScript 框架。我们在文档[2]中介绍了JavaScript语言。我们不会对[Vue.js]框架进行详尽的研究，仅介绍后续编写税务计算服务器第14版JSON版本的[Vue.js]客户端时将用到的概念（参见 |https://tahe.developpez.com/tutoriels-cours/php7|）。

本文档中的脚本均附有注释，并重现了其控制台输出结果。必要时会提供补充说明。阅读本文档需要主动思考：要理解一个脚本，必须阅读其代码、注释和执行结果。

本文中的示例可在此处获取 |HERE|。

PHP 7 服务器应用程序可 |在此| 进行测试。

Serge Tahé，2019年10月