vue实现可增删查改的成绩单


Posted in Javascript onOctober 27, 2016

前端变化层出不穷,去年NG火一片,今年react,vue火一片,ng硬着头皮看了几套教程,总被其中的概念绕晕,react是faceback出品,正在不断学习中,同时抽时间了解了vue,查看了vue官方文挡,看完格外入眼,总觉得要拿来试一试手。

正好周未,做一个小成绩单玩玩,以前有用avalon也做过一个类似的,从过程来看,二个框架都在避免开发者频繁操作dom,脱离dom苦海,安心处理数据业务逻辑,从二个示例来看,可以成倍的提高开发效率。

vue示例代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>vue成绩单</title>
 <style type="text/css">
 *{
 margin:0;
 padding:0;
 }
 .report_card{
 width:800px;
 margin:0 auto;
 font-size:12px;
 }
 .report_card table{
 width:100%;
 border-collapse: collapse;
 text-align:center;
 }
 .report_card caption{
 font-size:14px;
 text-align:left;
 line-height:30px;
 font-weight:bold;
 }
 .report_card table th,.report_card table td{
 border:1px solid #ccc;
 }
 .report_card table th{
 height:36px;
 background:#f8f8f8;
 }
 .report_card table td{
 height:32px;
 background:#f8f8f8;
 }
 .content{
 width:100%;
 height:32px;
 line-height:32px;
 position:relative;
 }
 .content input{
 position:absolute;
 top:0;
 left:0;
 width:100%;
 color:#999;
 padding-left:10px;
 -webkit-box-sizing:border-box;
 box-sizing:border-box;
 height:30px;
 border:1px solid blue;
 -webkit-animation:borderAn 2s infinite;
 animation:borderAn 2s infinite;
 }
 .studyForm select{
 width:100px;
 height:28px;
 }
 .searchInput{
 width:200px;
 height:28px;
 }
 .searchButton{
 width:100px;
 height:32px;
 }
 @-webkit-keyframes borderAn{
 0%{
 border-color:transparent;
 }
 100%{
 border-color:blue;
 }
 }
 @keyframes borderAn{
 0%{
 border-color:transparent;
 }
 100%{
 border-color:blue;
 }
 }
 .studyForm{
 margin:10px 0;
 }
 .studyForm input{
 width:120px;
 height:30px;

 }
 </style>
