Vue.js 學習旅程Mile 1 – 歡迎介紹篇


Posted by yuhantaiwan on 2020-02-23

前言

因為公司以 Vue 為開發主要框架,因此在此記錄學習 Vue 的筆記。
搭配六角學院的課程,使用 VS Code 文字編輯器。
在真正開始前,先來個前端歷史小回顧

前端歷史小回顧

JavaScript 與瀏覽器

JavaScript 誕生於1995年,由 Netscape 這家公司專門為其 Netscape 瀏覽器而發明的,目的是需要一種可以嵌入網頁的腳本語言。在 JavaScript 誕生之際,瀏覽器的世界還處於戰國時代,CSS 也才剛剛誕生,各家瀏覽器採用的標準不一,常有在某瀏覽器呈現的畫面,到另一個瀏覽器完全走樣的問題,當時前端工程師的主要工作,通常是維持網頁在各瀏覽器的一致性。

以下是 Wikipedia 整理的瀏覽器年代表:

從這張圖上,可以觀察到在 1995 年前後,有許多五花八門的瀏覽器,進入 2010 左右才慢慢由 Chrome、Firefox、IE、Safari 等幾大家獨佔鰲頭。

在這個混亂的時期,一個叫 ECMA 的國際標準化組織致力於統一標準,他們推出的標準稱為 ECMAScript,例如 ECMAScript 第 5 版會簡稱為 ES5。1999~2010 年之間,JavaScript 通行標準得到廣泛支持,也慢慢轉變成一個成熟的程式語言。今天坊間 JavaScript 學習教材大多採用 ES5 或 ES6,ES6 又稱為 ES2015。

AJAX

Google 在 2004 年推出 Gmail 服務,以及次年的 Google Map,達成了高度的網頁互動性,可說是 AJAX 躍入舞台的重要時刻,大家知道了 AJAX 的異步請求竟能帶來如此流暢的網頁體驗。

然而當時仍處於瀏覽器與 JavaScript 標準都很紛亂的時期,想要在網頁上實現更強大的功能,就要撰寫更多的 JavaScript,也代表有更多跨瀏覽器校調的苦工。最後就有了 jQuery 在 2006 年出場,統合校調 JavaScript 的各種重覆性作業,讓開發者在操作 DOM 元素減少麻煩,且較不容易發生錯誤。

Single Page Application

jQuery 函式庫的出現推動了 AJAX 技術的流行,而 AJAX 技術讓網頁畫面可以透過 JavaScript 在前端動態產生,瀏覽器不需要重新跳頁,因此大大提升使用者體驗。後來就把這種設計原則稱為 Single Page Application,簡稱 SPA。

AJAX 讓 SPA 的概念成形,但 SPA 的實作未必一定只能用 AJAX,由於直接使用 JavaScript 來動態產生畫面,會遇到一些瓶頸,例如一直沒有跳頁,網址不改變,不利於 SEO 等等。

為了在實現 SPA 設計原則的同時解決問題,開始有人提出一套完整的軟體框架,例如 Backbone.js、Angular JS、Vue JS 等等,迎來了前端技術的大爆炸,每個框架有不同的優缺點,但整體來說,都是在面對以下 3 件事:

  • 局部頁面的渲染
  • 把網頁拆成組件,使用邏輯來控制組件的顯示
  • Routing 和 Model 的處理,也就是 URL 和資料流的設定

接下來將介紹這次的主角 Vue.js。
先了解什麼是 Vue,以及為什麼要使用它。


What's is Vue?

Vue 由前 Google 工程師尤雨溪(Evan You)在 2014 年 2 月所建立。

Vue 是一套開放源碼(Open Source)的漸進式框架(Progressive JavaScript Framework)(階段性使用 Vue,不需要一開始就使用所有的東西)。以操作資料狀態來管理畫面的 MVVM 架構函式庫。由於 MVVM 雙向綁定的好處,讓開發人員專注在 Javascript 資料 (data) 的操作而不用花費心思管理維護畫面 (view) 的 DOM 元素,因此相比 jQuery 減少很多操作 DOM 元素程式碼。不僅易於上手,還便於與第三方庫或既有項目整合。

Why Vue?

Vue 提供的特色如下:

  • 輕量型的框架:輕量、且效能好。
  • Vue 專注在MVVM(Model - View - ViewModel)設計模式中的 ViewModel 層。
  • 提供資料繫結(Data Binding)能力:此功能可以將值關聯到指定的 HTML 標籤或 Attribute,以變更顯示資料或套用樣式。
  • 採用虛擬 DOM(Virtual DOM),不直接操作 DOM,而是建立一個以 JavaScript 資料結構形式存在的DOM複本,直接對 JavaScript 資料結構進行異動。所進行的異動稍後會自動更新到真正的 DOM,如此將可進行最佳化以提升效能。
  • 指示詞(Directives):內建許多「v-」開頭的指示詞,用來進行程式邏輯的判斷
  • 元件(Component):可以利用元件建立自訂的項目,便可以在HTML網頁中重複地使用。
  • 模板(Templates):提供以HTML為基礎的樣版,以便將DOM物件繫結到Vue實體(Instance)資料。。
  • 路由(Routing):用來導覽至其它網頁。

結語

Vue 提供的好處真的很多,讓開發者只需關注在 Model 和 View 上,不用煩惱底層該如何實現。雖然大家都說 Vue 入門門檻低,但對前端超新手的我來說,學習上還是要花許多精力去理解與消化。希望接下來能一步一腳印扎實的學習,跟它成為好朋友 XD


#w3HexSchool #Vue #javascript







Related Posts

CSS - Grid: cells, areas, and nesting grid

CSS - Grid: cells, areas, and nesting grid

[ 前端工具 ] -  SCSS

[ 前端工具 ] - SCSS

關於 Slot 元件插槽

關於 Slot 元件插槽


Comments