在上一篇文章中我们已经学习了vue的基本语法,常用属性,了解了vue的基本使用,现在让我们用vue配合Bootstrap来完成一个小项目。

首先导入Bootstap文件。

<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>

导入完成后,用Boostrap的各种组件,完成一个基本的页面:

 <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.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" 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-3" style="text-align: right;font-size: 16px;line-height: 30px;">
请输入书名
</div>
<div class="col-md-5">
<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" @click="updatesBook">完成</button>
</div>
</div>
</div>
</div>

这样页面我们就做好了,效果如下:

然后导入vue文件

<script src="js/vue.min.js"></script>

新建一个自己的JS文件

首先完成添加功能:

new Vue({
el:"#app",
methods:{
addBook:function(){
this.book.id = this.books.length+1;
this.books.push(this.book);
this.book={};
},
}

将addBook函数用v-on:click指令绑定到添加按钮上。

这样添加功能就完成了。

测试一下:

然后我们再完成删除功能:

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;
},
updatesBook: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 = {};
}
},

这样利用vue实现的管理系统就大体完成了。

vue小项目---管理系统的更多相关文章

  1. Vue小项目二手书商城:(四)详情页和购物车(emit、prop、computed)

    实现效果: 点击对应商品,对应的商品详情页出现,详情页里面还有“Add to cart”按钮和“×”退出按钮. 点击“Add to cart”可以将商品加入购物车,每件商品只能添加一次,如果把购物车的 ...

  2. Vue小项目二手书商城:(三)前端渲染数据

    实现内容: axios取到的数据在前端使用(父子组件各自应该怎么使用) 一.简单使用(在哪取在哪用) 1.在App.vue中script中加上data(data专属于当前组件,父子组件传参通过prop ...

  3. Vue小项目二手书商城:(二)axios前后端数据交互

    实现内容: 写路由接口(express) axios取数据 一.写接口 1.我们要在前端取到后端的数据(之前写的data.json)可以用vue-resourse或者用axios,在vue2之后官方就 ...

  4. Vue小项目二手书商城:(一)准备工作、组件和路由

    本项目基于vue2.5.2,与低版本部分不同之处会在(五)参考资料中提出 完整程序:https://github.com/M-M-Monica/bukesi 实现内容: 资源准备(mock数据) 组件 ...

  5. Vue小项目二手书商城:(五)参考资料

    本项目基于vue2.5.2,如有错误,望指正. 完整程序:https://github.com/M-M-Monica/bukesi Vue.js官方文档:https://cn.vuejs.org/v2 ...

  6. springboot实战小项目-简要介绍、vue项目创建

    因为菜,所以要好好学习! 一.项目介绍:这是一个后台管理系统,准备实现的功能: 1.登录.注册.个人信息查看.退出登录 2.根据关键字查询用户.新增用户.根据id或者其他字段排序.编辑用户信息.删除用 ...

  7. vue练手小项目--眼镜在线试戴

    最近看到了一个眼镜在线试戴小项目使用纯js手写的,本人刚学习vue.js没多久,便试试用vue做做看了,还没完善. 其中包括初始图片加载,使用keywords查找,父子组件之间传递信息,子组件之间传递 ...

  8. Vue + WebApi 小项目:构造自己的在线 Markdown 笔记本应用

    Vue + WebApi 小项目:构造自己的在线 Markdown 笔记本应用 目录 概要 知识点 完整示例图 代码与资源文件 流程步骤 概要 基于 MVP 最小可行性产品设计理念,我们先完成一个可以 ...

  9. 一个 Vue & Node 的全栈小项目

    约学 - 可以寻找一起自习的小伙伴的Web APP 一个基于 Vue & Node 的移动端全栈小项目 在线演示(请使用移动端查看效果) 源码地址: https://github.com/G- ...

随机推荐

  1. Atlas框架介绍集成(一)

    Atlas是什么? Atlas是一个Android客户端容器框架,主要提供了组件化.动态性.解耦化的支持.支持在编码期.Apk运行期以及后续运维修复期的各种问题. 在工程期,实现工程独立开发,调试功能 ...

  2. 15 Validation

    一.模型选择问题 如何选择? 视觉上 NO 不是所有资料都能可视化;人脑模型复杂度也得算上 通过Ein NO 容易过拟合;泛化能力差 通过Etest NO 能保证好的泛化,不过往往没法提前获得测试资料 ...

  3. Quartz学习——Spring和Quartz集成详解(三)

    Spring是一个很优秀的框架,它无缝的集成了Quartz,简单方便的让企业级应用更好的使用Quartz进行任务的调度.下面就对Spring集成Quartz进行简单的介绍和示例讲解!和上一节 Quar ...

  4. js中+号的另外一种用法

    JavaScript中可以在某个元素前使用 ‘+’ 号,这个操作是将该元素转换成Number类型,如果转换失败,那么将得到 NaN. 所以 +new Date 将会调用 Date.prototype ...

  5. JavaWeb(二)会话管理之细说cookie与session

    前言 前面花了几篇博客介绍了Servlet,讲的非常的详细.这一篇给大家介绍一下cookie和session. 一.会话概述 1.1.什么是会话? 会话可简单理解为:用户开一个浏览器,点击多个超链接, ...

  6. Pycharm安装、设置、优化

    一.版本选择 建议安装5.0版本,因为好注册,这个你懂得. 下载地址: https://confluence.jetbrains.com/display/PYH/Previous+PyCharm+Re ...

  7. HDU1411 欧拉四面体

    用向量解决: 三角形面积:S=1/2*|x1*y2-x2*y1|;      (粗体表示向量) 三棱锥体积:V=1/6*(OA*OB)*OC 不知道哪里去找的代码,毕竟很线性代数矩阵什么的很头疼,晚上 ...

  8. gitlab仓库迁移

    遇到一个情况,需要将两个gitlab仓库合并.好在都是使用的ldap账户登陆,用户账户不需要迁移. 实际的使用情况下,需要迁移的主要部分为分组及分组下项目.gitlab的api还是很给力的,能够获取所 ...

  9. 【记录】Spring项目转化为Spring Web项目

    前言 在将Spring项目转化为Spring Mvc项目时出现了点问题,总是无法成功部署,查阅资料也并没有找到一个完美的解决方案,最后是参考在idea中创建maven web app项目后的目录才成功 ...

  10. C++类中静态变量和静态方法使用介绍

    静态成员的提出是为了解决数据共享的问题.实现共享有许多方法,如:设置全局性的变量或对象是一种方法.但是,全局变量或对象是有局限性的.这一章里,我们主要讲述类的静态成员来实现数据的共享. 静态数据成员 ...