為什麼 那麼多 前端開發者都想學 Vue.js
根據JavaScript 2017 前端庫狀況調查 Vue.js是開發者最想學的前端庫。我在這裡說明一下我為什麼認為這也是和你一起通過使用 Vue 構建一個簡單的 App 應用程式的原因。
我最近曾與 Evan You，Chris Fritz，Sarah Drasner，和 Adam Jahr 做了一個介紹視訊，而現在你可以在 http://vuejs.org首頁找到它。以下是該視訊的文字版本。
偉大的 JavaScript 遷移
如你所知，JavaScript在過去的 10 年中已經成熟了很多，而且伺服器端正常執行的大部分程式碼已經遷移到瀏覽器中了。隨著這變得越來越複雜，框架也變得越來越有組織性。
我不打算告訴你為什麼一個比另一個更好的，雖然在官方網站有一個詳細的比較。
Vue.js旨在成為一個平易近人，多功能，高效能，可維護性，可測試的 JavaScript 框架。Vue 的目也是為了進步，意思就是如果你有一個現有的應用程式存在只佔一個部分的前端，你需要更多的互動體驗那麼就可以使用 Vue。
或者，您也可以從一開始就在前端構建更多的業務邏輯。Vue 的核心庫和生態系統需要規模。
像其他的前端框架，Vue 可以讓你把網頁分為可重用的邏輯元件。每一個都有它自己的HTML、CSS 和 JavaScript來渲染頁面的每一部分。
一個示例，說明如何將事物分解成元件
我們的第一個 Vue 專案
我想讓你沒見過 Vue 前讓你先找到程式碼的感覺並告訴你一些語法。我不會深入討論細節，但是我們會看到一些核心概念。
與許多 JavaScript 應用程式一樣，我們從將資料顯示到頁面開始。
用 Vue 開始構建很簡單。
你可以看到在上面的圖片我們包括Vue庫，建立 Vue 的例項，並插入到我們的根元素通過 App 的 ID。EL 代表元素。我們也會將資料移到一個物件中，並將 X 轉換為一個帶有雙花括號的表示式。
如你所見，它有效：
沒什麼特別的，但資料開始變化時 Vue 就像魔術。如果我跳到控制檯，改變 product 的值，看看會發生什麼：
VUE 是響應式的，即當我們的資料變化，Vue 會更新所有在我們的網頁使用它的地方。
這與任何型別的資料無關 ， 不只是字串。因此，我們不必使用單一產品，而是使用一系列產品，並將 H2 更新為無序列表。建立一個新的
- 元素的每一個產品，我們會使用一種特殊的屬性（又名指令） Vue 稱為 v-for。這樣，每個產品都可以得到自己的列表項。
如果我們跳進瀏覽器，這就是我們看到的：
這仍然有點人為設計，所以讓我們先把列表清空，然後從實際的 API 中取出我們的產品列表，這些 API 可能來自某個資料庫。
如果我們檢視列印到頁面的內容，我們將看到：
如您所見，每個列表項都顯示返回的物件。為了讓這些資料被人類讀取，我們需要改變它顯示的方式。
我們的結果是：
我們要注意到數量 0 的物品，讓我們新增一個<span，>內容“缺貨”。我們只想在我們的 item.quantity = = = 0 的出現，所以我們將使用 Vue 的 v-if 指令。
當然，我們的夾克已經沒貨了：
如果我們想打印出我們列表中的產品總數呢？我們需要建立一個計算屬性稱為 totalproducts，返回我們的產品總數量。如果您不熟悉 JavaScript reduce 函式的話，我說明下它將從每個產品中新增所有數量。
正如你可以看到下面，我們現在可以將我們的總庫存打印出來。
這會兒也可能告訴你關於使用 vue.js 的 Chrome 擴充套件工具的一個很好的時機。擴充套件工具的一個很好的特性是，您可以檢查載入到頁面上的資料。
還有一些 Vue 的響應，讓我們看看在陣列中刪除 2 項會發生什麼。正如你在下面看到的，不僅是我們的名單更新了，而且我們的總數也是如此。
接下來，我將向您展示如何通過使用按鈕來增加對該頁面的互動性。我們將為每個產品建立一個新增按鈕，當單擊此按鈕時，我們將增加一個數量。
注意，當我們新增一個專案（下）時，不僅總庫存得到更新，而且如果我們增加我們的夾克產品，我們的庫存通知就會消失。
但是，如果我們只想寫夾克或遠足襪的數量呢？我們只需要建立一個新的輸入欄位，並將其繫結到我們的產品數量通過 v-model 指向它，並指定這始終是一個 number 即可。
你會注意到我現在可以輸入每個專案的總數量，並立即獲得更新。我甚至可以把數量設定為零，我得到了我的庫存，我的新增按鈕也仍然可以工作。
你可以完成這個版本的專案的後，去 JSFiddle 執行它，當然也可以去匯智網（ www.hubwiz.com ）執行它。
Vue 的一些特點
如果我們把它構建成一個更大的應用程式，那麼我們就要開始把它分解成多個元件和檔案，以使程式變得更有條理。
Vue 甚至提供一個命令列介面，使簡單的開始迅速發展真正的專案。正如您在下面看到的，init 命令可以用來啟動一個新專案。
我們還可以使用單檔案——.Vue 元件檔案，其中包含 HTML，JavaScript，CSS 甚至 SCSS。
你在這裡看到的只觸及到 Vue 表面上可以做什麼。有很多東西可以幫助你構建、組織和擴充套件你的前端應用程式。要真正開始編碼，我將推薦兩種資源。一個是去下載資源手冊表到這裡： http://www.vuemastery.com/download-1，另外一個是官方檔案： https://vuejs.org/v2/guide/。