使用vue.js 制作一個用戶表添加頁面，實際上是把原來需要使用js寫的部分，改寫成vue.js的格式
首先，想象一下，先做思考，我們要添加用戶表，設涉及到哪些數據，一個是用戶id，一個是用戶名，一個是年齡。。。。還有很多，為了數據的簡單明了，只舉例部分數據即可
在vue中，el是作用的范圍，這個直接獲取html 中的id即可，再一個是data，這個是vue中存儲數據的部分，剛才說到，這里有一個用戶名，一個年齡。而沒一個用戶名對用一個年齡，這個是固定的，對於固定的東西，我們喜歡綁定在一起，這樣在調用的時候，就不需要進行判斷啊之類的了；這里我們使用userName來存放用戶名，使用userAge來存放用戶年齡；要綁定在一起，我們不妨再設定一個變量（設置為 數組）：userList，用來存放用戶對象，包括用戶名和用戶年齡；現在，有三個變量了，一個是userName，一個是userAge，再一個是userList，為了方便我們在設定一個curIndex，用來存儲當前的用戶的索引；好了，data部分告一段落；
現在來看methods 部分：這里是操作方法，先想一下我們具體會用到哪些方法呢：一個是用戶添加，這個在添加的時候會用到，一個是用戶重置（當然也可以使用form 表單中的type='reset' 來實現，這里不打算使用表單自帶的重置方法），還有一個是用戶名刪除（這里需要說明的是：刪除分為刪除全部數據和刪除一條數據），當刪除全部數據時，只需要將userList=[],即使用userList等於一個空數組即可，如果是刪除一條數據，我們需要獲取此條數據的索引，當獲取索引后，在js中有一個函數splice()，可以用來刪除數據，格式arr.splice(n,1),這里n表示要刪除的數組中的項目的索引，1表示刪除1個項目；大體的思路就是以上；
寫代碼的思路：首先把樣子寫出來，要什么樣式，寫出來之后，在進行添加操作
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <link rel="stylesheet" href="./css/bootstrap.min.css"> 8 <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> 9 <script src="./js/vue.js"></script> 10 <script src="./js/bootstrap.js"></script> 11 <title>Document</title> 12 <script> 13 window.onload = function() { 14 var c = new Vue({ 15 el: "#box", 16 data: { 17 userList: [], //用來存放用戶對象 18 userName: '', // 用戶名 19 userAge: '', // 用戶年齡 20 curIndex: -10, //選中的當前項目索引，隨便先設一個值-10 21 }, 22 methods: { 23 // 用戶添加，添加的方法是，直接寫成一個對象壓入棧中 24 addUser: function() { 25 this.userList.push({ 26 name: this.userName, 27 age: this.userAge 28 }); 29 // 添加完成后，清空數據 30 this.userAge = ''; 31 this.userName = ''; 32 }, 33 // 刪除用戶 34 delRow: function(n) { 35 // 傳值為-1時，表示刪除全部 36 if (n == -1) { 37 this.userList = []; 38 } else { 39 // 傳值不為-1時，表示刪除傳入的項目 40 this.userList.splice(n, 1); 41 } 42 }, 43 // 重置函數：把用戶名和年齡清空 44 resetRow: function() { 45 this.userAge = ''; 46 this.userName = ''; 47 } 48 } 49 }); 50 } 51 </script> 52 </head> 53 <body> 54 <!-- 設置id 為 box ，這樣就鎖定了vue作用的范圍，也就是在id="box"的范圍內有效 ，為了美觀，這里調用bootstrap 進行css 設置--> 55 <div class="container" id="box"> 56 <!-- 這里role是機器語言，是為了無障礙閱讀准備的 --> 57 <form action="" role="form"> 58 <div class="form-group"> 59 <!-- label 標簽，for的值與輸入框的id值相同時，關聯着輸入框的值,即當點擊label標簽時，會自動聚焦在關聯的input輸入框里 --> 60 <label for="username">用戶名：</label> 61 <!-- v-modal 的值表示這個輸入框關聯着vue中data 下的userName --> 62 <input type="text" class="form-control" id="username" placeholder="請輸入用戶名" v-model="userName"> 63 </div> 64 <div class="form-group"> 65 <label for="userage">年齡：</label> 66 <!-- v-modal 的值表示這個輸入框關聯着vue中data 下的userAge --> 67 <input type="text" class="form-control" id="userage" placeholder="請輸入年齡" v-model="userAge"> 68 </div> 69 <div class="form-group"> 70 <!-- v-on:click 是綁定vue中點擊事件的寫法,這里綁定addUser()方法 --> 71 <input type="button" value="添加" v-on:click="addUser();" class="btn btn-primary"> 72 <!-- v-on:click 是綁定vue中點擊事件的寫法,這里綁定resetRow()方法 --> 73 <input class="btn btn-danger" value="刪除" type="button" v-on:click="resetRow();"> 74 </div> 75 </form> 76 <hr> 77 <table class="table table-hover table-bordered"> 78 <caption class="h2 text-inifo">用戶信息表</caption> 79 <thead> 80 <tr class="text-danger "> 81 <th class="text-center">序號</th> 82 <th class="text-center">名字</th> 83 <th class="text-center">年齡</th> 84 <th class="text-center">操作</th> 85 </tr> 86 </thead> 87 <tbody> 88 <!-- v-for遍歷數組userList --> 89 <tr class="text-center" v-for="value in userList"> 90 <!-- 數組的是從0 開始計算的，所以這里加1 --> 91 <td>{{$index+1}}</td> 92 <td>{{value.name}}</td> 93 <td>{{value.age}}</td> 94 <td> 95 <!-- data-toogle意思是觸發modal，即模態框的意思，而模態框這里指觸發id 為layer 的模態框 --> 96 <!-- 並且綁定點擊事件，改變curIndex的值，將它的值設置為當前遍歷的userList的索引 --> 97 <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" v-on:click="curIndex=$index">刪除</button> 98 </td> 99 </tr> 100 <!-- v-show的值為true時候，本元素顯示，否則隱藏 --> 101 <tr v-show="userList.length != 0"> 102 <td class="text-right" colspan="4"> 103 <!-- data-toogle意思是觸發modal，即模態框的意思，而模態框這里指觸發id 為layer 的模態框 --> 104 <!-- 並且綁定點擊事件，改變curIndex的值，將它的值設置為-1 --> 105 <button class="btn btn-danger btn-sm" v-on:click="curIndex=-1;" data-toggle="modal" data-target="#layer">刪除全部</button> 106 </td> 107 </tr> 108 <!-- v-show的值為true時候，本元素顯示，否則隱藏 --> 109 <tr v-show="userList.length == 0 "> 110 <td class="text-center text-muted" colspan="4"> 111 <p>暫時無數據.........</p> 112 </td> 113 </tr> 114 </tbody> 115 </table> 116 <!-- 下面是模態框 id為layer,模態框，正常情況下是影藏的，是有當受到觸發時，才會顯示，，這個使用bootstrap.js來實現的--> 117 118 <div class="modal fade" role="dialog" id="layer"> 119 <div class="modal-dialog"> 120 <div class="modal-content"> 121 <div class="modal-header"> 122 <!-- data-dismiss=“modal”,意思是，當點擊本按鈕時，會觸發影藏modal模態框 --> 123 <button class="close" data-dismiss="modal"> 124 <span>×</span> 125 </button> 126 <h4 class="modal-title">確認刪除么？</h4> 127 </div> 128 129 <div class="modal-body text-right"> 130 <button class="btn btn-primary btn-sm" data-dismiss="modal">取消</button> 131 <!-- 當點擊確認時，觸發綁定事件，執行delRow()方法，同時隱藏模態框（data-dismiss="modal"） --> 132 <button class="btn btn-danger btn-sm" data-dismiss="modal" v-on:click="delRow(curIndex);">確認</button> 133 </div> 134 </div> 135 </div> 136 </div> 137 </div> 138 </body> 139 </html>
運行結果：
