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

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

vue示例代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>vue成绩单</title>
  6.     <style type="text/css">
  7.         *{
  8.             margin:0;
  9.             padding:0;
  10.         }
  11.         .report_card{
  12.             width:800px;
  13.             margin:0 auto;
  14.             font-size:12px;
  15.         }
  16.         .report_card table{
  17.             width:100%;
  18.             border-collapse: collapse;
  19.             text-align:center;
  20.         }
  21.         .report_card caption{
  22.             font-size:14px;
  23.             text-align:left;
  24.             line-height:30px;
  25.             font-weight:bold;
  26.         }
  27.         .report_card table th,.report_card table td{
  28.             border:1px solid #ccc;
  29.         }
  30.         .report_card table th{
  31.             height:36px;
  32.             background:#f8f8f8;
  33.         }
  34.         .report_card table td{
  35.             height:32px;
  36.             background:#f8f8f8;
  37.         }
  38.         .content{
  39.             width:100%;
  40.             height:32px;
  41.             line-height:32px;
  42.             position:relative;
  43.         }
  44.         .content input{
  45.             position:absolute;
  46.             top:0;
  47.             left:0;
  48.             width:100%;
  49.             color:#999;
  50.             padding-left:10px;
  51.             -webkit-box-sizing:border-box;
  52.             box-sizing:border-box;
  53.             height:30px;
  54.             border:1px solid blue;
  55.             -webkit-animation:borderAn 2s infinite;
  56.             animation:borderAn 2s infinite;
  57.         }
  58.         .studyForm select{
  59.             width:100px;
  60.             height:28px;
  61.         }
  62.         .searchInput{
  63.             width:200px;
  64.             height:28px;
  65.         }
  66.         .searchButton{
  67.             width:100px;
  68.             height:32px;
  69.         }
  70.         @-webkit-keyframes borderAn{
  71.             0%{
  72.                 border-color:transparent;
  73.             }
  74.             100%{
  75.                 border-color:blue;
  76.             }
  77.         }
  78.         @keyframes borderAn{
  79.             0%{
  80.                 border-color:transparent;
  81.             }
  82.             100%{
  83.                 border-color:blue;
  84.             }
  85.         }
  86.         .studyForm{
  87.             margin:10px 0;
  88.         }
  89.         .studyForm input{
  90.             width:120px;
  91.             height:30px;
  92.  
  93.         }
  94.     </style>
  95. </head>
  96. <body>
  97.     <div class="report_card" id="reportCard">
  98.         <table class="studyForm">
  99.             <caption>成绩录入/处理</caption>
  100.             <tbody>
  101.                 <tr>
  102.                     <td width="170">学号:<input type="text" v-model="addArr.stuId"></td>
  103.                     <td width="170">姓名:<input type="text" v-model="addArr.name"></td>
  104.                     <td width="170">语文:<input type="text" v-model="addArr.ywScores"></td>
  105.                     <td width="170">数学:<input type="text" v-model="addArr.sxScores"></td>
  106.                     <td colspan="2" width="120">
  107.                         <a href="javascript:void(0);" v-on:click="submitStu">录入</a>
  108.                         <a href="javascript:void(0);" v-on:click="resetStu">重置</a>
  109.                     </td>
  110.                 </tr>
  111.                 <tr>
  112.                     <td align="left">
  113.                         搜索：<input v-model="searchTxt" type="text" class="searchInput">
  114.                     </td>
  115.                     <td>
  116.                         排序字段:
  117.                         <select v-model='sortKey'>
  118.                             <option value="ywScores">语文</option>
  119.                             <option value="sxScores">数学</option>
  120.                         </select>
  121.                     </td>
  122.                     <td>
  123.                         排序类型：
  124.                         <select v-model="sortClass">
  125.                             <option value="1">升序</option>
  126.                             <option value="-1">降序</option>
  127.                         </select>
  128.                     </td>
  129.                     <td colspan="3"></td>
  130.                 </tr>
  131.             </tbody>
  132.         </table>
  133.         <table class="scoreList">
  134.             <caption>成绩列表</caption>
  135.             <thead>
  136.                 <th width="170">学号</th>
  137.                 <th width="170">姓名</th>
  138.                 <th width="170">语文</th>
  139.                 <th width="170">数学</th>
  140.                 <th colspan="2" width="120">操作</th>
  141.             </thead>
  142.             <tbody>
  143.                 <tr v-for="item in studyArr | filterBy searchTxt | orderBy sortKey sortClass">
  144.                     <td><div class="content">{{item.stuId}}<input v-model="editArr.stuId" type="text" v-if="item.stuId==nowEditCol"></div></td>
  145.                     <td><div class="content">{{item.name}}<input v-model="editArr.name" type="text" v-if="item.stuId==nowEditCol"></div></td>
  146.                     <td><div class="content">{{item.ywScores}}<input v-model="editArr.ywScores" type="text" v-if="item.stuId==nowEditCol"></div></td>
  147.                     <td><div class="content">{{item.sxScores}}<input v-model="editArr.sxScores" type="text" v-if="item.stuId==nowEditCol"></div></td>
  148.                     <td>
  149.                         <a href="javascript:void(0);" v-on:click="startEdit(item.stuId)" v-if="item.stuId!=nowEditCol">编辑</a>
  150.                         <a href="javascript:void(0);" v-on:click="cancelEdit" v-if="item.stuId==nowEditCol">取消</a>
  151.                         <a href="javascript:void(0);" v-on:click="sureEdit(item.stuId)" v-if="item.stuId==nowEditCol">确认</a>
  152.                     </td>
  153.                     <td><a href="javascript:void(0);" v-on:click="deleteStu(item.stuId)">删除</a></td>
  154.                 </tr>
  155.             </tbody>
  156.         </table>
  157.     </div>
  158. <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
  159.  
  160.     <script type="text/javascript">
  161.         var studyArrJson=[
  162.             {'stuId':'stu0001','name':'张三','ywScores':85,'sxScores':90},
  163.             {'stuId':'stu0002','name':'李四','ywScores':88,'sxScores':85},
  164.             {'stuId':'stu0003','name':'王五','ywScores':65,'sxScores':75},
  165.             {'stuId':'stu0004','name':'刘六','ywScores':58,'sxScores':96}
  166.         ];
  167.         var reportCardVm=new Vue({
  168.             el:'#reportCard',
  169.             data:{
  170.                 studyArr:studyArrJson,//成绩花名册
  171.                 addArr:{'stuId':'','name':'','ywScores':'','sxScores':''},//新增的表单字段
  172.                 nowEditCol:-1,//当前编辑的行
  173.                 editStatus:false,//当前是否在编辑状态
  174.                 searchTxt:'',//搜索字段
  175.                 sortKey:'ywScores',//排序健
  176.                 sortClass:'1',//升降排序1为升,-1为降
  177.             },
  178.             methods:{
  179.                 //启动索引index数据编辑
  180.                 startEdit:function(id){
  181.                     this.nowEditCol=id;
  182.                 },
  183.                 //取消编辑状态
  184.                 cancelEdit:function(){
  185.                     this.nowEditCol=-1;
  186.                 },
  187.                 //启动索引index数据修改确认
  188.                 sureEdit:function(id){
  189.                   for(var i=0,len=this.studyArr.length;i<len;i++){
  190.                     if(id === this.studyArr[i]['stuId'] ){
  191.                       this.studyArr.splice(i,1,this.editArr);
  192.                       break;
  193.                     }
  194.                   }
  195.                   this.nowEditCol=-1;
  196.                 },
  197.                 //删除索引index数据
  198.                 deleteStu:function(id){
  199.                     for(var i=0,len=this.studyArr.length;i<len;i++){
  200.                       if(id === this.studyArr[i]['stuId'] ){
  201.                         this.studyArr.splice(i,1);
  202.                         break;
  203.                       }
  204.                     }
  205.                 },
  206.                 //新增成绩
  207.                 submitStu:function(){
  208.                     var addArr={
  209.                         'stuId':this.addArr.stuId,
  210.                         'name':this.addArr.name,
  211.                         'ywScores':this.addArr.ywScores,
  212.                         'sxScores':this.addArr.sxScores
  213.                     };
  214.                     this.studyArr.push(addArr);
  215.                     this.resetStu();
  216.                 },
  217.                 //复位新增表单
  218.                 resetStu:function(){
  219.                     this.addArr={
  220.                         'stuId':'',
  221.                         'name':'',
  222.                         'ywScores':'',
  223.                         'sxScores':''
  224.                     }
  225.                 }
  226.             },
  227.             computed:{
  228.                 //存储当前编辑的对象
  229.                 editArr:function(){
  230.                     var editO={};
  231.                     for(var i=0,len=this.studyArr.length;i<len;i++){
  232.                       if(this.nowEditCol === this.studyArr[i]['stuId'] ){
  233.                         editO= this.studyArr[i];
  234.                         break;
  235.                       }
  236.                     }
  237.                     return {
  238.                         'stuId':editO.stuId,
  239.                         'name':editO.name,
  240.                         'ywScores':editO.ywScores,
  241.                         'sxScores':editO.sxScores
  242.                     }
  243.                 }
  244.             }
  245.         })
  246.     </script>
  247. </body>
  248. </html>

