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

Vue.jS 的小背景

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

• 英文官網: https://vuejs.org/
• 中文官網: https://cn.vuejs.org/

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 把這三方的動作簡化，把我們要填入的值，透過指令，直接把它掛綁在我們要顯示的元素上，這樣一來程式碼會變得簡潔，也可以達到資料驅動畫面的效果，只要資料一變動，顯示也會立即更新。
我們可以透過下圖理解：

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

其它前端 JS 框架的關聯

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

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

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

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