arttemplate+ajax 转 vue

• 第一个项目：mvc框架采用struts2，在服务器端将jsp页面渲染成html文本后返回给用户，没有实现前后端分离
• 第二个项目：采用SpringMVC搭建RESTful服务，服务器端只提供数据，前端开发模式为”arttemplate+ajax”
• 第三个项目：采用SpringMVC搭建RESTful服务，服务器端只提供数据，前端采用VUE提供的数据驱动开发模式

任何开发模式在交互层面做的事最终只有两件：

• DOM节点的CRUD
• DOM事件的CRUD

“模板+ajax” 的开发模式下，这两件事，都需要手动一个一个去完成
angular和vue的开发模式下，viewmodel层对这两件事进行了集成，通过特有的半配置化的ng-和v-语法来完成。viewmodel响应model的变化事件来影响view，也响应view的变化事件来影响model。重点在理解viewmodel

“arttemplate+ajax”开发模式转VUE时，要时刻注意两者思路区别：界面不是被事件改变的，事件只需要改变数据，界面是数据的实时反馈。”arttemplate+ajax”是组合操作，而vue的着眼点是前端开发框架

• JQuery使用最多的是：选择器$，操作DOM树，ajax，JQuery各种插件
• vue的所有的操作关注点都在data上面，通过修改data来控制DOM树！！！
• 从DOM操作时代完美过渡到MVVM时代

以下内容来自 萧强 2015.11.28
众所周知最近几年前端发展非常的迅猛，除各种框架如：backbone、angular、reactjs外，还有模块化开发思想的实现库：sea.js 、require.js 、webpack以及前端上线部署集成工具如： grunt、gulp、fis等。

本文就新型mvvm库：vue.js 与传统库jquery总结下两者开发思路的区别。

jquery曾经是web前端最流行的库（现在也是）， 但无论国内还是国外其使用率渐渐的被其他库或框架占据；随着浏览器厂商对HTML5规范统一遵循以及ECMA6在浏览器端的实现，jq的使用率将会越来越低；更详细论述请参考贺老师的答案：jQuery会过时吗？ - JavaScript以下是国外各类前端库使用情况的小调查：

本文通过几个常见场景梳理下传统库 jquery 与现代新晋mvvm库 vue 在实现相同逻辑时的思路区别

场景1： 注册账号

本场景主要体现一个页面多个步骤的逻辑处理， 类似的场景包括：购买流程、商品购买预约流程等；
注册账号设计图如下

JQ实现方式

jq 的实现思路如下：选择流程dom对象， 点击按钮隐藏当前活动流程dom对象，显示下一流程dom对象。
实现思路图：

VUE实现方式

与jq不同，mvvm框架基本不操作dom节点， 双向绑定使 dom节点跟变量绑定后， 通过修改变量的值控制dom节点的各类属性。所以其实现思路为： 视图层使用一变量控制dom节点显示与否，点击按钮则改变该变量。
实现思路图：

场景2： 购物列表

本场景主要体现界面交互较多的逻辑处理， 类似的场景包括： 用户资料填写（城市、性别点选）、ERP工单申请（申请类型点选）等；

PS: 实际项目中的电商网站不会将购物车、订单结果单页面显示；因为这样不好兼容也不安全， 因而本例只是提供一种多交互的场景。
购物列表设计图如下：

JQ实现方式

jquery 主要考虑 勾选、增加、减少、编辑 商品时对应的逻辑， 对这四种操作赋予不同的事件（点击、失去焦点）；所有事件围绕总价格变化， 故公共事件就是修改价格显示的dom节点；
点击“去支付”按钮时， 遍历商品列表节点然后显示已勾选的商品；
实现思路图：

VUE实现方式

实现与上述jq一样的功能， 在不操作dom节点的情况下vue如何实现呢？商品列表当然是使用v-repeat 遍历实现展示，主要难点在于如何交互： 勾选、增加、减少商品数量时如何改变总价格？ 这时就用到了对象数组的深度监听，使用一新数组存储选中商品，点击“去支付”按钮时， 直接（v-repeat方式）显示该新数组即可。
实现思路图：

场景3：表单提交

本场景主要在于mvvm框架如何动态添加新dom节点；
表单提交设计图：

JQ实现方式

jq实现思路很简单： 监听“新增”按钮点击事件，然后生成dom节点，插入到表单父类节点中。点击“提交”按钮时，遍历所有表单，从表单中获取用户填写的数据即可；
（PS: 本部分代码中没细化用户交互，表单提交时判空处理、表单项手机格式、身份证格式校验等均没实现）
实现思路图：

VUE实现方式

mvvm框架相对于jq给使用者感触最深的或许就是表单， 无论是vue还是angularjs在表单的处理上都有很多特定的官方指令；所以说mvvm框架最适合做erp类型单页面应用， 一来不用管seo, 二来开发效率极高；
vue实现思路跟场景2差不多， v-repeat双向绑定；只要给绑定的数组添加新数据；对应的dom节点就会对应变化， 点击“提交”按钮时，直接展示该数组即可；
（表单操作时，vue对比jq优势就比较明显了，少了操作dom代码； 开发、维护效率都会明显提高）
实现思路图：