1. VUE.JS框架简介

本文档中的 PDF 已发布 |HERE|。

本文的示例可通过 |HERE| 获取。

本文属于四篇系列文章之一：

这些都是面向初学者的文档。各文章之间存在逻辑关联，但耦合度较低：

文档 [1] 介绍了 PHP 7 语言。仅对 PHP 语言感兴趣、而不关注后续文章中 JavaScript 语言的读者可止步于此；
[2-4]系列文档均旨在构建一个JavaScript客户端，用于连接[1]文档中开发的税费计算服务器；
第3和第4篇文章中提到的JavaScript框架[vue.js]和[nuxt.js]，需要了解ECMASCRIPT最新版本（即第6版）中的JavaScript内容。因此，文档 [2] 专为不熟悉该版本（JavaScript）的用户而设计。该文档引用了文档 [1] 中构建的税款计算服务器。阅读[2]文档的读者有时可能需要参考[1]文档；
一旦掌握了 ECMASCRIPT，就可以开始学习 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]（参见文档 |https://stahe.github.io/zh-php7-juillet-2019/|）中开发的最新版税费计算服务器可通过多种方式进行改进：

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

服务器以 jSON 服务形式运行；
无论是否为静态页面，该页面均作为Web应用程序的入口。该页面包含HTML/CSS，同时也包含JavaScript；
Web 应用程序的其他页面由 JavaScript 动态生成：
- HTML页面可通过组合静态或非静态片段生成，这些片段由提供登录页面的同一服务器提供，或由客户端的JavaScript构建；
- 这些不同的页面显示的数据由 jSON 服务提供；

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

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

JS：JavaScript

浏览器作为客户端：

一个提供静态或非静态页面或片段的服务（上图未显示）；
一个数据服务 jSON；

因此，代码 JavaScript 是 jSON 的客户端，因此可以像我们的 jSON 客户端（采用 [UI, métier, dao] （UI：用户界面），这与我们用PHP编写的jSON客户端的结构相同。最终，浏览器仅加载一个页面，即首页。所有其他页面均由 JavaScript 获取并构建。此类应用程序被称为 SPA：单页应用程序（Single Page Application），或 APU：单页应用程序。

此类应用也属于所谓的 AJAX：异步 JavaScript 与 XM：

异步：因为客户端 JavaScript 对 jSON 服务器的调用是异步的；
XML：因为XML是jSON出现前使用的技术。不过，我们保留了AJAX这个缩写；

本文将探讨此类架构。在客户端，我们将使用 JavaScript 框架 [Vue.js] [https://vuejs.org/] 来编写 jSON PHP 服务器的 JavaScript 客户端，该服务器已在文档 [1]文档中编写。

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

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

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

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

Serge Tahé，2019年10月