述

Developers in the industry must resolve frontend development problems quickly with minimal impact on existing workflows or backend architecture. In any cases, developers tend to overlook the UI until the end of a project, which can happen because of a lack of resources, ever-evolving product equirements, or the existing attitude that the frontend is the easy bit.

業(yè)內(nèi)的開發(fā)人員必須快速解決前端開發(fā)問題，同時盡量減少對現(xiàn)有工作流程或后端架構(gòu)的影響。在任何情況下，開發(fā)人員都傾向于在項目結(jié)束前忽略用戶界面，這可能是由于缺乏資源、產(chǎn)品要求不斷變化，或者認為前端是最簡單的部分。

However, companies such as Apple and Google have proven that thinking through the design of the frontend is key to a solid product or platform that will excite and engage users, leading to a higher return on investment and a more successful business.

然而，蘋果和谷歌等公司已經(jīng)證明，對前端設(shè)計進行深入思考，是打造穩(wěn)固的產(chǎn)品或平臺的關(guān)鍵所在，它能激發(fā)和吸引用戶，從而帶來更高的投資回報和更成功的業(yè)務(wù)。

If you know Vue, you may have also come across other frontend frameworks that, at face value, solve the same problems, such as Ember, Angular, or React. At a surface level, they attempt to make reactive frontend development more reliable and introduce patterns that make it easier. However, there are significant differences in how a Vue project might play out compared to an Angular or React project. Let’s investigate them.

如果你了解 Vue，你可能還接觸過其他前端框架，從表面上看，它們解決了同樣的問題，如 Ember、Angular 或 React。從表面上看，它們都試圖讓反應(yīng)式前端開發(fā)更可靠，并引入模式使其更簡單。然而，與 Angular 或 React 項目相比，Vue 項目的運行方式有很大不同。讓我們來研究一下。

比較Angular和Vue

Angular is a Model-View-ViewModel (MVVM) framework built by Google and has built-in support for TypeScript. The Angular ecosystem includes Ahead-of-Time (AoT) rendering, a router, and a CLI tool.

Angular 是由 Google 構(gòu)建的模型-視圖-視圖模型（MVVM）框架，內(nèi)置了對 TypeScript 的支持。Angular 生態(tài)系統(tǒng)包括超前（AoT）渲染、路由器和 CLI 工具。

However, it fails to deliver a simplified system for global state management; developers would need to learn how to use Flux or adopt NgRx.

但是，它無法為全局狀態(tài)管理提供一個簡化的系統(tǒng)；開發(fā)人員需要學(xué)習(xí)如何使用 Flux 或采用 NgRx。

Vue takes Angular’s core robustness and provides a better development experience by removing the restriction of an enforced code style for developers.

Vue 繼承了 Angular 的核心穩(wěn)健性，為開發(fā)人員消除了強制代碼風(fēng)格的限制，提供了更好的開發(fā)體驗。

Vue also simplifies common Angular patterns, such as HTML directives, and eliminates a variety of Angular’s project structures, such as injectables, components, pipes, modules, and so on. From Vue 3.0 onward, it provides excellent support for TypeScript and typing without the drawbacks of Angular-enforced coding styles.

Vue 還簡化了常見的 Angular 模式，如 HTML 指令，并消除了 Angular 的各種項目結(jié)構(gòu)，如注入式、組件、管道、模塊等。從 Vue 3.0 開始，它為 TypeScript 和類型化提供了出色的支持，而沒有 Angular 強制編碼風(fēng)格的缺點。

Vue is more flexible, developer-friendly, efficient, and straightforward to set up and learn to use than Angular in many cases.

在許多情況下，Vue 比 Angular 更靈活、對開發(fā)人員更友好、更高效、更易于設(shè)置和學(xué)習(xí)使用。

Next, let’s look at how Vue and React differ.

接下來，讓我們看看 Vue 和 React 有何不同。

比較React和Vue

First released in 2013 and backed by Meta (previously known as Facebook), React rapidly gained popularity in the developer community. React introduces the JSX pattern to write HTML syntax directly with JavaScript.

React 于 2013 年首次發(fā)布，并得到了 Meta（前身為 Facebook）的支持，迅速在開發(fā)人員社區(qū)中流行起來。React 引入了 JSX 模式，可直接使用 JavaScript 編寫 HTML 語法。

