目錄一、【React】基本用法顯著特點(diǎn)類組件虛擬 DOM生命周期方法JSXJavaScript表達(dá)式超越HTML的架構(gòu)React HooksHooks規(guī)則常用術(shù)語(yǔ)Flux架構(gòu)的使用歷史常用命令二、【Angular】Angular和AngularJS的區(qū)別歷史組件化數(shù)據(jù)管理常用命令三、【Vue】概述歷史組件化模板反應(yīng)式系統(tǒng)變換效果路由生態(tài)系統(tǒng)官方工具官方程序庫(kù)常用命令四、【小結(jié)】一、【React】

React（也被稱為React.js或ReactJS）是一個(gè)用于構(gòu)建用戶界面的JavaScript庫(kù)。它由Facebook和一個(gè)由個(gè)人開(kāi)發(fā)者和公司組成的社區(qū)來(lái)維護(hù)。

React可以作為開(kāi)發(fā)單頁(yè)或移動(dòng)應(yīng)用的基礎(chǔ)。然而，React只關(guān)注向DOM渲染數(shù)據(jù)，因此創(chuàng)建React應(yīng)用通常需要使用額外的庫(kù)來(lái)進(jìn)行狀態(tài)管理和路由，Redux和React Router分別是這類庫(kù)的例子。

基本用法

下面是一個(gè)簡(jiǎn)單的React在HTML中使用JSX和JavaScript的例子。

Greeter函數(shù)是一個(gè)React組件，它接受一個(gè)屬性問(wèn)候語(yǔ)。變量App是Greeter組件的一個(gè)實(shí)例，其中問(wèn)候語(yǔ)屬性被設(shè)置為 'Hello World！'。然后，ReactDOM.render方法將我們的Greeter組件渲染在DOM元素（id為 myReactApp）中。

在web瀏覽器中顯示時(shí)，結(jié)果將是：

顯著特點(diǎn)

組件化

React代碼由稱為組件的實(shí)體組成。組件可以使用React DOM庫(kù)渲染到DOM中的一個(gè)特定元素。當(dāng)渲染一個(gè)組件時(shí)，可以傳入被稱為 'props '的值。

React中聲明組件的兩種主要方式是通過(guò)功能函數(shù)組件和基于類的組件。

功能函數(shù)組件

功能組件是用一個(gè)函數(shù)聲明，用來(lái)返回一些JSX。

類組件

基于類的組件是使用ES6類來(lái)聲明的。它們也被稱為 '有狀態(tài) '組件，因?yàn)樗鼈兊臓顟B(tài)可以在整個(gè)組件中保持，并且可以通過(guò)props傳遞給子組件。

虛擬 DOM

另一個(gè)值得注意的特點(diǎn)是React使用了虛擬文檔對(duì)象模型，也就是虛擬DOM。React創(chuàng)建了一個(gè)內(nèi)存中的數(shù)據(jù)結(jié)構(gòu)緩存，計(jì)算得出變化差異，只渲染實(shí)際變化的子組件, 從而高效地更新瀏覽器顯示的DOM。

生命周期方法

生命周期方法是指在組件的生命周期內(nèi)，允許在設(shè)定的點(diǎn)執(zhí)行代碼的hooks處理函數(shù)。

shouldComponentUpdate允許開(kāi)發(fā)者在不需要渲染的情況下，通過(guò)返回false來(lái)防止不必要的重新渲染組件。 componentDidMount是在組件 '掛載 '后調(diào)用的（組件已經(jīng)在用戶界面中創(chuàng)建了，通常是通過(guò)將其與DOM節(jié)點(diǎn)關(guān)聯(lián)起來(lái)）。這通常用于通過(guò)API從遠(yuǎn)程數(shù)據(jù)源觸發(fā)數(shù)據(jù)加載。 componentWillUnmount是在組件被拆解或 '解掛 '之前立即調(diào)用的。這通常用于清除組件的資源依賴關(guān)系，這些依賴關(guān)系不會(huì)隨著組件的卸載而簡(jiǎn)單地被移除（例如，移除任何與組件相關(guān)的setInterval()實(shí)例，或者因?yàn)榻M件的存在而在 '文檔 '上設(shè)置的 'eventListener'）。 render是最重要的生命周期方法，也是任何組件中唯一必須存在的方法。它通常在每次更新組件的狀態(tài)時(shí)都會(huì)被調(diào)用。JSX

