爲何43%前端開發者想學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更新爲無序列表。建立一個新的<li>元素的每個產品，咱們會使用一種特殊的屬性（又名指令）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/。

固然你也能夠去試試在線方式的全網性價比最好匯智網的vue.js課程： http://www.hubwiz.com

最後，我要感謝Evan You，Chris Fritz，Sarah Drasner，和幫助我創造這個內容及視頻的Adam Jahr。

匯智網，小智翻譯。內容有修改。