</head>
<body>
 <div class="report_card" id="reportCard">
 <table class="studyForm">
 <caption>成绩录入/处理</caption>
 <tbody>
 <tr>
  <td width="170">学号:<input type="text" v-model="addArr.stuId"></td>
  <td width="170">姓名:<input type="text" v-model="addArr.name"></td>
  <td width="170">语文:<input type="text" v-model="addArr.ywScores"></td>
  <td width="170">数学:<input type="text" v-model="addArr.sxScores"></td>
  <td colspan="2" width="120">
  <a href="javascript:void(0);" v-on:click="submitStu">录入</a>
  <a href="javascript:void(0);" v-on:click="resetStu">重置</a>
  </td>
 </tr>
 <tr>
  <td align="left">
  搜索:<input v-model="searchTxt" type="text" class="searchInput">
  </td>
  <td>
  排序字段:
  <select v-model='sortKey'>
  <option value="ywScores">语文</option>
  <option value="sxScores">数学</option>
  </select>
  </td>
  <td>
  排序类型:
  <select v-model="sortClass">
  <option value="1">升序</option>
  <option value="-1">降序</option>
  </select>
  </td>
  <td colspan="3"></td>
 </tr>
 </tbody>
 </table>
 <table class="scoreList">
 <caption>成绩列表</caption>
 <thead>
 <th width="170">学号</th>
 <th width="170">姓名</th>
 <th width="170">语文</th>
 <th width="170">数学</th>
 <th colspan="2" width="120">操作</th>
 </thead>
 <tbody>
 <tr v-for="item in studyArr | filterBy searchTxt | orderBy sortKey sortClass">
  <td><div class="content">{{item.stuId}}<input v-model="editArr.stuId" type="text" v-if="$index==nowEditCol"></div></td>
  <td><div class="content">{{item.name}}<input v-model="editArr.name" type="text" v-if="$index==nowEditCol"></div></td>
  <td><div class="content">{{item.ywScores}}<input v-model="editArr.ywScores" type="text" v-if="$index==nowEditCol"></div></td>
  <td><div class="content">{{item.sxScores}}<input v-model="editArr.sxScores" type="text" v-if="$index==nowEditCol"></div></td>
  <td>
  <a href="javascript:void(0);" v-on:click="startEdit($index)" v-if="$index!=nowEditCol">编辑</a>
  <a href="javascript:void(0);" v-on:click="cancelEdit" v-if="$index==nowEditCol">取消</a>
  <a href="javascript:void(0);" v-on:click="sureEdit($index)" v-if="$index==nowEditCol">确认</a>
  </td>
  <td><a href="javascript:void(0);" v-on:click="deleteStu($index)">删除</a></td>
 </tr>
 </tbody>
 </table>
 </div>
 <script type="text/javascript" src="vue.js"></script>
 <script type="text/javascript">
 var studyArrJson=[
 {'stuId':'stu0001','name':'张三','ywScores':85,'sxScores':90},
 {'stuId':'stu0002','name':'李四','ywScores':88,'sxScores':85},
 {'stuId':'stu0003','name':'王五','ywScores':65,'sxScores':75},
 {'stuId':'stu0004','name':'刘六','ywScores':58,'sxScores':96}
 ];
 var reportCardVm=new Vue({
 el:'#reportCard',
 data:{
 studyArr:studyArrJson,//成绩花名册
 addArr:{'stuId':'','name':'','ywScores':'','sxScores':''},//新增的表单字段
 nowEditCol:-1,//当前编辑的行
 editStatus:false,//当前是否在编辑状态
 searchTxt:'',//搜索字段
 sortKey:'ywScores',//排序健
 sortClass:'1',//升降排序1为升,-1为降
 },
 methods:{
 //启动索引index数据编辑
 startEdit:function(index){
  this.nowEditCol=index;
 },
 //取消编辑状态
 cancelEdit:function(){
  this.nowEditCol=-1;
 },
 //启动索引index数据修改确认
 sureEdit:function(index){
  this.studyArr.$set(index,this.editArr);
  this.nowEditCol=-1;
 },
 //删除索引index数据
 deleteStu:function(index){
  this.studyArr.splice(index,1);
 },
 //新增成绩
 submitStu:function(){
  var addArr={
  'stuId':this.addArr.stuId,
  'name':this.addArr.name,
  'ywScores':this.addArr.ywScores,
  'sxScores':this.addArr.sxScores
  };
  this.studyArr.push(addArr);
  this.resetStu();
 },
 //复位新增表单
 resetStu:function(){
  this.addArr={
  'stuId':'',
  'name':'',
  'ywScores':'',
  'sxScores':''
  }
 }
 },
 computed:{
 //存储当前编辑的对象
 editArr:function(){
  var editO=this.studyArr[this.nowEditCol];
  return {
  'stuId':editO.stuId,
  'name':editO.name,
  'ywScores':editO.ywScores,
  'sxScores':editO.sxScores
  }
 }
 }
 })
 </script>
</body>
</html>

在线测试地址:http://jsbin.com/kavugufuci/edit?html,output

一个VUE对象就是一个view model,基本由下面几部分组成

vue实现可增删查改的成绩单

其中data主动存放当前view的属性也就是在页面上能用来绑定的数据,methods主要用来存当前view model的方法,computed也是用来存当前view的属性的,只是它是计算属性,它的值可能由data里某一个值直接影响,相当于你修改了view里的data里的某一个值 ,它会自动跟着修改,就想当于ng里用$watch来实现的功能,当前vue也提示了$watch功能,但是用计算属性使用起来更快捷高效。

当前示例view model分析

vue实现可增删查改的成绩单

这是当前的view model属性,如果数据要绑定到html上去,可响应的那都要在这一块初始定好,如果后续会用到的也要在初始的时候挂好位置,后期手动添加是不会起作用的,此项目各字段功能具体看文字注释。

vue实现可增删查改的成绩单

这是此 view model的方法,可直接绑定到html上也可以内部以this.开头来调用,内部的this都是指向当前view model,可以调用当前view model上的所有属性跟方法,这里也是我们处理数据,书写业务逻辑的地方,此示例项目各方法功能具体看文字注释。

vue实现可增删查改的成绩单

