vue实现图书管理demo详解


Posted in Javascript onOctober 17, 2017

年后公司的项目要求用到vue.js知识,我angular没有学,node.js和react也只是了解了一点点,所以学起来比较困难。如果你想学vue.js的知识,推荐网址:http://vuejs.org/

详细内容如下:

一、图书管理demo用的知识点

1、bootstrap:http://getbootstrap.com/ 

2、vuejs:http://getbootstrap.com/ 

具体代码如下:

html部分

<div id="app" class="container">
 <table class="table table-bordered">
 <div v-for = "book in books">
  <tr>
  <th>书名</th>
  <th>书的价格</th>
  <th>书的数量</th>
  <th>小计</th>
  <th>操作</th>
  </tr>
  <tr v-for = "(index,book ) in books">
  <td>{{book.name}}</td>
  <td>{{book.price}}</td>
  <td><button @click="book.count&&book.count--">-</button><input type="text" v-model="book.count" /><button @click="book.count++">+</button></td>
  <td>{{book.price*book.count}}</td>
  <td><button class="btn btn-danger" @click="deleteBook(book)">删除</button></td>
  </tr>
  <tr>
  <td colspan="5">
  总价{{total}}
  </td>
  </tr>
 </div>
 </table>
 <div class="form-group">
 <label for="bookname" id="bookname">书名</label>
 <input type="text" v-model="list.name" class="form-control"/>
 </div>
 <div class="form-group">
 <label for="bookprice" id="bookprice">价格</label>
 <input type="text" v-model="list.price" class="form-control"/>
 </div>
 <div class="form-group">
 <label for="bookcount" id="bookcount">数量</label>
 <input type="text" v-model="list.count" class="form-control"/>
 </div>
 <div class="form-group">
 <button class="btn btn-primary" @click="add">添加</button>
 </div>
 </div>

脚本部分

<script src="js/vue.js"></script>
 <script>
 var vm = new Vue({
 el:"#app",
 data:{
  books:[
  {name:'VUE js',price:40,count:1},
  {name:'NODE js',price:20,count:1},
  {name:'REACT js',price:30,count:1},
  {name:'ANGULAR js',price:100,count:1},
  {name:'JQUERY js',price:50,count:1},
  ],
  list:{
  name:'',
  price:'',
  count:''
  }
 },
 methods:{
  deleteBook(book){
  // vue 给我们提供了一个 $remove的方法,在数组中删除
  this.books.$remove(book);
  /*this.books = this.books.filter((item)=>{
  return item != book
  })*/
  },
  add(){
  this.books.push(this.list);
  this.list = {
  name:'',
  price:'',
  count:''
  }
  }
 },
 computed:{
  total(){
  var sum = 0;
  this.books.forEach(item =>{
  sum += item.price*item.count;
  })
  return sum;
  }
 }
 });
</script>

遇到难点总结

vue实现图书管理demo详解

当数量小于0时,判断方法,解决方法有很多种,下面总结有3中方法

(一)最简单的方法

根据逻辑判断,这里要注意逻辑判断的顺序,代码如下:

<td><button @click="book.count&&book.count--">-</button><input type="text" v-model="book.count" /><button @click="book.count++">+</button></td>

(二)这里要注意this指向问题

<td><button @click="min(index,book.count)">-</button><input type="text" v-model="book.count" /><button @click="book.count++">+</button></td>

methods:{
  min(index){
  if(this.books[index].count>0){
  this.books[index].count = parseInt(this.books[index].count) - 1;
  }
  },
  deleteBook(book){
  // vue 给我们提供了一个 $remove的方法,在数组中删除
  this.books.$remove(book);
  /*this.books = this.books.filter((item)=>{
  return item != book
  })*/
  },
  add(){
  this.books.push(this.list);
  this.list = {
  name:'',
  price:'',
  count:''
  }
  }
 }

(三) v-on执行时传参问题

<td><button @click="min(book)">-</button><input type="text" v-model="book.count" /><button @click="book.count++">+</button></td>

min(book){
 if(book.count>0){
 book.count = parseInt(book.count) - 1;
 }
}

总结:

v-on执行方法的时候需要传递参数的时候添加(),如果不需要传递参数就不用加上()
如果需要传递参数,我们需要手动传入事件源 

建议:

1、如果您有充足的时间来学习vue,务必要把js基础打好,学习下angular.js

2、学会在网上找资料。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 简单应用示例总结
Aug 09 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
Sep 27 Javascript
JavaScript实现更改网页背景与字体颜色的方法
Feb 02 Javascript
JavaScript在网页中画圆的函数arc使用方法
Nov 13 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
Nov 09 Javascript
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
canvas简单快速的实现知乎登录页背景效果
May 08 Javascript
vue实现点击图片放大效果
Aug 15 Javascript
Vue异步组件处理路由组件加载状态的解决方案
Sep 07 Javascript
原生JS实现的放大镜特效示例【测试可用】
Dec 08 Javascript
vue2 中二级路由高亮问题及配置方法
Jun 10 Javascript
vscode中eslint插件的配置(prettier配置无效)
Sep 10 Javascript
基于Vue实现图书管理功能
Oct 17 #Javascript
Vue.js简易安装和快速入门(第二课)
Oct 17 #Javascript
什么是Vue.js框架 为什么选择它?
Oct 17 #Javascript
node使用Koa2搭建web项目的方法
Oct 17 #Javascript
Node 自动化部署的方法
Oct 17 #Javascript
利用JS实现scroll自定义滚动效果详解
Oct 17 #Javascript
jquery实现图片跟随鼠标的实例
Oct 17 #jQuery
You might like
php 文本文件的读取效率
2012/02/10 PHP
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
Javascript 中 null、NaN和undefined的区别总结
2013/04/10 Javascript
javascript使用isNaN()函数判断变量是否为数字
2013/09/21 Javascript
js常用自定义公共函数汇总
2014/01/15 Javascript
JS版的date函数(和PHP的date函数一样)
2014/05/12 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
2014/05/22 Javascript
Jquery动态添加及删除页面节点元素示例代码
2014/06/16 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
2015/08/06 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
2016/02/19 Javascript
jquery表单验证插件formValidator使用方法
2016/04/01 Javascript
js 将图片连接转换成base64格式的简单实例
2016/08/10 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
2016/09/24 Javascript
AngularJS中的Promise详细介绍及实例代码
2016/12/13 Javascript
javascript循环链表之约瑟夫环的实现方法
2017/01/16 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
2017/06/13 Javascript
第一个Vue插件从封装到发布
2017/11/22 Javascript
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
layui 富文本编辑器和textarea值的相互传递方法
2019/09/18 Javascript
vue调用本地摄像头实现拍照功能
2020/08/14 Javascript
详解Python进程间通信之命名管道
2017/08/28 Python
tensorflow1.0学习之模型的保存与恢复(Saver)
2018/04/23 Python
python 返回一个列表中第二大的数方法
2019/07/09 Python
Python ORM框架Peewee用法详解
2020/04/29 Python
《鱼游到了纸上》教学反思
2014/02/20 职场文书
会计员岗位职责
2014/03/15 职场文书
岗位廉洁从业承诺书
2014/03/28 职场文书
宣传工作经验材料
2014/06/02 职场文书
利用python做表格数据处理
2021/04/13 Python
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS
pytorch 中autograd.grad()函数的用法说明
2021/05/12 Python
python中对列表的删除和添加方法详解
2022/02/24 Python