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 相关文章推荐
用JS控制回车事件的代码
Feb 20 Javascript
基于jquery的时间段实现代码
Aug 02 Javascript
从jquery的过滤器.filter()方法想到的
Sep 29 Javascript
html的DOM中Event对象onblur事件用法实例
Jan 21 Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 Javascript
Vue学习笔记之表单输入控件绑定
Sep 05 Javascript
vue使用中的内存泄漏【推荐】
Jul 10 Javascript
vue router导航守卫(router.beforeEach())的使用详解
Apr 19 Javascript
JavaScript实现秒杀时钟倒计时
Sep 29 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
Apr 25 Javascript
原生JS实现无缝轮播图片
Jun 24 Javascript
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
基于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 CURL模拟GET及POST函数代码
2010/04/25 PHP
php中注册器模式类用法实例分析
2015/11/03 PHP
Yii2使用表单上传文件的实例代码
2017/08/03 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
javascript客户端解决方案 缓存提供程序
2010/07/14 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
2012/09/11 Javascript
JS实现CheckBox复选框全选全不选功能
2015/05/06 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
2015/11/30 Javascript
jQuery入门之层次选择器实例简析
2015/12/11 Javascript
jQuery使用getJSON方法获取json数据完整示例
2016/09/13 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
详解Vue 多级组件透传新方法provide/inject
2018/05/09 Javascript
Javascript实现异步编程的过程
2018/06/18 Javascript
IE8中jQuery.load()加载页面不显示的原因
2018/11/15 jQuery
浅谈webpack和webpack-cli模块源码分析
2020/01/19 Javascript
Python用 KNN 进行验证码识别的实现方法
2018/02/06 Python
numpy向空的二维数组中添加元素的方法
2018/11/01 Python
关于python下cv.waitKey无响应的原因及解决方法
2019/01/10 Python
解决python web项目意外关闭,但占用端口的问题
2019/12/17 Python
python安装读取grib库总结(推荐)
2020/06/24 Python
Python 捕获代码中所有异常的方法
2020/08/03 Python
如何利用python生成MD5并去重
2020/12/07 Python
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
2013/08/11 HTML / CSS
Kipling澳洲官网:购买凯浦林包包
2020/12/17 全球购物
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
外贸业务员工作职责
2014/01/06 职场文书
开业庆典策划方案
2014/02/18 职场文书
聘任书模板
2014/03/29 职场文书
教师节活动总结
2014/08/29 职场文书
会计工作岗位职责
2015/02/03 职场文书
2015年车间主任工作总结
2015/05/21 职场文书
国博复兴之路观后感
2015/06/02 职场文书
MySQL 数据 data 基本操作
2022/05/04 MySQL
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript
JAVA springCloud项目搭建流程
2022/05/11 Java/Android