JSX，即JavaScript XML，是對(duì)JavaScript語(yǔ)言語(yǔ)法的擴(kuò)展。JSX在外觀上類似于HTML，它提供了一種開(kāi)發(fā)者熟悉的語(yǔ)法結(jié)構(gòu)化組件渲染的方法。React組件通常是使用JSX編寫(xiě)的，盡管不一定非要使用JSX（組件也可以用純JavaScript編寫(xiě)）。JSX類似于Facebook為PHP創(chuàng)建的另一種名為XHP的擴(kuò)展語(yǔ)法。

JSX代碼的一個(gè)例子:

嵌套元素

同一層次上的多個(gè)元素需要被包裹在一個(gè)容器元素中，如上圖中的<div>元素。

屬性

JSX提供了一系列的元素屬性，旨在對(duì)應(yīng)HTML提供的屬性。這些自定義的屬性也可以傳遞給組件，所有的屬性都會(huì)被組件作為props接收。

JavaScript表達(dá)式

JavaScript表達(dá)式（但不是語(yǔ)句）可以在JSX內(nèi)部通過(guò)大括號(hào){}使用。

上面代碼的顯示結(jié)果是：

條件語(yǔ)句

If-else語(yǔ)句不能在JSX中使用，但可以使用條件表達(dá)式來(lái)代替。下面的例子當(dāng)i為1時(shí)將 { i === 1 ? ’true’ : ’false’ } 呈現(xiàn)為字符串 ’true’。

結(jié)果會(huì)是：

函數(shù)和JSX可以用于條件表達(dá)式中:

結(jié)果會(huì)是：

用JSX編寫(xiě)的代碼需要被Babel等工具進(jìn)行轉(zhuǎn)換以后才能被Web瀏覽器所理解，這種處理一般是在軟件構(gòu)建過(guò)程中進(jìn)行的，然后再部署構(gòu)建后的應(yīng)用程序。

超越HTML的架構(gòu)

React的基本架構(gòu)不僅僅適用于在瀏覽器中渲染HTML。例如，F(xiàn)acebook有動(dòng)態(tài)圖表，可以渲染到<canvas>標(biāo)簽，而Netflix和PayPal使用通用加載，在服務(wù)器和客戶端上渲染相同的HTML。

React Hooks

Hooks是讓開(kāi)發(fā)者從函數(shù)組件中 '鉤入'React狀態(tài)和生命周期特性的函數(shù)。它們使代碼具有更強(qiáng)的可讀性且更易理解。Hooks并不在類組件內(nèi)工作，它的終極目標(biāo)是在React中消除類組件的存在。

React提供了一些內(nèi)置的Hooks，如useState、useContext、useReducer和useEffect等。它們都在Hooks API參考書(shū)中做了說(shuō)明。使用最多的是useState和useEffect，分別在React組件中控制狀態(tài)和檢測(cè)狀態(tài)變化。

Hooks規(guī)則

Hooks也有一些規(guī)則，在使用Hooks之前必須遵循這些規(guī)則:

鉤子只能在頂層調(diào)用（不能在循環(huán)或if語(yǔ)句中調(diào)用）。 鉤子只能在React函數(shù)組件中調(diào)用，不能在普通函數(shù)或類組件中調(diào)用。定制Hooks

構(gòu)建自己的Hooks，也就是所謂的自定義Hooks，可以讓你把組件邏輯提取到可重用的函數(shù)中。自定義鉤子是一個(gè)名稱以 'use '開(kāi)頭的JavaScript函數(shù)，它可以調(diào)用其他的鉤子。鉤子的規(guī)則也適用于它們。

常用術(shù)語(yǔ)

