vue快速入門的三個小實例

知識 08-24

1.前言

用vue做項目也有一段時間了，之前也是寫過關於vue和webpack構建項目的相關文章，大家有興趣可以去看下 webpack+vue項目實戰（一,搭建運行環境和相關配置）（這個系列一共有5篇文章，這是第一篇，其它幾篇文章鏈接就不貼了）。但是關於vue入門基礎的文章，我還沒有寫過，那麼今天就寫vue入門的三個小實例，這三個小實例是我剛接觸vue的時候的練手作品，難度從很簡單到簡單，都是入門級的。希望能幫到大家更好的學習和了解vue，也是讓自己能夠複習一下vue。如果發現文章寫得有什麼不好，寫錯了，或者有什麼建議！歡迎大家指點迷津！

1.本篇文章使用的vue版本是 2.4.2 ，大家要注意版本問題

2.現在我也是假設您有基礎的html,css,javascript的知識，也已經看過了官網的基本介紹，對vue有了一個大概的認識了，了解了常用的vue指令(v-model,v-show,v-if,v-for,v-on,v-bind等)！如果剛接觸前端的話，你看著文章可能會蒙圈，建議先學習基礎，掌握了基礎知識再來看！

3.下面的實例，建議大家邊看文章邊動手做！這樣思路會非常清晰，不易混亂！也不會覺得文章長！如果只看文章，你可能未必會看完，因為文章我講得比較細，比較長！

2.什麼是vue

vue是現在很火的一個前端MVVM框架，它以數據驅動和組件化的思想構建，與angular和react並稱前端三大框架。相比angular和react，vue更加輕巧、高性能、也很容易上手。大家也可以移步，看一下vue的介紹和核心功能官網介紹。簡單粗暴的理解就是：用vue開發的時候，就是操作數據，然後vue就會處理，以數據驅動去改變DOM（不知道有沒有理解錯，理解錯了指點下）。

下面就是一個最簡單的說明例子

代碼如下

html

栗子

相信也不難理解，就是 input 綁定了 message 這個值，然後在 input 修改的時候， message就改了，由於雙向綁定，同時頁面的html（ {{ message }} ）進行了修改！

好，下面進入例子學習！

3.選項卡

運行效果

GIF/194K

原理分析和實現

這個很簡單，無非就是一個點擊切換顯示而已。但是大家也要實現。如果這個看明白了，再看下面兩個！這個實例應該只是一個熱身和熟悉的作用！

這個的步驟只有一步，原理也沒什麼。我直接在代碼打注釋，看了注釋，大家就明白了！

完整代碼

4.統計總價

運行效果

GIF/474K

原理分析和實現

首先，還是先把布局寫好，和引入vue，準備vue實例，這個不多說，代碼如下

然後準備下列表數據，根據下面表格的箭頭

所以大家就知道嗎，下面的數據大概是漲這樣

準備了這麼多，大家可能想到，還缺少一個，就是記錄產品是否有選中，但是這個欄位，雖然可以在上面那裡加，但是意義不大，比如在平常項目那裡！後台的數據不會這樣返回，資料庫也不會有這個欄位，這個欄位應該是自己添加的。代碼如下

步驟1

為了著重表示我修改了什麼地方，代碼我現在只貼出修改的部分，大家對著上面的布局，就很容易知道我改的是什麼地方了！下面也是這樣操作！

點擊增加和減少按鈕（箭頭指向地方），所屬列的金額改變（紅框地方）

執行步驟1之前，要先把列表的數據給鋪出來。利用v-for指令。代碼如下

這樣，列表的數據就有了！

GIF/38K

也可以發現，

這兩個按鈕的功能已經實現了，後面的金額也會發生變化！是不是感到很驚喜！其實這裡沒什麼特別的，就是因為輸入框利用v-model綁定了數量（ pro_num ），然後兩個按鈕分別添加了事件 @click="item.pro_num--" 和@ click="item.pro_num++" 。比如剛開始pro_num是3，點擊， pro_num 就變成2，點擊， pro_num 就變成4，然後後面的金額會改改，是因為 {} 。只要pro_price或者pro_num的值改變了，整一塊也會改變，視圖就會刷新，我們就能看到變化（這些事情是vue做的，這就是MVVM的魅力，數據驅動視圖改變）。

步驟2

點擊所屬列選擇按鈕（箭頭指向地方），總計的金額（紅框地方）和已選產品的列數（藍框地方）和全選（黃框地方）會改變（如果已經全選了，全選按鈕自動變成全選，如果沒有全選，全選按鈕，自動取消全選）！

首先，選擇與取消選擇，在這裡只有兩個操作（其實只有一個：改變這條記錄的 select 欄位）。

然後改變，如果這條記錄 select 為 false ，就顯示，否則就顯示。

代碼如下

其實就是等於添加了 @click="item.select=!item.select" :class="{ check-true :item.select}" 這裡。點擊這個，這條數據的 select 欄位就取反（true->false或者false->true）。然後 :class="{ check-true :item.select}" ，就會根據這條數據的 select 欄位進行判斷，是否添加 check-true 類名，如果 select 欄位為true，就添加類名，顯示。否則不添加類名，顯示

。

然後，

全選按鈕，是否變成。這裡用一個computed（計算屬性）就好。代碼如下

html

代碼我解釋下，就是計算屬性中，定義的isSelectAll依賴productList。只要productList改變，isSelectAll的返回值就會改變，然後 :class="{ check-true :isSelectAll}" 根絕isSelectAll返回值是否添加 check-true 類名，顯示對應的樣式！

最後，

這裡的多少件產品和總價，也是使用計算屬性，有了上一步的基礎，給出代碼，大家一看就明白了！

html

代碼很簡單，html根據getTotal返回值顯示數據，getTotal依賴productList的數據，只要productList改變，返回值會改變，視圖也會改變！

GIF/97K

步驟3

點擊全選按鈕（箭頭指向部分），會自動的對產品進行全選或者取消全選，下面的總計也會發生改變

做到這一步，大家應該知道，全選或者取消全選，就是改變記錄的 select 。但是怎麼知道現在的列表有沒有全選呢？這個很賤，不需要在操作函數（全選與取消全選函數）裡面遍歷，大家應該還記得第二步的計算屬性 isSelectAll （為true就是全選，否則不是全選），把這個傳進操作函數就好，然後操作函數，根據參數，決定執行全選，還是取消全選操作。代碼如下！

html