With JSX, React increases the amount that new developers are required to learn about both JavaScript and component-based architecture.

通過 JSX，React 增加了新開發(fā)人員需要學(xué)習(xí)的 JavaScript 和基于組件的架構(gòu)知識。

Both React and Vue share the same component-driven development approach, allowing developers to build applications in a modular way. Each component contains its functionalities and lifecycle. Vue takes these core concepts of modular coding and offers flexibility to developers in choosing which approach to use to write their components: JSX or the traditional style, in which HTML, CSS, and JavaScript are separated.

React 和 Vue 采用相同的組件驅(qū)動開發(fā)方法，允許開發(fā)人員以模塊化方式構(gòu)建應(yīng)用程序。每個組件都包含其功能和生命周期。Vue 繼承了這些模塊化編碼的核心理念，讓開發(fā)人員可以靈活選擇使用哪種方法編寫組件： JSX 或傳統(tǒng)風(fēng)格（HTML、CSS 和 JavaScript 分離）。

Vue uses the Single-File Component (SFC) approach to leverage this modular structure into a single file while keeping the separation readable and understandable for developers.

Vue 使用單文件組件（SFC）方法將這種模塊化結(jié)構(gòu)整合到單個文件中，同時保持可讀性和可理解性。

在項目中使用 Vue 的優(yōu)勢

Vue has a gentler learning curve and a vibrant ecosystem. This gentle learning curve helps reduce overhead and cost for any team onboarding developers to a new Vue project.

Vue 的學(xué)習(xí)曲線較為平緩，生態(tài)系統(tǒng)充滿活力。這種平緩的學(xué)習(xí)曲線有助于減少任何團隊為新的 Vue 項目培訓(xùn)開發(fā)人員的開銷和成本。

One key benefit of Vue is its approachability for both new and veteran developers:

• Out of the box, developers can use a well-optimized and performant framework on which to build scalable, dynamic frontend applications.
• The SFC format pattern offers a modular and flexible blueprint that provides an enjoyable experience to developers. SFCs allow Vue to be genuinely versatile. You can implement basic functionalities and incrementally adopt pieces of a static site into Vue rather than overhaul your entire website.

Vue 的一個主要優(yōu)點是它對于新老開發(fā)人員都很容易上手：

• 開箱即用，開發(fā)人員可以使用優(yōu)化良好、性能卓越的框架來構(gòu)建可擴展的動態(tài)前端應(yīng)用程序。
• SFC 格式模式提供了一個模塊化和靈活的藍圖，為開發(fā)人員帶來了愉快的體驗。SFC 使 Vue 成為真正的多面手。您可以實現(xiàn)基本功能，并逐步將靜態(tài)網(wǎng)站的各個部分納入 Vue，而不是徹底改造整個網(wǎng)站。

As powerful as Redux and NgRx, Vuex (and lately Pinia) proves to be an outstanding official global state management tool that is flexible enough to meet most development needs.

與 Redux 和 NgRx 一樣強大的是，Vuex（以及最近的 Pinia）被證明是一款出色的官方全局狀態(tài)管理工具，其靈活性足以滿足大多數(shù)開發(fā)需求。

Thanks to its stable performance; well-defined tools such as Vue Router, Pinia, Vuex, and so on; and a supportive community, developers can save time and money by choosing Vue for their development stack.

得益于其穩(wěn)定的性能、定義明確的工具（如 Vue Router、Pinia、Vuex 等）以及支持性社區(qū)，開發(fā)人員可以通過選擇 Vue 作為其開發(fā)棧來節(jié)省時間和金錢。

The following section explores the essential Vue architecture before deepdiving into the SFC pattern and template syntax.

在深入探討 SFC 模式和模板語法之前，下文將探討 Vue 的基本架構(gòu)。

使用 Vue

To learn about the Vue architecture, we will start by importing the Vue package into our coding playground. One straightforward way is to import the Vue package through the official Content Distribution Network (CDN).