React并沒(méi)有試圖提供一個(gè)完整的 '應(yīng)用程序庫(kù)'。它是專門(mén)為構(gòu)建用戶界面而設(shè)計(jì)的，因此并不包括許多一些開(kāi)發(fā)者認(rèn)為構(gòu)建應(yīng)用程序所需的工具。這使得開(kāi)發(fā)者可以選擇任何一個(gè)庫(kù)來(lái)完成諸如執(zhí)行網(wǎng)絡(luò)訪問(wèn)或本地?cái)?shù)據(jù)存儲(chǔ)等任務(wù)。這種情況也就決定了React技術(shù)在創(chuàng)建網(wǎng)頁(yè)應(yīng)用時(shí)標(biāo)準(zhǔn)無(wú)法統(tǒng)一。

Flux架構(gòu)的使用

為了支持React的單向數(shù)據(jù)流的概念（與AngularJS/Angular的雙向數(shù)據(jù)流形成對(duì)比），F(xiàn)lux架構(gòu)是流行的模型-視圖-控制器(MVC)架構(gòu)的具有代表性的替代方案。Flux的特點(diǎn)是，數(shù)據(jù)動(dòng)作通過(guò)中央調(diào)度器發(fā)送到一個(gè)存儲(chǔ)倉(cāng)庫(kù)，而對(duì)存儲(chǔ)倉(cāng)庫(kù)數(shù)據(jù)的變化會(huì)被傳送回視圖。當(dāng)與React一起使用時(shí)，這種傳送是通過(guò)組件屬性完成的。

Flux可以被認(rèn)為是觀察者模式的一個(gè)變種。

Flux架構(gòu)下的React組件不應(yīng)該直接修改傳遞給它的任何props，而是應(yīng)該傳遞回調(diào)函數(shù)，這些回調(diào)函數(shù)可以創(chuàng)建由調(diào)度器發(fā)送的數(shù)據(jù)動(dòng)作來(lái)修改存儲(chǔ)倉(cāng)庫(kù)。數(shù)據(jù)動(dòng)作是一個(gè)對(duì)象，其職責(zé)是描述已經(jīng)發(fā)生的事情：例如，一個(gè)數(shù)據(jù)動(dòng)作描述的是一個(gè)用戶 'follow'另一個(gè)用戶。它可能包含如下數(shù)據(jù)：

用戶ID，

目標(biāo)用戶ID，

以及USER_FOLLOWED_ANOTHER_USER枚舉類型。

存儲(chǔ)倉(cāng)庫(kù)，是一個(gè)數(shù)據(jù)模型，可以根據(jù)從調(diào)度器接收到的數(shù)據(jù)動(dòng)作來(lái)改變自己。

這種模式有時(shí)被表述為 '屬性向下流動(dòng)，數(shù)據(jù)動(dòng)作向上流動(dòng)'。自Flux誕生以來(lái)，F(xiàn)lux的許多實(shí)現(xiàn)被創(chuàng)造出來(lái)，其中最著名的是Redux，它的特點(diǎn)是單一的存儲(chǔ)倉(cāng)庫(kù)，通常被稱為單一的數(shù)據(jù)真相源。

歷史

React是由Facebook的軟件工程師Jordan Walke創(chuàng)建的，受PHP的HTML組件庫(kù)XHP的啟發(fā)，發(fā)布了React的早期原型，名為 'FaxJS'，。它于2011年首次部署在Facebook的News Feed上，后來(lái)于2012年部署在Instagram上。2013年5月在美國(guó)JSConf大會(huì)上開(kāi)源。

React Native是2015年2月在Facebook的React Conf上宣布的，2015年3月開(kāi)源的React Native，實(shí)現(xiàn)了原生的Android、iOS和UWP開(kāi)發(fā)。

2017年4月18日，F(xiàn)acebook宣布了React Fiber，這是React庫(kù)的一個(gè)新的核心算法，用于構(gòu)建用戶界面，React Fiber將成為React庫(kù)未來(lái)任何改進(jìn)和功能開(kāi)發(fā)的基礎(chǔ)。

2017年9月26日，React 16.0正式對(duì)外發(fā)布。

2019年2月16日，React 16.8正式對(duì)外發(fā)布，該版本引入了React Hooks。

常用命令

創(chuàng)建工程：

npx create-react-app my-app

開(kāi)發(fā)環(huán)境運(yùn)行：

npm start

生產(chǎn)環(huán)境打包：

npm run build

【官方網(wǎng)站】

http://reactjs.org/

【最新版本】

16.13.1于2020年3月19日

