首页 > 代码库 > vue初体验:实现一个增删查改成绩单

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="$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初体验:实现一个增删查改成绩单