什麼是Vue #

什麼是前端框架? #

以現今的網頁需求來說，我們必須注意到一個很大的重點，就是「資料」，打開任何一個網站，他們很多資料都是從後端API生成串接到前端的。

以蝦皮來說，幾乎整個網站都是動態的商品資訊 那如果在沒有框架的開發中，我們是如何處理這樣的需求呢?

在開始之前，我們要先了解什麼是DOM

文件物件模型（Document Object Model, DOM）是 HTML、XML 和 SVG 文件的程式介面。它提供了一個文件（樹）的結構化表示法，並定義讓程式可以存取並改變文件架構、風格和內容的方法。

在傳統的網頁開發中，以蝦皮為例，現在假設有十筆商品已經在畫面上了，我們想要更新其中一筆，我們會這麼做

1. 找到這10筆資料在哪裡
2. 把這十筆資料移除掉
3. 把新的資料直接新增進去

也可以說，傳統的開發是命令式的，手動去把資料裝在畫面上。大家可能也聽過jQuery，其實他也是差不多作法，不過它提供了比較簡潔的語法去做這些事情

而如果加上了前端框架，他們都有所有virtual dom的技術，這裡不展開詳細的細節，總之，你完全不用管上面那棵樹，你就是變動你的資料就好，它會連結資料與畫面，幫你更新畫面，而且它會自動做到最好的優化，假設你只更新其中一筆資料，他也只會更動那一筆資料，達到最好的效能，這同時也能更好的管理資料與UI，這在之後幾篇文章的範例就可以慢慢體會到。

其他優勢 #

其實前端框架還幫忙整合了很多事情，例如component的概念，一個完整的專案，可能html, css , javascript會非常龐大，還會互相影響，難以維護及分工，js框架則能很好的解決。

其實還有很多，但那在後面的文章會再做說明。

為什麼選Vue #

目前前端框架有三巨頭，Angular、React、Vue，很多人會很糾結要學哪個，但我只想說不必浪費太多時間去考慮這個，基本上精通一個後要學習另外的都很容易，他們在本質都是在寫Javascript，很多公司也會說他們要你會其中一種就可以了，因此要學哪一個都可以，這三種在功能上幾乎是勢均力敵，很難說誰強誰弱。

但如果從好入門的角度來看，我會非常推薦Vue，他在官網上的大標題就是The Progressive JavaScript Framework，漸進式就是初學者可以很容易的有淺入深的學習。而像是react，他算是較為吃重ES6的語法，如果是不是非常熟悉JS的話，可能會稍微辛苦一點，而angular，本身設計比較完整和龐大，總體來說用Vue來入門是很棒的。

所需要的前備知識 #

雖說Vue很好入門，但還是建議你有基本的html, css , javascript的了解，在學習上壓力會比較小，如果不趕時間的話，也可以先體驗看看不用框架做出一個小專案的感覺，之後換到Vue才知道他的好