【授權(quán)】

MIT License

二、【Angular】

Angular（通常被稱為 'Angular 2+'或 'Angular v2及以上版本'）是一個(gè)基于TypeScript的開(kāi)源Web應(yīng)用框架，由Google的Angular團(tuán)隊(duì)和由個(gè)人以及企業(yè)組成的社區(qū)領(lǐng)導(dǎo)。 Angular是由構(gòu)建AngularJS的同一個(gè)團(tuán)隊(duì)從零開(kāi)始重寫(xiě)的。

Angular和AngularJS的區(qū)別 Angular沒(méi)有 'Scope'或控制器的概念，相反，它使用組件的層次結(jié)構(gòu)作為其主要的架構(gòu)特征。 Angular有不同的表達(dá)式語(yǔ)法，重點(diǎn)是'[]'用于屬性綁定，'() '用于事件綁定 模塊化 - 許多核心功能已轉(zhuǎn)移到模塊上 Angular推薦使用微軟的TypeScript語(yǔ)言，它引入了以下特性。

（1）靜態(tài)鍵入，包括Generics

（2）注解

TypeScript是ECMAScript 6 (ES6)的超集，向后兼容ECMAScript 5（即：JavaScript）。 動(dòng)態(tài)加載 異步模板編譯 由RxJS提供的迭代回調(diào)。RxJS限制了狀態(tài)的可見(jiàn)性和調(diào)試，但這些問(wèn)題可以通過(guò)像ngReact或ngrx這樣的反應(yīng)式附加組件來(lái)解決。 支持Angular Universal，可以在服務(wù)器上運(yùn)行Angular應(yīng)用程序。歷史

命名

最初，AngularJS的重寫(xiě)被稱為 'Angular 2'，但這導(dǎo)致了開(kāi)發(fā)人員的迷糊。為了澄清，團(tuán)隊(duì)宣布，每個(gè)框架使用不同的術(shù)語(yǔ)，其中 'AngularJS '指的是1.X版本， 'Angular ' 指的是2及以上版本。

版本2

Angular 2.0在2014年10月22-23日的ng-Europe大會(huì)上宣布。2.0版本的劇烈變化在開(kāi)發(fā)者中引起了相當(dāng)大的爭(zhēng)議。

2015年4月30日，Angular開(kāi)發(fā)者宣布Angular 2從Alpha轉(zhuǎn)為開(kāi)發(fā)者預(yù)覽版，2015年12月Angular 2轉(zhuǎn)為Beta版，2016年5月發(fā)布了第一個(gè)發(fā)布候選版本，2016年9月14日發(fā)布了最終版本。

版本4

2016年12月13日Angular 4發(fā)布，跳過(guò)了3，避免了因路由器包的版本錯(cuò)位導(dǎo)致的混亂，當(dāng)時(shí)已經(jīng)發(fā)布的版本為v3.3.0。最終版本于2017年3月23日發(fā)布，Angular 4向后兼容Angular 2。

Angular 4.3版本是一個(gè)小版本，它是4.x.x版本的替換版本。

4.3版本的功能介紹了HttpClient，一個(gè)更小、更容易使用、更強(qiáng)大的HTTP請(qǐng)求庫(kù)。為守護(hù)者和解析器提供了新的路由器生命周期事件。四個(gè)新事件。GuardsCheckStart、GuardsCheckEnd、ResolveStart、ResolveEnd加入了現(xiàn)有的NavigationStart等生命周期事件集。有條件地禁用動(dòng)畫(huà)。版本5

Angular 5于2017年11月1日發(fā)布，Angular 5的主要改進(jìn)包括支持漸進(jìn)式Web應(yīng)用、構(gòu)建優(yōu)化器以及與Material Design相關(guān)的改進(jìn)。

版本6

Angular 6于2018年5月4日發(fā)布。這個(gè)版本，關(guān)注的重點(diǎn)不在于底層框架，更多的是工具鏈，以及讓Angular在未來(lái)的更新和升級(jí)更加容易，比如：ngupdate、ng add、Angular元素、Angular Material+CDK組件、Angular Material入門(mén)組件、CLI工作區(qū)、庫(kù)支持、樹(shù)形搖動(dòng)提供者、動(dòng)畫(huà)性能提升、RxJS v6。