要了解 Vue 架構(gòu)，我們首先要將 Vue 軟件包導(dǎo)入我們的編程環(huán)境。一種直接的方法是通過官方內(nèi)容分發(fā)網(wǎng)絡(luò)（CDN）導(dǎo)入 Vue 軟件包。

We can do so by creating an index.html file and adding a <script> tag to load the Vue CDN within the <head> section of the HTML template, as demonstrated in the following code block:

我們可以創(chuàng)建一個 index.html 文件，并在 HTML 模板的 <head> 部分添加一個 <script> 標記來加載 Vue CDN，如下代碼塊所示：

<!DOCTYPE html>
<html>
<head>
    <title>Vue.js project with CDN</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
</html>

The browser will also load the Vue package using the CDN defined in the script tag when loading the page. Once completed, you can utilize the Vue functions and start writing Vue code.

在加載頁面時，瀏覽器還會使用腳本標簽中定義的 CDN 加載 Vue 包。完成后，您就可以使用 Vue 功能并開始編寫 Vue 代碼。

But first, let’s look at the Vue instance.

但首先，讓我們來看看 Vue 實例。

了解Vue的實例

In general, each Vue application consists of only one root Vue instance, which can be created using the Vue.createApp method:

一般來說，每個 Vue 應(yīng)用程序只包含一個根 Vue 實例，可以使用 Vue.createApp 方法創(chuàng)建：

const vm=Vue.createApp({
 // options
})

The Vue class constructor accepts an options object for the configurations and behavior of components. We call this approach Options API and we can use it for all corresponding Vue components. However, all of them are considered nested Vue instances, with their own options and properties.

Vue 類構(gòu)造函數(shù)接受一個選項對象，用于組件的配置和行為。我們將這種方法稱為選項 API，并將其用于所有相應(yīng)的 Vue 組件。不過，所有這些組件都被視為嵌套的 Vue 實例，擁有各自的選項和屬性。

NOTE：vm is a term commonly used to refer to a View Model, which is an abstraction of the view that describes the state of the data in the model. Binding a Vue instance to vm helps you to keep track of your Vue instance in a block of code.

注：vm 通常指視圖模型（View Model），它是視圖的一個抽象概念，用于描述模型中數(shù)據(jù)的狀態(tài)。將 Vue 實例綁定到 vm 可幫助您在代碼塊中跟蹤 Vue 實例。

For the Vue engine to render the application instance, in our index.html file, we declare an <div> element within the <body> tag using a unique class name, ID, or data attribute as the main entry point for the application accordingly:

為了讓 Vue 引擎渲染應(yīng)用程序?qū)嵗?，?index.html 文件中，我們在 <body> 標記中聲明了一個 <div> 元素，使用唯一的類名、ID 或數(shù)據(jù)屬性作為應(yīng)用程序的主要入口：

<body>
    <div id="vue-app"></div>
    <script>
        const vm=Vue.createApp({
        //Options
        })
    </script>
</body>

To render the Vue application in the browser, we need to trigger vm.mount() to mount the root component to the targeted HTML element using a unique selector. In this example, it is an id with a value of vue-app:

要在瀏覽器中呈現(xiàn) Vue 應(yīng)用程序，我們需要觸發(fā) vm.mount()，使用唯一選擇器將根組件掛載到目標 HTML 元素上。在本例中，它是一個值為 vue-app 的 id：

<body>
    <div id="vue-app"></div>
    <script>
        const vm=Vue.createApp({
         //Options
        })
        vm.mount('#vue-app')
    </script>
</body>

Now, you bind the <div> element with id="vue-app" to the new Vue instance.

現(xiàn)在，將帶有 id="vue-app" 的 <div> 元素綁定到新的 Vue 實例。

Next, let’s define text with a value of "Start using Vue.js today!" and add it as a property of the return value for the data method in the application options:

接下來，讓我們定義值為 "今天就開始使用 Vue.js！"的文本，并將其添加為應(yīng)用程序選項中數(shù)據(jù)方法返回值的屬性：

const vm=Vue.createApp({
    data() {
        return {
         text: '今天就開始使用 Vue.js！'
        }
    }
})

In the preceding code example, data is a function that returns an Object instance containing the local state (or local variables) of a component.

在前面的代碼示例中，data 是一個函數(shù)，它返回一個包含組件本地狀態(tài)（或本地變量）的對象實例。

