基于vue.js快速搭建圖書管理平臺
Vue.js是當(dāng)下很火的一個JavaScript MVVM（Model-View-ViewModel）庫，它是以數(shù)據(jù)驅(qū)動和組件化的思想構(gòu)建的。相比于Angular.js，Vue.js提供了更加簡潔、更易于理解的API，使得我們能夠快速地上手并使用Vue.js。
上一期簡單講解了vue的基本語法，這一次我們做一個小項(xiàng)目，搭建一個簡單的圖書管理平臺，能夠讓我們更深刻的理解這門語言的妙用。
1、DEMO樣式
首先我們需要搭建一個簡單的demo樣式，推薦大家使用bootstrap，可以很快的搭建出一個清晰簡潔的頁面。
給大家分享一段我的代碼吧?！ ?/p>
<div class="container">
<div class="col-md-6 col-md-offset-3">
<h1>Vue demo</h1>
<div id="app">
<table class="table table-hover ">
<caption></caption>
<thead>
<tr>
<th>序號</th>
<th>書名</th>
<th>作者</th>
<th>價格</th>
<th>操作</th>
</tr>
</thead>
</table>
<div id="add-book">
<legend>添加書籍</legend>
<div class="form-group">
<label for="group">書名</label>
<input type="text" class="form-control" id="group">
</div>
<div class="form-group">
<label for="author">作者</label>
<input type="text" class="form-control" id="author">
</div>
<div class="form-group">
<label for="price">價格</label>
<input type="text" class="form-control" id="price">
</div>
<button class="btn btn-primary btn-block">添加</button>
<button class="btn btn-primary btn-block">查詢</button>
</div>
<div id="update-book">
<legend>修改書籍</legend>
<div class="form-group">
<label for="group1">書名</label>
<input type="text" class="form-control" id="group1">
</div>
<div class="form-group">
<label for="author1">作者</label>
<input type="text" class="form-control" id="author1">
</div>
<div class="form-group">
<label for="price1">價格</label>
<input type="text" class="form-control" id="price1">
</div>
<button class="btn btn-primary btn-block">完成</button>
</div>
</div>
</div>
</div>
運(yùn)用了bootstrap的柵格系統(tǒng)，和一些簡單的組件，不光簡單快捷，還能自動實(shí)現(xiàn)響應(yīng)式呢。
而且做出來的效果也不難看，挺整潔的。
給大家看下剛開始的效果圖。
如果對這個CSS框架沒有了解的話，自己寫一下樣式也沒關(guān)系。
2、創(chuàng)建vue實(shí)例
接下來，我們導(dǎo)入自己的JS文件，創(chuàng)建一個vue實(shí)例。
new Vue({
el: '#app',
data: {
book: {
id: 0,
author: '',
name: '',
price: ''
},
books: [{
id: 1,
author: '曹雪芹',
name: '紅樓夢',
price: 32.0
}, {
id: 2,
author: '施耐庵',
name: '水滸傳',
price: 30.0
}, {
id: '3',
author: '羅貫中',
name: '三國演義',
price: 24.0
}, {
id: 4,
author: '吳承恩',
name: '西游記',
price: 20.0
}]
}
});
data中是一些初始的數(shù)據(jù)，可以隨意填寫。
3 、將各種指令添加到HTML
我們說過，vue的核心聚焦在視圖層，所以指令是最重要的一步，我們一點(diǎn)一點(diǎn)說。
不過因?yàn)橹噶罘植嫉谋容^亂，所以直接附上全部代碼，然后我一個一個的解釋。
<div id="app">
<table class="table table-hover ">
<caption></caption>
<thead>
<tr>
<th>序號</th>
<th>書名</th>
<th>作者</th>
<th>價格</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-cloak v-for="book in books">
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.author}}</td>
<td>{{book.price}}</td>
<template v-if="book.id%2==0">
<td class="text-left">
<button type="button" class="btn btn-success" @click="delBook(book)" class="del">刪除</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" @click="delBook(book)" class="del">刪除</button>
<button type="button" class="btn btn-danger" @click="updateBook(book)">修改</button>
</td>
</template>
</tr>
</tbody>
</table>
<div id="add-book">
<legend>添加書籍</legend>
<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>
<button class="btn btn-primary btn-block" v-on:click="searchBook()">查詢</button>
</div>
<div id="update-book">
<legend>修改書籍</legend>
<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="updatesBook()">完成</button>
</div>
</div>
首先，將id為app的vue實(shí)例掛載到DOM節(jié)點(diǎn)上，如果對于這些基本內(nèi)容還不了解的話，可以去看我的上一篇博客，詳細(xì)的介紹了關(guān)于vue的基礎(chǔ)知識。
下面的表格，在tr中通過一個v-for循環(huán)，將vue實(shí)例data中的數(shù)據(jù)，全部載入到表格里。
細(xì)心的讀者應(yīng)該發(fā)現(xiàn)了，我在v-for前寫了一個v-cloak，這是干什么的呢？
用過angular，vue這種框架的人應(yīng)該都知道，當(dāng)我們用{{}}綁定數(shù)據(jù)的時候，當(dāng)頁面刷新的瞬間，會看到閃爍而過的原始代碼。
當(dāng)信息量比較大的時候，這種體驗(yàn)無疑是十分惡劣的，這個時候，v-cloak這個指令保持在元素上直到關(guān)聯(lián)實(shí)例結(jié)束編譯。
和 CSS 規(guī)則如[v-cloak] { display: none }一起用時，這個指令可以隱藏未編譯的 Mustache 標(biāo)簽直到實(shí)例準(zhǔn)備完畢。
這樣就解決了刷新的瞬間頁面出現(xiàn)大量亂碼的情況。
下面的v-if和v-else就是為了練習(xí)一下各種指令啦，讓我們的按鈕生成的時候可以輪流生成兩種顏色~
而v-model是為了在input中輸入內(nèi)容時，可以動態(tài)的取到輸入的內(nèi)容。
還是那句話，這些基本指令不認(rèn)識的話，可以去我的上一篇博客查看。
那些v-on:click綁定的函數(shù)，一會一個一個詳細(xì)解釋，現(xiàn)在先來看一下效果。
還不錯吧~接下來我們就開始說一下各個函數(shù)。
addBook: function() {
//計(jì)算書的id
this.book.id = this.books.length + 1;
this.books.push(this.book);
//將input中的數(shù)據(jù)重置
this.book = {};
}
這個是添加函數(shù)，大家可以去上面看一下vue實(shí)例中data里面的代碼。
其實(shí)就只是這么幾行代碼，vue的強(qiáng)大就已經(jīng)展現(xiàn)的淋漓盡致了。
因?yàn)槲覀冊谳斎肟蛑薪壎藇-model，所以我們輸入的內(nèi)容就會動態(tài)的與book這個對象同步。
這個函數(shù)的原理就是給book那個對象的id賦值，然后將通過v-model動態(tài)綁定到輸入框上的數(shù)據(jù)，也就是我們輸入的數(shù)據(jù)，push進(jìn)books那個數(shù)組。
最后將book對象清空，也就是把我們的輸入框清空了。
區(qū)區(qū)3行代碼，信息的錄入就完成了，是不是很神奇呢。
哦對了，在vue實(shí)例中，this指向的就是本身這個vue實(shí)例，對面向?qū)ο蟮母拍顩]有了解的話，建議百度一下this指向問題。
下面看一下刪除
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;
}
}
}
刪除的原理是取到當(dāng)前books數(shù)組的長度，當(dāng)前選中的那一條的下標(biāo)是它的id-1，用splice方法將它刪除。
然后通過循環(huán)，將id比被刪除數(shù)據(jù)大的那些項(xiàng)的id都減去1，保持序號的連續(xù)。
然后是修改
updateBook: function(book) {
$("#add-book").css("display","none");
$("#update-book").css("display","block");
id = book.id;
},
updatesBook:function(book) {
this.book.id = id;
this.books.splice(id-1,1,this.book);
$("#add-book").css("display","block");
$("#update-book").css("display","none");
this.book = {};
第一個函數(shù)就是將修改框彈出來，把添加的框隱藏掉，然后把需要修改的id綁定到一個全局的變量上~
然后第一個函數(shù)才是真正的修改命令。
將剛才綁定的全局變量，賦值給當(dāng)前id，然后還是用splice方法，用輸入的內(nèi)容把原來的內(nèi)容替換掉~
然后還是同樣的，將book對象也就是輸入框清空。
結(jié)尾
這樣一個簡單的信息錄入平臺就完成了，雖然代碼不多，但是足以讓我們深深感受到vue的強(qiáng)大。
未來頁面的發(fā)展趨勢，一定是繞不開這樣的設(shè)計(jì)思路的。
以上所述是小編給大家介紹的基于vue.js快速搭建圖書管理平臺，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
相關(guān)文章
vue3?element-plus實(shí)現(xiàn)圖片預(yù)覽功能實(shí)例
這篇文章主要給大家介紹了關(guān)于vue3?element-plus實(shí)現(xiàn)圖片預(yù)覽功能的相關(guān)資料,在項(xiàng)目中我們經(jīng)常會碰到圖片預(yù)覽的功能需求,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
element-plus/element-ui走馬燈配置圖片及圖片自適應(yīng)的最簡便方法
走馬燈功能在展示圖片時經(jīng)常用到,下面這篇文章主要給大家介紹了關(guān)于element-plus/element-ui走馬燈配置圖片及圖片自適應(yīng)的最簡便方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
vue點(diǎn)擊導(dǎo)航頁面實(shí)現(xiàn)自動滾動到特定位置
這篇文章主要介紹了vue點(diǎn)擊導(dǎo)航頁面實(shí)現(xiàn)自動滾動到特定位置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
下面小編就為大家分享一篇在vue中實(shí)現(xiàn)圖片和文件上傳的示例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue使用xlsx導(dǎo)入到表格中代碼,具體實(shí)現(xiàn)是先通過FileReader將上傳的文件讀取為二進(jìn)制數(shù)據(jù),然后使用xlsx將它解析成JSON數(shù)據(jù),最后將JSON數(shù)據(jù)填充到表格中,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了使用Vant如何完成各種Toast提示框，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
在vue.js項(xiàng)目中使用vue-router，可以使用路由進(jìn)行界面或路徑跳轉(zhuǎn),下面這篇文章主要給大家介紹了關(guān)于Vue3使用路由VueRouter4的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-07-07
vue依賴包報(bào)錯問題eslint\lib\cli-engine\cli-engine.js:421
這篇文章主要介紹了vue依賴包報(bào)錯問題eslint\lib\cli-engine\cli-engine.js:421,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
vue3+ts實(shí)際開發(fā)中該如何優(yōu)雅書寫vue3語法
近嘗試上手 Vue3+TS+Vite,所以下面這篇文章主要給大家介紹了關(guān)于vue3+ts實(shí)際開發(fā)中該如何優(yōu)雅書寫vue3語法的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
詳解為element-ui的Select和Cascader添加彈層底部操作按鈕
這篇文章主要介紹了詳解為element-ui的Select和Cascader添加彈層底部操作按鈕，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02