版本7

Angular 7已于2018年10月18日發(fā)布。更新內(nèi)容涉及到應(yīng)用性能、Angular Material & CDK、虛擬滾動(dòng)、Selects的可訪問(wèn)性改進(jìn)、現(xiàn)在支持自定義元素使用Web標(biāo)準(zhǔn)的內(nèi)容投影，以及關(guān)于Typescript 3.1、RxJS 6.3、Node 10（仍支持Node 8）的依賴性更新。

版本8

Angular 8已于2019年5月28日發(fā)布。具有所有應(yīng)用代碼的差異化加載、惰性路由的動(dòng)態(tài)導(dǎo)入、Web工作者、TypeScript 3.4支持、以及Angular Ivy作為預(yù)覽版可配置使用。Angular

Ivy預(yù)覽包括：

生成的代碼，在運(yùn)行時(shí)更容易閱讀和調(diào)試。 更快的重建時(shí)間 減少有效載荷 改進(jìn)了模板類型檢查 向后兼容

版本9

Angular 9已于2020年2月6日發(fā)布。第9版在默認(rèn)情況下使用Ivy編譯器。Angular可以與TypeScript 3.6和3.7兼容。除了數(shù)百個(gè)bug修復(fù)之外，Ivy編譯器和運(yùn)行時(shí)還提供了許多優(yōu)勢(shì):

更小的軟件包 更快的測(cè)試 更好的調(diào)試 改進(jìn)的CSS類和樣式綁定 改進(jìn)的類型檢查 改善了構(gòu)建錯(cuò)誤 改善了構(gòu)建時(shí)間，默認(rèn)開(kāi)啟AOT功能 提高國(guó)際化功能組件化

一個(gè)組件例子

Html部分

Typescript部分

路由

數(shù)據(jù)管理

定義服務(wù)類

調(diào)用服務(wù)類

常用命令

從終端上，全局安裝Angular CLI：

npm install -g @angular/cli

使用 ng new 命令創(chuàng)建一個(gè)新的 Angular CLI 工作區(qū):

ng new my-project-name

開(kāi)發(fā)環(huán)境運(yùn)行：

ng serve

生產(chǎn)環(huán)境打包：

ng build --prod

【官方網(wǎng)站】

https://angular.io/

【最新版本】

9.1.2于2020年4月15日

【授權(quán)】

MIT License

三、【Vue】

Vue.js（通常被稱為Vue；發(fā)音為/vjuː/，類似于 'view'）是一個(gè)開(kāi)源的Model-view-viewmodel JavaScript框架，用于構(gòu)建用戶界面和單頁(yè)面應(yīng)用程序。它由Evan You創(chuàng)建，由他和來(lái)自Netlify和Netguru等多家公司的核心成員維護(hù)。

概述

Vue.js的特點(diǎn)是，它采用了一個(gè)漸進(jìn)式的架構(gòu)，專注于聲明式渲染和組件合成。復(fù)雜應(yīng)用所需的高級(jí)功能，如路由、狀態(tài)管理和構(gòu)建工具等，都是通過(guò)官方維護(hù)的支持庫(kù)和包提供的，其中Nuxt.js是最受歡迎的解決方案之一。

Vue.js可以讓你用稱為指令（directives）的HTML屬性來(lái)擴(kuò)展HTML。

歷史

Vue是由Evan You創(chuàng)建的。在Google工作期間，他使用AngularJS技術(shù)參與了多個(gè)項(xiàng)目的開(kāi)發(fā)的，之后創(chuàng)建了Vue。他后來(lái)總結(jié)了自己的思考過(guò)程。'我想，如果我可以把AngularJS真正優(yōu)秀的部分提取出來(lái)，然后構(gòu)建一些輕量級(jí)的東西，會(huì)怎么樣呢？' 項(xiàng)目的第一個(gè)版本源碼提交日期是2013年7月，Vue在2014年2月首次發(fā)布。

組件化

