1. Introduction to the VUE.JS framework
The PDF of this document is available |HERE|`.
Examples from this document are available |HERE|.
This document is part of a series of four articles:
- |Introduction to ECMASCRIPT 6 through examples|;
- |Introduction to the VUE.JS framework through examples|. This is the current document;
- |Introduction to the NUXT.JS framework through examples|;
These are all documents for beginners. The articles follow a logical sequence but are loosely connected:
- document [1] introduces the PHP 7 language. Readers interested only in PHP and not in the JavaScript covered in the following articles should stop here;
- Documents [2–4] all aim to build a JavaScript client for the tax calculation server developed in document [1];
- The JavaScript frameworks [vue.js] and [nuxt.js] in Articles 3 and 4 require knowledge of the latest versions of ECMASCRIPT, specifically version 6. Document [2] is therefore intended for those unfamiliar with this version of JavaScript. It refers to the tax calculation server built in Document [1]. Readers of [2] will therefore occasionally need to refer back to document [1];
- once ECMASCRIPT 6 has been mastered, one can move on to the VUE.JS framework, which allows for the creation of JavaScript clients running in a browser in SPA (Single Page Application) mode. This is document [3]. It refers both to the tax calculation server built in document [1] and to the standalone JavaScript client code built in [2]. Readers of [3] will therefore sometimes need to refer to documents [1] and [2];
- Once you have mastered Vue.js, you can move on to the NuxT.js framework, which allows you to build JavaScript clients that run in a browser in SSR (Server-Side Rendered) mode. It refers to the tax calculation server built in document [1], the standalone JavaScript client code built in [2], and the [vue.js] application developed in document [3]. Readers of [4] will therefore occasionally need to refer to documents [1], [2], and [3];
The latest version of the tax calculation server developed in document [1] (see document |https://tahe.developpez.com/tutoriels-cours/php7|) can be improved in various ways:
- The current version is server-centric. The trend now (Sept. 2019) is toward client/server architecture:
- the server operates as a JSON service;
- A static or dynamic page serves as the entry point for the web application. This page contains HTML/CSS as well as JavaScript;
- the other pages of the web application are generated dynamically by JavaScript:
- the HTML page can be generated by assembling static or dynamic fragments, provided by the same server that served the entry page, or constructed by client-side JavaScript;
- These different pages display data requested from the JSON service;
Thus, the work is distributed between the client and the server. The server, having its load reduced, can serve more users.
The architecture corresponding to this model is as follows:
JS: JavaScript
The browser is the client:
- a service providing static or dynamic pages or fragments (not shown above);
- a JSON data service;
The JavaScript code is therefore a JSON client and, as such, can be organized into layers [UI, business logic, DAO] (UI: User Interface) just as our JSON clients written in PHP were. Ultimately, the browser loads only a single page, the home page. All others are fetched and rendered by JavaScript. This type of application is called an SPA: Single Page Application, or APU: Application à Page Unique.
This type of application is also part of what are known as AJAX applications: Asynchronous JavaScript and XML:
- Asynchronous: because the JavaScript client’s calls to the JSON server are asynchronous;
- XML: because XML was the technology used before the advent of JSON. However, the acronym AJAX has been retained;
We will examine this architecture in this document. On the client side, we will use the JavaScript framework [Vue.js] [https://vuejs.org/] to write the JavaScript client for the PHP JSON server that we described in document [1].
[Vue.js] is a JavaScript framework. We introduced the JavaScript language in document [2]. We will not conduct an exhaustive study of the [Vue.js] framework. We will simply present the concepts that will subsequently be used in writing a [Vue.js] client for the JSON version of version 14 of the tax calculation server (see |https://tahe.developpez.com/tutoriels-cours/php7|).
The scripts in this document are commented, and their console output is reproduced. Additional explanations are provided where necessary. This document requires active reading: to understand a script, you must read its code, comments, and execution results.
The examples in this document are available |HERE|.
The PHP 7 server application can be tested |here|.
Serge Tahé, October 2019