快速搭建基于vue.js的图书馆管理平台

Vue.js是一个流行的JavaScript MVVM(Model-View-ViewModel)库，它是用数据驱动和基于组件的思想构建的。与Angular.js相比，Vue.js提供了一个更简单、更容易理解的API，使我们能够快速入门和使用Vue.js。

最后一期简要说明了vue的基本语法。这次我们做了一个小项目，搭建了一个简单的图书馆管理平台，可以让我们更深刻地理解这门语言的妙用。

1.演示风格

首先，我们需要构建一个简单的演示风格。我们建议您使用bootstrap，它可以快速构建一个清晰简洁的页面。

让我分享一段我的代码给你。

div class=' container ' div class=' col-MD-6 col-MD-offset-3 ' h1vuedemo/h1 div id=' app ' table class=' table table-hover '标题/题注ad tr第几个序列号/第几个标题/第几个作者/第几个价格/第几个操作/第几个/tr/thead/tablediv id=' add-book '图例添加book/图例div class=' form-group '标签为=' group' title/Label输入类型=' text ' class=' form-control ' id=' group '/group 标签输入类型=' text ' class=' form-control ' id=' author '/div class=' form-group ' Label for=' price ' price/Label输入类型=' text ' class=' form-control ' id=' price '/div Button class=' btnbtn-primary BTN-block ' add/Button Button class=' btnbtn-primary BTN-block '查询/Button/div id=' update-book '图例修改book/图例div class=' form-group ' Label for=' group 1 ' book title/Label label input type=' text ' class=' form-control ' id=' author 1 '/div class=' form-group ' label for=' price 1 ' price/Labelinput type=' text ' class=' form-control ' id=' price 1 '/div button class=' btnbtn-primary BTN-block ' finish/button/div/div/div/div使用bootstrap网格系统和一些简单的组件，不仅简单快捷，还能自动实现响应。

而且效果不难看，相当工整。

先给大家看看效果图。

如果不知道这个CSS框架，自己写风格也没关系。

2.创建vue实例

接下来，我们导入自己的JS文件并创建一个vue实例。

new Vue({ el: '#app '，data: { book: { id: 0，author: ' '，name: ' '，price: '' })，books: [{ id: 1，Author: '曹雪芹'，name: '红楼梦'，price : 32.0}，{ ID : 2，author 33: '数据包含一些初始数据，可以随意填写。

3.给HTML添加各种说明

正如我们所说，vue的核心集中在视图层，所以指令是最重要的一步，我们将一点一点地讨论它。

但是由于指令分布比较混乱，所有的代码都是直接附上的，接下来我会一一讲解。

div id=' app ' table class=' table table-hover '题注/标题和第几个序列号/第几个标题/第几个作者/第几个价格/第几个操作/第几个/tr/第几个t body tr v-斗篷v-for=' books in books ' TD { { book . id } }/TD TD { { book . name } }/TD { { book . author } }/TD TD TD { { book . price } }/Tdttemplate v-if=' book . id % 2==0 ' TD class Button Button type=' Button ' class=' btnbtn-success ' @ click=' update book(book)' modify/Button/TD/Template Template v-else TD class=' text-left ' Button type=' btnbtn-dancer ' @ click=' del book(book)' class=' del ' delete/Button type=' Button ' class=' btnbtn-dancer ' @ click=' update book(book)' modify/Button/TD/Template/tr/tbbody/tablediv id=' add-book ' legend添加一本书Legend div class=' form-group '标签为=' group' title/label输入类型=' text' class=' form-control' id=' group ' v-model=' book . name '/Div class=' form-group '标签为=' author' author/label输入类型=' text ' class=' form-control ' id=' author ' v-model=' book . author '/Div class=' form-group '标签为=' price ' price/label输入类型=' text ' class=' form-control ' id=' div button class=' btnbtn-primary BTN-block ' v-: click=' addbook()' add/button button class=' btnbtn-primary BTN-block ' v-3360 click=' search book()' Query/button/div id=' update-book '图例修改book/图例div class=' form-group '标签为=' group1' title/Label输入类型=' text ' class=' form-control ' id=' group 1 ' v-model=' book name '/。 author/div div class=' form-group ' label for=' price 1 ' price/label input type=' text ' class=' form-control ' id=' price 1 ' v-model=' book . price '/Div button class=' btnbtn-primary BTN-block ' v-: click=' updates bok()' done/button/div/div首先，在DOM节点上挂载带有id app的vue实例。如果你不知道这些基本内容，可以去我上一篇博客，详细介绍vue的基本知识。

在下表中，通过tr中的v-for循环，vue实例数据中的所有数据都被加载到表中。

细心的读者应该会发现，我在v-for之前写了一件v-斗篷。这是做什么的？

任何使用过angular和vue框架的人都应该知道，当我们用{{}}绑定数据时，当页面刷新时，我们会看到原来的代码一闪而过。

当信息量比较大的时候，这种体验无疑是非常糟糕的。此时，指令v-斗篷保留在元素上，直到相关实例完成编译。

当与[v-斗篷] {display: none}等CSS规则一起使用时，该指令可以隐藏未编译的小胡子标签，直到实例准备好。

这样就解决了刷新瞬间出现大量乱码页面的情况。

下面的v-if和v-else只是为了练习各种指令，这样在生成我们的按钮时，就可以依次生成两种颜色了~

而v-model是在input中输入内容时动态获取输入内容。

同样，如果你不知道这些基本说明，你可以查看我的上一篇博客。

on:click绑定的功能将逐一详细说明。现在我们先来看看效果。

还不错~先来说说各个功能。

AddBook:函数(){//计算书的id为this . book . id=this . books . length 1；推(这本书)；//重置输入this.book中的数据={ }；}这是一个添加功能。您可以转到上面，查看vue实例中数据中的代码。

事实上，这只是几行代码，vue的力量已经得到了充分的展示。

因为我们在输入框中绑定了v-model，所以我们的输入将与对象书动态同步。

这个函数的原理是分配book对象的id，然后通过v-model将动态绑定到输入框的数据，也就是我们输入的数据，推送到books数组中。

最后，清空book对象，也就是清空我们的输入框。

只用3行代码，就完成了信息的输入。是不是很神奇？

哦，是的，在vue实例中，这是指vue实例本身。如果你不知道面向对象的概念，建议百度点题。

让我们来看看删除

delBook:函数(book){ var blenth=this . books . length；this.books.splice(book.id-1，1)；for(var I=0；我混合；i ) { if(book.id this.books[i]。{ this.books[i]。id-=1；删除的原则是获取当前书籍数组的长度。当前选中的下标为其id-1，通过拼接方式删除。

然后，通过循环，将那些id大于删除数据的项目的id减去1，以保持序列号连续。

然后是修改

updateBook:函数(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={ }；第一个功能是弹出修改框，隐藏添加的框，然后将需要修改的id绑定到一个全局变量~

那么第一个函数就是真正的修改命令。

将刚刚绑定的全局变量赋给当前id，然后用拼接的方法用输入的内容替换原来的内容~

然后，清空book对象，也就是输入框。

结局

这么简单的信息输入平台就完成了，虽然代码不多，但足以让我们深刻感受到vue的力量。

未来页面的发展趋势一定离不开这样的设计思路。

以上是边肖介绍的基于vue.js的快捷图书馆管理平台，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！