To render the content of text to the DOM, we use Vue template syntax, represented by double curly braces ({{}}) wrapped around the reactive content. In this case, we use {{ text }}, as shown in the following code:

要將文本內(nèi)容呈現(xiàn)到 DOM 中，我們使用 Vue 模板語法，即用雙大括號 ({{}}) 包住反應(yīng)內(nèi)容。在本例中，我們使用 {{ text }}，如下代碼所示：

<div id="vue-app">{{ text }}</div>

In the <head> tag, we can also use the DOM API to construct a Vue application instance and bound it to our target element (with the ID selector as #vue-app):

在 <head> 標記中，我們還可以使用 DOM API 構(gòu)建一個 Vue 應(yīng)用程序?qū)嵗?，并將其綁定到目標元素（ID 選擇器為 #vue-app）：

<head>
<title>Vue.js CDN</title>
<script src="https://unpkg.com/vue@3"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        Vue.createApp({
                data(){
                    return {
                        text: "Start using Vue.js today!"
                    }
            }
        }).mount('#vue-app')
    })
</script>
</head>
<body>
<div id="vue-app">{{text}}</div>
</body>

The output is the same for both approaches. However, we strongly recommend not using DOMContentLoaded.

兩種方法的輸出結(jié)果是一樣的。不過，我們強烈建議不要使用 DOMContentLoaded。

最終完整代碼如下：

習(xí)web前端，首先要學(xué)HTML。

關(guān)于HTML基礎(chǔ)知識，首先是要掌握一些常用標簽的使用和他們的各個屬性，這些常用的標簽我總結(jié)了一下有以下這些：

html：頁面的根元素。head：頁面的頭部標簽，是所有頭部元素的容器。body：頁面的主體標簽，頁面展現(xiàn)的內(nèi)容就放置在這里面。title：頁面的標題。

meta：位于文檔的頭部，提供頁面的元信息，包括關(guān)鍵字、描述等等。link：定義文檔與外部資源的關(guān)系，最常用的用途就是引入樣式表。script：腳本標簽，可以把js腳本代碼放置在這個標簽內(nèi)，也可以使用這個標簽的src屬性引入一個外部標簽。style：樣式標簽，可以把css代碼寫在這個標簽中。

a：超鏈接，href屬性代表要鏈接到的地方，target屬性代表打開方式。img：圖像標簽，src屬性表示圖片的位置。form：表單元素，它內(nèi)部的input、select、textarea等標簽都是比較重要的。

div：定義文檔中的分區(qū)或節(jié)，可以使用div來進行頁面的布局等操作。另外還有ul、li、p、button、iframe、p、table等標簽也很常用，nav、section、article、header、aside、footer等語義化標簽也需要了解一下。

除了要了解上面這一些標簽之外，還需要對一些新的HTML5的API有一定的了解：

audio、video標簽。

Canvas：定義圖形，比如圖表和其他圖像。

input標簽的accept屬性，email、phone、url等類型。

getElementByClassName根據(jù)class名來獲取一個元素結(jié)點。

Multiple file selection多文件選擇屬性。

html的import、template

process標簽，webGL等內(nèi)容。

小編是一個有著5年工作經(jīng)驗的架構(gòu)師，關(guān)于web前端，自己有做材料的整合，一個完整學(xué)習(xí)web前端的路線，學(xué)習(xí)材料和工具。需要的伙伴可以私信我，發(fā)送“前端”等3秒后就可以獲取領(lǐng)取地址，免費送給大家。對于學(xué)習(xí)web前端有任何問題（學(xué)習(xí)方法，學(xué)習(xí)效率，如何就業(yè)）都可以問我。希望你也能憑自己的努力，成為下一個優(yōu)秀的程序員！

還有一些要知道的知識點：

1.doctype的作用。2.unicode、utf8等編碼的原理和區(qū)別。3.如何進行頁面性能優(yōu)化。4.png、jpg、webp、gif等圖片格式的不同的優(yōu)勢。5.HTML行內(nèi)元素與塊級元素的區(qū)別。6.移動web端開發(fā)常用head標簽。7.web語義化。8.瀏覽器中的緩存原理