實用小專案——Vue.js 實現增刪查改功能
阿新 • • 發佈：2018-12-31
最近學習了vue.js框架，嘗試著做了一個增刪查改功能的小專案。
今天發博來跟大家交流交流經驗。整體效果如下動態圖：
首先，我使用的是Bootstrap搭建整體框架：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue Demo</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/> <script src="js/vue.js"></script> <style type="text/css"> #update-book{ // 先將修改頁面div隱藏，點選修改按鈕後顯示 display: none; } </style> </head> <body> <div class="container"> <div class="col-md-6 col-md-offset-3"> <h1>Vue demo</h1> <div id="app"> <table class="table table-hover "> <br /> <thead> <tr> <th>序號</th> <th>書名</th> <th>作者</th> <th>價格</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for = 'book in filterBooks'> <td>{{book.id}}</td> <td>{{book.author}}</td> <td>{{book.name}}</td> <td>{{book.price}}</td> <!--模板標籤 v-if v-else--> <template v-if = 'book.id %2 == 0'> <td class="text-left"> <button type="button" class="btn btn-success" class="del" @click = "delBook(book)">刪除</button> <button type="button" class="btn btn-success" @click = "updateBook(book)" >修改</button> </td> </template> <template v-else> <td class="text-left"> // 建立點選事件 <button type="button" class="btn btn-danger" class="del" @click = "delBook(book)">刪除</button> <button type="button" class="btn btn-danger" @click = "updateBook(book)">修改</button> </td> </template> </tr> </tbody> </table> <!-- 新增書籍 --> <div id="add-book"> <!--查詢輸入框--> <div class="row" style="margin-bottom: 30px;"> <div class="col-md-4" style="text-align: left;font-size: 16px;line-height: 30px;"> 請輸入查詢書名： </div> <div class="col-md-5" style="text-align: left;"> // v-model ：在表單控制元件元素（input等）上建立雙向資料繫結（資料來源）；跟Angular中 ng-model 用法一樣。 <input type="text" class="form-control" v-model = "search" /> </div> </div> <h3>新增書籍</h3> <hr /> <div class="form-group"> <label for="group">書名</label> <input type="text" class="form-control" id="group" v-model = "book.name"> </div> <div class="form-group"> <label for="author">作者</label> <input type="text" class="form-control" id="author" v-model = "book.author"> </div> <div class="form-group"> <label for="price">價格</label> <input type="text" class="form-control" id="price" v-model = "book.price"> </div> <button class="btn btn-primary btn-block" v-on:click = "addBook()">新增</button> </div> <!-- 修改書籍 --> <div id="update-book"> <h3>修改書籍</h3> <hr /> <div class="form-group"> <label for="group1">書名</label> <input type="text" class="form-control" id="group1" v-model = "book.name"> </div> <div class="form-group"> <label for="author1">作者</label> <input type="text" class="form-control" id="author1" v-model = "book.author"> </div> <div class="form-group"> <label for="price1">價格</label> <input type="text" class="form-control" id="price1" v-model = "book.price"> </div> <button class="btn btn-primary btn-block" v-on:click = "updatedBook()">完成</button> </div> </div> </div> </div> // 匯入JQuery 框架 <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> // 匯入自己的JS指令碼 <script type="text/javascript" src="js/vue demo.js"></script> </body> </html>
框架搭好了，先匯入一下資料（隨手寫的），在data中，最後的search是最後查詢功能要用到的，與查詢中 v-model = "search"繫結：
data : { book : [{ id : 0, author : '', name : '', price : '' }], books : [{ id : 1, author : '曹雪芹', name : '紅樓夢', price : 36.00 },{ id : 2, author : '曹雪芹', name : '三國演義', price : 37.00 },{ id : 3, author : '曹雪芹', name : 'Good boy', price : 85.00 },{ id : 4, author : '曹雪芹', name : '紅樓夢', price : 39.00 }], search : "" // 查詢功能使用，【注意】""中不能加空格，否則直接預設查詢空格 }
接下來，要開始做功能了，在methods 裡面寫新增、刪除、修改功能（函式）：
var id = 0; var vm = new Vue({ el : "#app", // 計算函式 動態變化的資料 methods : { // 寫函式 addBook : function(){ this.book.id = this.books.length + 1; this.books.push(this.book); this.book = {}; }, delBook : function(book){ var blength = this.books.length; this.books.splice(book.id-1,1 ); for(var i = 0;i < blength;i++){ if(book.id < this.books[i].id){ this.books[i].id -= 1; } } }, // 修改按鈕 updateBook : function(book){ $("#add-book").css("display","none"); $("#update-book").css("display","block"); id = book.id; }, // 修改完成後的 確認按鈕點選事件 updatedBook : function(){ this.book.id = id; this.books.splice(id-1,1,this.book); $("#add-book").css("display","block"); $("#update-book").css("display","none"); this.book = {}; } }, }）
然後在computed中，定義過濾器。利用 computed 計算屬性時，是將content和message繫結，只有當message發生變化時，才會觸發content。
// 計算屬性（過濾） 查詢功能
computed : {
filterBooks : function(){
var books = this.books;
var search = this.search;
/*if(!search){ // 沒有輸入查詢內容 （ 手動寫的查詢功能 ）
return books;
}
var arr = [];
for(var i = 0; i < books.length;i++){
var index = books[i].name.indexOf( search );
if(index > -1){
arr.push(books[i]);
}
}
return arr;
*/
// vue 中的過濾器
return books.filter(function(book){
return book.name.toLowerCase().indexOf(search.toLocaleLowerCase()) != -1
// 不區分大小寫查詢
});
}
},這樣子我們的增刪改查功能就完成了，雖然還有些許不完善，但是基本的功能已經實現了。
區區100行JS程式碼，就可以實現原生JS洋洋灑灑好幾百行的程式碼功能，可以看出Vue.js確實很輕便、很好用。
但是，使用框架的前提也是在原生JS基礎之上的，不能忽視基礎的重要性！
今天的分享結束了，如有問題，可以提出來，小W同大家一起解決。如果有不妥的地方，歡迎拍磚~~
完整JS程式碼附上：
var id = 0;
var vm = new Vue({
el : "#app",
// 計算函式 動態變化的資料
methods : { // 寫函式
addBook : function(){
this.book.id = this.books.length + 1;
this.books.push(this.book);
this.book = {};
},
delBook : function(book){
var blength = this.books.length;
this.books.splice(book.id-1,1 );
for(var i = 0;i < blength;i++){
if(book.id < this.books[i].id){
this.books[i].id -= 1;
}
}
},
// 修改按鈕
updateBook : function(book){
$("#add-book").css("display","none");
$("#update-book").css("display","block");
id = book.id;
},
// 修改完成後的 確認按鈕點選事件
updatedBook : function(){
this.book.id = id;
this.books.splice(id-1,1,this.book);
$("#add-book").css("display","block");
$("#update-book").css("display","none");
this.book = {};
}
},
// 計算屬性（過濾） 查詢功能
computed : {
filterBooks : function(){
var books = this.books;
var search = this.search;
/*if(!search){ // 沒有輸入查詢內容
return books;
}
var arr = [];
for(var i = 0; i < books.length;i++){
var index = books[i].name.indexOf( search );
if(index > -1){
arr.push(books[i]);
}
}
return arr;
*/
// vue 中的過濾器
return books.filter(function(book){
return book.name.toLowerCase().indexOf(search.toLocaleLowerCase()) != -1
});
}
},
data : {
book : [{
id : 0,
author : '',
name : '',
price : ''
}],
books : [{
id : 1,
author : '曹雪芹',
name : '紅樓夢',
price : 36.00
},{
id : 2,
author : '曹雪芹',
name : '三國演義',
price : 37.00
},{
id : 3,
author : '曹雪芹',
name : 'Good boy',
price : 85.00
},{
id : 4,
author : '曹雪芹',
name : '紅樓夢',
price : 39.00
}],
search : "" // 查詢功能，""中不能加空格，否則預設查詢空格
}
})