五個小案例帶你學習火熱的Vue.js
阿新 • • 發佈：2019-01-31
vue.js背後的理念是提供儘可能簡單的API，在檢視（HTML）和模型（javascript物件）建立實時的雙向繫結機制。正如你在下面的例子中所看到的，這個框架使用起來非常的高效且不影響任何功能。
開始起步
安裝Vue.js最簡單的方式是用一個<script>標籤在HTML的body後邊。整個框架位於一個JavaScript檔案，您也可以從官方網站下載或直接通過CDN引入：<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>如果你想在Node.js專案中使用這個類庫，Vue也可以通過npm 模組安裝。用一個官方的命令點我，它允許使用者基於預製模板的建立快速建立整個專案。
下面是五個程式碼預覽編輯器，包含我們為您建立的示例應用程式。該程式碼有很多註釋，並在每個檔案中分離出來，使其很容易理解。編輯內建vue.js，所以不要害怕嘗試。此外，你可以打包下載所有的例子，下載按鈕在這篇文章的頂部。
1.導航選單
我們將要建立一個簡單的導航欄來說明我們的東西。幾乎每一個由vue.js組成的應用都需要有幾個基本的元件。他們是：
- 模型，換句話說是我們app的資料，在Vue.js中這是一個包含變數和變數值的簡單的javascript物件。
- HTML模板，用專業的術語就是檢視，在這裡我們選擇顯示事件監聽，和處理模型的不同用法。
- 檢視模型 - 一個Vue把模型和檢視繫結在一起的例項，使他們能夠同步顯示。
在這些空洞的概念背後是該模型和檢視始終保持同步。模型改變檢視就會更新，反之亦然。在我們的第一個例子中，用active變數，表示該選單項是當前的選項。
例子程式碼如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin:0; padding:0; } body{ font:15px/1.3 'Open Sans', sans-serif; color: #5e5b64; text-align:center; } a, a:visited { outline:none; color:#389dc1; } a:hover{ text-decoration:none; } section, footer, header, aside, nav{ display: block; } /*------------------------- The menu --------------------------*/ nav{ display:inline-block; margin:60px auto 45px; background-color:#5597b4; box-shadow:0 1px 1px #ccc; border-radius:2px; } nav a{ display:inline-block; padding: 18px 30px; color:#fff !important; font-weight:bold; font-size:16px; text-decoration:none !important; line-height:1; text-transform: uppercase; background-color:transparent; -webkit-transition:background-color 0.25s; -moz-transition:background-color 0.25s; transition:background-color 0.25s; } nav a:first-child{ border-radius:2px 0 0 2px; } nav a:last-child{ border-radius:0 2px 2px 0; } nav.home .home, nav.projects .projects, nav.services .services, nav.contact .contact{ background-color:#e35885; } p{ font-size:22px; font-weight:bold; color:#7d9098; } p b{ color:#ffffff; display:inline-block; padding:5px 10px; background-color:#c4d7e0; border-radius:2px; text-transform:uppercase; font-size:18px; } </style> </head> <body> <div id="main"> <nav :class="active" @click.prevent> <a href="#" class="home" @click="makeActive('home')">Home</a> <a href="#" class="projects" @click="makeActive('projects')">Projects</a> <a href="#" class="services" @click="makeActive('services')">Services</a> <a href="#" class="contact" @click="makeActive('contact')">Contact</a> </nav> <p>You chose <b>{{active}}</b></p> </div> </body> <script src="js/vue.js"></script> <script> var vue=new Vue({ el:"#main", data:{ active:"home" }, methods:{ makeActive:function(item){ this.active=item; } } }); </script> </html>
演示地址：
http://www.gbtags.com/gb/debug/7c2d1e0f-f66d-4159-8d30-50a25e96fd63.htm
正如你所看到的，這個庫使用的非常明瞭，Vue做了大量的處理，為我們提供熟悉的容易記憶的語法。
- 所有的選項都是簡單的javascript物件
- ｛｛｝｝模板的雙向繫結。
- v- 開頭的直接在HTML上新增內建屬性
2.內在編輯器
在前面的例子中，我們的模型只有一對預定義的值。如果我們希望給使用者設定任何資料的能力，我們可以進行雙向繫結，並將一個輸入域與模型屬性連線起來。當輸入文字時，它會自動儲存在text_content模型，從而使檢視的更新。http://www.gbtags.com/gb/debug/d2c1903b-2c8f-4d9e-85f0-fda619070d02.htm
3.提交表單
這個例子說明了多個服務和它們的總成本。由於我們的服務是儲存在陣列中，我們可以利用的v-for指令迴圈輸出所有的輸入和顯示。如果一個新的元素新增到陣列或任何舊的改變，Vue.js會自動更新和顯示新的資料。http://www.gbtags.com/gb/debug/a4de2033-9412-4b89-a9a9-00b11dac4461.htm顯示價格在正確的格式，我們使用一個內建的過濾器來Vue.js。他們允許我們懶洋洋地修改模型資料–在這種情況下，貨幣的過濾器是完美的，因為它增加了一個美元符號和適當的小數位數。就像在Angular過濾器是使用|語法–{{ some_data | filter }}。
4.既時搜尋
在這裡，我們將建立一個應用程式，該應用程式在我們的網站上展示一些文章。該應用程式也將有一個搜尋領域，使我們能夠過濾哪些文章顯示。有一個過濾器過濾，但這不正是我們需要的，所以我們將建立自己的自定義過濾器。
http://www.gbtags.com/gb/debug/33625654-9173-49b5-9537-3e56d47e61b4.htm
輸入欄位繫結到要查詢的字串模式。當輸入文字時的模型是即時更新和傳遞給搜尋過濾器。這樣我們就可以建立一個實時搜尋，而不必擔心渲染或設定事件偵聽器–Vue.js處理所有！
5.變換佈局
在我們的最後一個例子中，我們將展示一個常見的場景，其中一個頁面有不同的佈局模式。就像在以前的應用程式我們將展示一系列從儲存在一個數組tutorialzine.com文章。
通過按下頂部欄中的一個按鈕，你可以在一個包含大影象的網格佈局之間切換，以及一個較小的影象和文字的列表佈局。
http://www.gbtags.com/gb/debug/6da7cffb-5f0a-45f3-9dc8-04916d170fc9.htm
結論
有很多Vue.js比我們展示這些例子。該庫還提供動畫，自定義元件和各種其他功能。我們建議您到官網http://vuejs.org/guide/檢視，這是充分的資訊和有用的片段。
Vue.js是否適合您的專案嗎？以下連結將對你有很大的幫助：
- 一個官方的，與其他框架的詳細的比較。http://vuejs.org/guide/comparison.html
- todomvc–是 一個同一應用程式是與許多不同的框架建立的網站。ps:(使用這些框架分別作出了一個個的todos；然後你就可以根據他們提供的程式碼來判斷某個框架是否適合你，因為雖然是同樣的功能，但是使用的框架不同，程式碼量不同，簡易程度不同，他們給我們提供了一個比較的標準。)
- 我們的文章裡我們已經做過的類似的例子使用的React 和Angular.js。