iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 2
0
Modern Web

Déjà-vu ? 要 Vue 過才知道系列 第 2

Vue.jS 的二三事

不知道是什麼做的食物,吃下去應該會怪怪的吧?

Vue.jS 的小背景

想要了解這個近年來使用率越來越高的框架,最快的方式就是去官方網站查閱一下特色與功能以及用法,英文不好的同學別緊張,因為 Vue.js 是由一位華裔前 Google 工程師尤雨溪所攥寫的,所以自然而然中文的擁護者也不少,而中文官方網站內容也非常仔細。官網除了介紹 Vue.js 框架外,也提供許多學習資源,很容易以漸進的方式開始使用。

Vue.js 是 JavaScript "The progressive framework"(漸進式框架)框架之一,什麼是漸進式框架?以下是Vue 官方網站的說明。簡單來說就是 Vue.js 的核心,只專心關注於 view layout 的呈現,並提供最小化且必要的功能給予開發者。其它相關的功能項目都可以用其他函式庫或是工具去協助處理。
例如:

  • vue-cli: vue 脚手架
  • vue-resource(axios): ajax 的请求
  • vue-router: 路由
  • vuex: 狀態管理
    ... 等等,其他請參閱官網。

Vue.js 怎麼用?

使用 Vue.js 可以非常的簡單,只要如下面的程式碼,引入官方的 Vue.js 文件,在所編輯的網頁裡載入就可以馬上使用,這種即載即用的方式為 CDN(Content delivery network)。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>

CDN 全名為 Content Delivery Network,又名內容傳遞網路,它是一種在網路上傳輸的內容快取機制,透過全球 CDN 節點能夠有效降低內容傳輸的延遲,確保網站在世界各地讀取維持同等的速度。 因此,CDN 具有加速網頁瀏覽、有效分流、高穩定性及高安全性等特質。

腳手架是什麼?

使用 CDN 一段時間之後,會開始發現想用的功能不夠,例如接 API、預編譯、狀態管理,甚至考量到想用 ES6/7 的語法,都會覺得 CDN 有點綁手綁腳,這時不妨考慮使用vue-cli俗稱的「腳手架」。

那腳手架又是什麼?說穿了,腳手架就是為了保證在施工過程中,能順利進行而搭設的工作平台與環境。也就是說,使用vue-cli可以讓我們在開發前,把會用到和想用到的工具通通準備好,等開發時就不會一下缺這個一下缺那個,因為開發時會用到的工具都在面前,開發不出來就是你的事了,誤~

Vue 的特點

Vue.js 是遵循 MVVM 的設計模式而設計的,以往用原生 JavaScript 開發時,如果希望元素依照我們想給的內容顯示,必須先把 DOM 抓取出來,然後再取得填入的值,再把這個值塞到剛剛抓出來的 DOM 裡,但是 Vue.js 把這三方的動作簡化,把我們要填入的值,透過指令,直接把它掛綁在我們要顯示的元素上,這樣一來程式碼會變得簡潔,也可以達到資料驅動畫面的效果,只要資料一變動,顯示也會立即更新。
我們可以透過下圖理解:
image alt

View 可以想像成網頁上的畫面(DOM),ViewModel 是 Vue.js 所做的事,而 Model 則是指我們想顯示在 DOM 上面的資料。

其它前端 JS 框架的關聯

有人說 Vue.js 像是 A ngular 和 R eact 的混血兒,借鑒 A ngular 的模板和資料綁定技術與 React 的組件化和虛擬 DOM 技術,但混血兒總有一天會長大人,且越來越有自己的風格與擁護者,隨著即將要推出的 Vue3 版本,Vue.js 應該又會再轉一次大人吧!?

由於自己 Vue2 也還沒學完, Vue3 的出現讓學習路線變得超級尷尬,可能許多人都還在邊走邊看,但即使是如此,在將來也有很大的機會會接觸到以 Vue2 開發的專案,還是乖乖地把 Vue2 學習一遍吧。

嗯,所以接下來的內容還是會以 Vue2 為主喔!

每日一句法文有益身心:Bon courage ! 繃.哭.哈局 !加油


上一篇
Day01 參賽緣由
下一篇
Vue.js 的基礎使用與雙花括號表達式
系列文
Déjà-vu ? 要 Vue 過才知道30

1 則留言

0
phoebe
iT邦新手 5 級 ‧ 2020-09-17 21:43:00

推^^
最近正好想學:)

我要留言

立即登入留言