在线测试地址：http://jsbin.com/webewizumi/1/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初体验：实现一个增删查改成绩单的更多相关文章

  1. ElementUI嵌套页面及关联增删查改实现

    @ 目录 前言 一.ElementUI如何在原有页面添加另外一个页面并实现关联增删查改? 二.实现步骤 1.ElementUI代码 2.思路:很简单 1.1 首先通过el-row.el-col.el- ...

  2. 6.在MVC中使用泛型仓储模式和依赖注入实现增删查改

    原文链接:http://www.c-sharpcorner.com/UploadFile/3d39b4/crud-operations-using-the-generic-repository-pat ...

  3. 3.EF 6.0 Code-First实现增删查改

    原文链接:http://www.c-sharpcorner.com/UploadFile/3d39b4/crud-operations-using-entity-framework-5-0-code- ...

  4. 4.在MVC中使用仓储模式进行增删查改

    原文链接:http://www.c-sharpcorner.com/UploadFile/3d39b4/crud-using-the-repository-pattern-in-mvc/ 系列目录: ...

  5. 5.在MVC中使用泛型仓储模式和工作单元来进行增删查改

    原文链接:http://www.c-sharpcorner.com/UploadFile/3d39b4/crud-operations-using-the-generic-repository-pat ...

  6. 用javascript实现html元素的增删查改[xyytit]

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. hibernate基础增删查改简单实例

    hibernate 基础理论知识网上很多,可以百度和google.这里不做多的介绍,以一个User表来开展例子 建一个web-project 我这里用了junit单元测试环境来进行增删查改的测试,别的 ...

  8. Entity FrameWork 增删查改的本质

    之前的文章里面已经说了,EF的增删查改.那时候的修改,删除,只能是先查询出来要修改的数据,再修改,删除...现在来一个改进版的,增删查改. 1.Add static void Add() { //1. ...

  9. nodejs连接mysql并进行简单的增删查改

    最近在入门nodejs,正好学习到了如何使用nodejs进行数据库的连接,觉得比较重要,便写一下随笔,简单地记录一下 使用在安装好node之后,我们可以使用npm命令,在项目的根目录,安装nodejs ...

随机推荐

  1. Centos 反向代理创建资料

    1. yum update 2. sh centos.sh 3. sh upgrade_nginx.sh nginx 1.7.0 4. cd /usr/local/nginx/conf/ upload ...

  2. [LeetCode]447 Number of Boomerangs

    Given n points in the plane that are all pairwise distinct, a "boomerang" is a tuple of po ...

  3. 【转】浅谈html5网页内嵌视频

    转自 http://www.pchou.info/web/2014/01/30/52ea01e13a7f1.html

  4. IOS XIB Cell自适应高度实现

    1.代码实现Cell高度自适应的方法 通过代码来实现,需要计算每个控件的高度,之后获取一个cell的 总高度,比较常见的是通过lable的文本计算需要的高度. CGSize labelsize = [ ...

  5. 测试架构图 High Level 产品技术（无事来更新，证明这个博客还是Live的）

    一个完整的产品测试所需要掌握的产品技术架构. 1.最底层硬件平台(服务器与存储) 对于一个大型商业解决方案来说,性能与可靠性是非常重要的要求,那么服务器与存储就是专门来满足需求的. 服务器: 服务器端 ...

  6. windows编程：画线，简单的碰撞检测，简单的帧率锁定

    #define WIN32_LEAN_AND_MEAN #include <windows.h> #include <windowsx.h> #include <mmsy ...

  7. php图片处理类库 Image

    image 下载地址 https://github.com/Intervention/image.git 下载之后解压 执行composer update 生成 autoload.php文件   该类 ...

  8. php composer使用经验

    1.使用composer引用了一个包,但是这个包没有使用命名空间,在项目中该如何使用这个包? 编辑composer.json文件 "autoload":{ "files& ...

  9. 搜索栏css代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. halcon车牌的识别

    read_image (Audi2, 'audi2') fill_interlace (Audi2, ImageFilled, 'odd') dev_set_color('green') thresh ...