vue初体验：实现一个增删查改成绩单
Posted ！win ！
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue初体验：实现一个增删查改成绩单相关的知识，希望对你有一定的参考价值。
前端变化层出不穷，去年NG火一片，今年react,vue火一片，ng硬着头皮看了几套教程，总被其中的概念绕晕，react是faceback出品，正在不断学习中，同时抽时间了解了vue,查看了vue官方文挡，看完格外入眼，总觉得要拿来试一试手。
正好周未，做一个小成绩单玩玩，以前有用avalon也做过一个类似的：http://www.cnblogs.com/xwwin/p/5203334.html 从过程来看，二个框架都在避免开发者频繁操作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="item.stuId==nowEditCol"></div></td> <td><div class="content">{{item.name}}<input v-model="editArr.name" type="text" v-if="item.stuId==nowEditCol"></div></td> <td><div class="content">{{item.ywScores}}<input v-model="editArr.ywScores" type="text" v-if="item.stuId==nowEditCol"></div></td> <td><div class="content">{{item.sxScores}}<input v-model="editArr.sxScores" type="text" v-if="item.stuId==nowEditCol"></div></td> <td> <a href="javascript:void(0);" v-on:click="startEdit(item.stuId)" v-if="item.stuId!=nowEditCol">编辑</a> <a href="javascript:void(0);" v-on:click="cancelEdit" v-if="item.stuId==nowEditCol">取消</a> <a href="javascript:void(0);" v-on:click="sureEdit(item.stuId)" v-if="item.stuId==nowEditCol">确认</a> </td> <td><a href="javascript:void(0);" v-on:click="deleteStu(item.stuId)">删除</a></td> </tr> </tbody> </table> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/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,//当前是否在以上是关于vue初体验：实现一个增删查改成绩单的主要内容，如果未能解决你的问题，请参考以下文章