这里是计算属性,它的值由data下的nowEditCol来决定,相当于你写一个$watch方法在监听nowEditCol,但是此处vue内部帮你处理了,推荐在项目中使用。

当前项目使用view model方式,都是直接绑定在DOM元素上来做的,这也是热门的MVVM框架的模式.

vue实现可增删查改的成绩单

我一直都有在了解vue跟avalon ,ng,react这方面的东东,但是考虑到切入速度跟入手难受,我首先选择的是vue,avalon,但是又由于vue的兼容,如果要使用vue就得放弃

安卓4.2以下的版本的原生浏览器,于是就开始使用avalon,用avalon 做过一些H5项目,但是由于avalon只是一个司徒正美个人项目总觉得在一些稳定性和未来发展上感觉

很难说,在跑很多测试案例的时候也发现一些BUG,当然在我做的那些项目还没有掉进avalon的大坑,但是avalon的兼容是值得称赞的,司徒正美应该是花费了很大精力,

如果你做的项目要兼容到非标准的浏览就如IE6-7-8,又想体验MVVM框架开发的高效的时候,avalon是你的首选。在目前兼容环境越来越好的情况,后期如果再接到H5的项目,

我会选择用vue来做做项目。

更多vue的学习了解,请查阅官方文挡:http://cn.vuejs.org/guide/,这也是你入手vue最佳地方。

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

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

Javascript 相关文章推荐
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
Mar 09 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
Jun 16 Javascript
jQuery给多个不同元素添加class样式的方法
Mar 26 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
Jun 23 Javascript
利用JS实现数字增长
Jul 28 Javascript
Three.js学习之几何形状
Aug 01 Javascript
Jq通过td获取同行其它列td的方法
Oct 05 Javascript
JS中图片压缩的方法小结
Nov 14 Javascript
JavaScript 正则命名分组【推荐】
Jun 07 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
Apr 22 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
Jun 13 Javascript
koa-passport实现本地验证的方法示例
Feb 20 Javascript
vuex实现简易计数器
Oct 27 #Javascript
微信小程序  生命周期详解
Oct 27 #Javascript
require.js+vue开发微信上传图片组件
Oct 27 #Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
Oct 27 #Javascript
vue开发心得和技巧分享
Oct 27 #Javascript
js获取指定字符前/后的字符串简单实例
Oct 27 #Javascript
简单模拟node.js中require的加载机制
Oct 27 #Javascript
You might like
隐藏X-Space个人空间下方版权方法隐藏X-Space个人空间标题隐藏X-Space个人空间管理版权方法
2007/02/22 PHP
PHP连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
Discuz!X中SESSION机制实例详解
2015/09/23 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
2006/09/22 Javascript
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
JavaScript 嵌套函数指向this对象错误的解决方法
2010/03/15 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
2013/01/03 Javascript
JS中怎样判断undefined(比较不错的方法)
2014/03/27 Javascript
JS实现很酷的水波文字特效实例
2015/02/26 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
深入探讨javascript函数式编程
2015/10/11 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
AngularJs上传前预览图片的实例代码
2017/01/20 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
2017/12/12 Javascript
JS获取url参数,JS发送json格式的POST请求方法
2018/03/29 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
2018/12/24 Javascript
详解js获取video任意时间的画面截图
2019/04/17 Javascript
JavaScript修改注册表实例代码
2020/01/05 Javascript
[49:31]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第二场 1月29日
2021/03/11 DOTA
python查看微信好友是否删除自己
2016/12/19 Python
Python使用正则表达式抓取网页图片的方法示例
2017/04/21 Python
简单了解Python生成器是什么
2019/07/02 Python
pytorch GAN生成对抗网络实例
2020/01/10 Python
解决echarts中饼图标签重叠的问题
2020/05/16 Python
python爬虫把url链接编码成gbk2312格式过程解析
2020/06/08 Python
利用python下载scihub成文献为PDF操作
2020/07/09 Python
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
Nike英国官网:Nike.com (UK)
2017/02/13 全球购物
高中军训感想800字
2014/02/23 职场文书
委托书样本
2014/04/02 职场文书
开学典礼演讲稿
2014/05/23 职场文书
工程学毕业生自荐信
2014/06/14 职场文书
服装仓管员岗位职责
2014/06/17 职场文书
模具设计与制造专业求职信
2014/07/19 职场文书
python自动化八大定位元素讲解
2021/07/09 Python