Vue 組件擴(kuò)展了基本的 HTML 元素來(lái)封裝可重用的代碼。從高層次的角度看，組件是Vue編譯器附加行為的自定義元素。在Vue中，組件本質(zhì)上就是一個(gè)帶有預(yù)設(shè)選項(xiàng)的Vue實(shí)例。下面的代碼片段包含了一個(gè)Vue組件的例子。該組件顯示了一個(gè)按鈕，并打印出按鈕被點(diǎn)擊的次數(shù)。

模板

Vue使用基于HTML的模板語(yǔ)法，允許將渲染的DOM綁定到Vue實(shí)例的底層數(shù)據(jù)。所有 Vue 模板都是有效的 HTML，可以被符合規(guī)范的瀏覽器和 HTML 解析器解析。Vue 將模板編譯成虛擬 DOM 渲染函數(shù)。虛擬文檔對(duì)象模型（或 'DOM'）允許Vue在更新瀏覽器之前在其內(nèi)存中渲染組件。結(jié)合反應(yīng)式系統(tǒng)，Vue能夠計(jì)算出需要重新渲染的組件的最小數(shù)量，并在App狀態(tài)發(fā)生變化時(shí)，啟動(dòng)最小量的DOM操作。

Vue用戶可以使用模板語(yǔ)法，也可以選擇使用JSX直接編寫(xiě)渲染函數(shù)，渲染函數(shù)允許從軟件組件中構(gòu)建應(yīng)用程序。

反應(yīng)式系統(tǒng)

Vue的特點(diǎn)是采用了反應(yīng)式系統(tǒng)，它使用純JavaScript對(duì)象和優(yōu)化的重渲染。每個(gè)組件在渲染過(guò)程中都會(huì)跟蹤其反應(yīng)式的依賴關(guān)系，因此系統(tǒng)可以精確地知道什么時(shí)候重新渲染，以及哪些組件需要重新渲染。

變換效果

當(dāng)從DOM中插入、更新或刪除項(xiàng)目時(shí)，Vue提供了多種方法來(lái)部署變換效果。這包括了以下工具：

自動(dòng)應(yīng)用CSS變換和動(dòng)畫(huà)的類 集成第三方CSS動(dòng)畫(huà)庫(kù)，如Animate.css等。 在變換hooks期間，使用JavaScript直接操作DOM。 集成第三方JavaScript動(dòng)畫(huà)庫(kù)，如Velocity.js等。

當(dāng)在變換組件中的元素被插入或移除時(shí)，會(huì)出現(xiàn)這樣的情況：

Vue會(huì)自動(dòng)檢測(cè)到目標(biāo)元素是否應(yīng)用了CSS變換或動(dòng)畫(huà)。如果有，CSS變換類將在適當(dāng)?shù)臅r(shí)間添加/刪除。 如果變換組件提供了JavaScript hooks，這些hooks將在適當(dāng)?shù)臅r(shí)間被調(diào)用。 如果沒(méi)有檢測(cè)到CSS變換/動(dòng)畫(huà)，并且沒(méi)有提供JavaScript hooks，那么插入和/或移除的DOM操作將在下一幀中立即執(zhí)行。路由

