根據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/。

  轉自：https://www.v2ex.com/t/418612