vue实现可增删查改的成绩单
前端变化层出不穷，去年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,基本由下面几部分组成
其中data主动存放当前view的属性也就是在页面上能用来绑定的数据，methods主要用来存当前view model的方法，computed也是用来存当前view的属性的，只是它是计算属性，它的值可能由data里某一个值直接影响，相当于你修改了view里的data里的某一个值 ，它会自动跟着修改，就想当于ng里用$watch来实现的功能，当前vue也提示了$watch功能,但是用计算属性使用起来更快捷高效。
当前示例view model分析
这是当前的view model属性，如果数据要绑定到html上去，可响应的那都要在这一块初始定好，如果后续会用到的也要在初始的时候挂好位置，后期手动添加是不会起作用的，此项目各字段功能具体看文字注释。
这是此 view model的方法，可直接绑定到html上也可以内部以this.开头来调用，内部的this都是指向当前view model，可以调用当前view model上的所有属性跟方法，这里也是我们处理数据，书写业务逻辑的地方，此示例项目各方法功能具体看文字注释。
这里是计算属性，它的值由data下的noweditcol来决定，相当于你写一个$watch方法在监听noweditcol,但是此处vue内部帮你处理了，推荐在项目中使用。
当前项目使用view model方式，都是直接绑定在dom元素上来做的，这也是热门的mvvm框架的模式.
我一直都有在了解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前端组件学习教程》，欢迎大家学习阅读。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： vue开发心得和技巧分享
下一篇： Vue.js实现无限加载与分页功能开发