單頁(yè)面應(yīng)用程序（SPA）的一個(gè)傳統(tǒng)缺點(diǎn)是無(wú)法分享到特定網(wǎng)頁(yè)中的確切 '子 '頁(yè)面的鏈接。由于SPA只向用戶提供一個(gè)基于URL的服務(wù)器響應(yīng)（它通常服務(wù)于index.html或index.vue），因此通常情況下，將某些屏幕作為書(shū)簽或分享到特定部分的鏈接是很困難的，甚至是不可能的。為了解決這個(gè)問(wèn)題，許多客戶端路由器用 'hashbang'(#!)來(lái)劃分動(dòng)態(tài)URL，例如http://page.com/#!/。然而，在HTML5中，大多數(shù)現(xiàn)代瀏覽器都支持不使用hashbang的路由。

Vue提供了一個(gè)界面，可以根據(jù)當(dāng)前的URL路徑來(lái)改變頁(yè)面上顯示的內(nèi)容 ? 可以有多種方式（無(wú)論是通過(guò)電子郵件鏈接、刷新還是頁(yè)面內(nèi)鏈接）。此外，當(dāng)某些瀏覽器事件（如點(diǎn)擊）發(fā)生在按鈕或鏈接上時(shí)，使用前端路由器可以有意識(shí)地轉(zhuǎn)換瀏覽器路徑。Vue本身并沒(méi)有自帶前端路由。但開(kāi)源的 'vue-router '包提供了一個(gè)API來(lái)更新應(yīng)用程序的URL，支持返回按鈕（導(dǎo)航歷史記錄），并支持電子郵件密碼重置或電子郵件驗(yàn)證鏈接的認(rèn)證URL參數(shù)。它支持將嵌套路由映射到嵌套組件，并提供精細(xì)化的過(guò)渡控制。添加了vue-router后，組件只需映射到它們所屬的路由，父/根路由必須指明子路由的渲染位置。

上面的代碼:

在http://websitename.com/user/<id>中設(shè)置一個(gè)前端路徑。 這將在(const User...)中定義的User組件中呈現(xiàn)。 允許用戶組件使用$route對(duì)象的params鍵輸入用戶的特定ID：$route.params.id。 這個(gè)模板（根據(jù)傳遞到路由器中的參數(shù)變化）將被渲染到DOM的div#app里面的<router-view></router-view>。 最后生成的HTML將是：http://websitename.com/user/1：

生態(tài)系統(tǒng)

核心庫(kù)自帶的工具和庫(kù)都是由核心團(tuán)隊(duì)和貢獻(xiàn)者開(kāi)發(fā)的。

官方工具 Devtools - 用于調(diào)試Vue.js應(yīng)用程序的瀏覽器devtools擴(kuò)展。 Vue CLI - 用于快速開(kāi)發(fā)Vue.js的標(biāo)準(zhǔn)工具書(shū) Vue Loader - 一個(gè)webpack加載器，允許以單文件組件（SFCs）的格式編寫(xiě)Vue組件。官方程序庫(kù) Vue Router - Vue.js的官方路由器 Vuex ? 基于 Flux模式的 Vue.js 的集中式狀態(tài)管理。 Vue Server Renderer - 用于 Vue.js 的服務(wù)器端渲染。常用命令

安裝工具

npm install -g @vue/cli

創(chuàng)建工程：

vue create my-project

開(kāi)發(fā)環(huán)境運(yùn)行：

npm run serve

生產(chǎn)環(huán)境打包：

npm run build

【官方網(wǎng)站】

https://vuejs.org/

【最新版本】

2.6.1于2019年12月13日

【授權(quán)】

MIT License

四、【小結(jié)】

本文對(duì)于當(dāng)前頂級(jí)的前端技術(shù)做了較為詳盡的探索，前端技術(shù)一個(gè)大的方向是單頁(yè)應(yīng)用 (SPA，Single Page Application)，我們?cè)谶x取針對(duì)本業(yè)務(wù)的前端技術(shù)時(shí)需要結(jié)合如下幾個(gè)方面來(lái)考慮：

1. 成員當(dāng)前技能，這是一個(gè)很現(xiàn)實(shí)的問(wèn)題，大多數(shù)程序員會(huì)選擇自己比較熟悉的技術(shù)。這里要思考一下，目前自己熟悉的技術(shù)是不是最優(yōu)選項(xiàng)？

2. 可利用的學(xué)習(xí)時(shí)間，如果發(fā)現(xiàn)要使用的技術(shù)需要一些時(shí)間學(xué)習(xí)，這個(gè)時(shí)間的開(kāi)銷到底會(huì)不會(huì)與開(kāi)發(fā)進(jìn)度有沖突？

3. 能否保證項(xiàng)目的復(fù)雜度最低，這個(gè)是比較關(guān)鍵的因素。先進(jìn)技術(shù)之所以先進(jìn)就是因?yàn)榭梢宰岄_(kāi)發(fā)者把時(shí)間和精力放在真正的業(yè)務(wù)開(kāi)發(fā)上面來(lái)，如果要使用的技術(shù)需要進(jìn)行很多與業(yè)務(wù)不相關(guān)的配置，就需要問(wèn)一個(gè)問(wèn)題，有沒(méi)有更好的辦法？

以上就是詳解React Angular Vue三大前端技術(shù)的詳細(xì)內(nèi)容，更多關(guān)于React Angular Vue三大前端技術(shù)的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！