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

前端变化层出不穷，去年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 增删改查、vue.js增删改查、vue.js实现增删改查、vuejs的增删改查、vue实现增删改查，以便于您获取更多的相关知识。

时间： 2024-10-23 11:40:29

vue实现可增删查改的成绩单_javascript技巧的相关文章

qt-如何在QSqlQueryModel中实现增删查改，然后如何与mysql数据库同步更新

问题描述 如何在QSqlQueryModel中实现增删查改,然后如何与mysql数据库同步更新 本人是个菜鸟在做一个简单的同学录系统,这是进入之后的界面 我想实现鼠标选取一个表格点击"修改同学信息"之后能对它在修改并且修改确定后能同步刷新MySQL数据库而且表格中的数据也更新. 下面是我的代码:#include ""record.h""#include ""ui_record.h""#include &qu

Java中单向链表的实现：增删查改功能

写一个大家都比较熟悉的数据结构:单向链表. 不过先告诉大家一个小秘密,java的API里面已经提供了单向链表的类,大家可以直接拿来用,不过学习数据结构课程的时候想必大家也已经知道,虽然系统会给我们提供一些常用的数据结构,但是自定义的总是能够带来不同的喜感的,而且通过自己的编写也更能够让我们了解其中实现的过程,而且我们还可以写一些比较个性化的方法作为属于自己的数据结构.这里主要是介绍一些常用结构里面都会用到的方法,以及链表具体是如何操作的. 首先,单链表相对于队列的优势在于存储地址不是连续的,这样

mysql-如何用JSTL JDBC MYSQL 实现增删查改？

问题描述 如何用JSTL JDBC MYSQL 实现增删查改? TOMCAT.ECLIPSE.JSP.JSTL.JDBC.MYSQL 我是一个刚入门的小白.先谢谢前辈了. 想用jstl jdbc向MYSQL里插入数据,更新,删除. 网上查了资料都是insert into t_student values(null,"XXX","XXX,"XXX,"X");这种. 我想在<input type="text" 里自己设定值

多级索引算法只增删查改

问题描述 多级索引算法只增删查改 多级索引算法 在链表描述的具有length个元素的集合中进行搜索,至多需要length次访问节点.如果在链的中部节点加一个指针,并记录头部到中部的距离,则访问的节点数可以减少到n/2+1次.搜索时,首先将欲搜索的索引与头部到中部的距离进行比较,如果欲搜索的索引较小,则仅需搜索链表的左半部,否则,只要从中部开始搜索右半部. 图3-1a的链表中有七个元素.该链表有一个头节点和一个尾节点.节点中的数表示该节点的索引值.如果要访问索引值为7的节点,对该链表的搜索要进行七

visual studio-2010vs C#和sql的.CS的环境下实现学生信息增删查改？

问题描述 2010vs C#和sql的.CS的环境下实现学生信息增删查改? 如何在vs c#和sql .cs的环境中实现对学生信息的增删查改呢? 各路老师们教教我这个初学者吧! 解决方案 参考这个完整的程序http://download.csdn.net/download/sjdongfang/2173372 解决方案二: 增删查改是编程的基本操作,很多教程都有介绍..自己从基础上做的话,要sql语句,还有C#的基本语法.增删查改是比较简单的. 相关知识点的话就是: 1.sql语句对数据库的增删

界面-列表增删查改数据库字段值

问题描述 列表增删查改数据库字段值 网页主界面页面上显示一些数据列表,然后我想对页面上的数据进行修改.修改后能够自动的对数据进行入库保存,而且是对已有的数据进行更新,数据库中没有的数据进行自动插入.而且最好是可复用性高,对任何数据表的任何数据字段都可以进行保存,并且更新条件最好是可以自定义设置.用JS+java实现,本人对代码只是略懂,最好是实现起来简单. 解决方案 这个问题实现的方法比较多,不过如果对于初学者,不管哪种实现方式,写代码都不简单.因为要从数据库取数,把数据显示在网页上,还需要获取

iis-用VS建立的webservice，连接sql对数据库进行增删查改，怎么样发布到IIS上

问题描述 用VS建立的webservice,连接sql对数据库进行增删查改,怎么样发布到IIS上 用vs调试已经实现和数据库的增删查改功能,但发布使用文件系统发布,显示不支持数据库,要怎么样发布才支持数据库,在IIS中进行增删查改呢? 解决方案 怎么显示的不支持数据库,检查你的web.config怎么配置的,连接字符串怎么写的,目标计算机上是否安装了sql server 解决方案二: 点击发布的时候目标文件夹选的是iis网页的文件夹,然后点击下一步,就出现此发布方法不支持数据库的发布 web.c

wpf将excel数据导入listview上并显示，然后对Listview进行增删查改

问题描述 wpf将excel数据导入listview上并显示,然后对Listview进行增删查改 不知道怎样显示到listview上面,就是点击按钮的时候就会显示 解决方案 先把Excel里的数据读出来,给你个读Excel的方法: public static DataSet LoadDataFromExcel(string sFilePath) { try { string strConn; strConn = "Provider=Microsoft.Jet.OLEDB.4.0;Data Sou

java中sql语句的具体用法，增删查改

问题描述 java中sql语句的具体用法,增删查改 java中sql语句的具体用法,增删查改,如何用动态的方法改变查找的位置,输出的位置,判断这个数据是否存在于数据库中 解决方案 这问题有自己思考过么 解决方案二: https://www.baidu.com/link?url=jykznQpWlQYTk0AcnMob3UN-B_iYzOccrutv00x5SAaAVNOYO8xApShvC6wqWeG9NYgnkacMB-lvt08dSMc68a&wd=&eqid=a253ae6e0001