VUE(现代库) VS jquery(传统库) | vue jquery比較
众所周知最近几年前端发展非常的迅猛,除各种框架如:backbone、angular、reactjs外,还有模块化开发思想的实现库:sea.js、require.js、webpack以及前端上线部署集成工具如:grunt、gulp、fis等。本文就新型mvvm库:vue.js与传统库jquery总结下两者开发思路的区别。jquery曾经是web前端最流行的库(现在也是),但无论国内还是国外其使用率渐渐的被其他库或框架占据;随着浏览器厂商对HTML5规范统一遵循以及ECMA6在浏览器端的实现,jq的使用率将会越来越低;(更详细论述请参考贺老师的答案:jQuery会过时吗?-JavaScript[1])以下是...
众所周知最近几年前端发展非常的迅猛,除各种框架如:backbone、angular、reactjs外,还有模块化开发思想的实现库:sea.js 、require.js 、webpack以及 前端上线部署集成工具如: grunt、gulp、fis等。
本文就新型mvvm库:vue.js 与传统库jquery总结下两者开发思路的区别。
jquery曾经是web前端最流行的库(现在也是), 但无论国内还是国外其使用率渐渐的被其他库或框架占据;随着浏览器厂商对HTML5规范统一遵循以及ECMA6在浏览器端的实现,jq的使用率将会越来越低;(更详细论述请参考贺老师的答案:jQuery会过时吗? - JavaScript[1])以下是国外各类前端库使用情况的小调查:
当然本文的重点不是讨论JQ是否过时,自己用mvvm类框架一年有余;针对不少刚学Angular 或 vue 的同学在写逻辑代码时仍然使用jquery思维的情况, 本文做个小总结: 方便前端同学明白mvvm库的开发思路及理清个人对两类库的理解,通过几个常见场景梳理下传统库 jquery 与现代新晋mvvm库 vue 在实现相同逻辑时的思路区别; 与本人其他博文一样,本文包括 代码、说明图以及demo。
场景1: 注册账号:本场景主要体现一个页面多个步骤的逻辑处理, 类似的场景包括:购买流程、商品购买预约流程等;
注册账号设计图如下:
1.1. JQ实现方式:
如贴代码, 那本文将被代码完全占据, 所以代码部分以链接方式附上; jq 的实现思路如下:选择 流程dom对象, 点击按钮隐藏当前活动流程dom对象,显示下一流程dom对象。
实现思路图:
代码: 注册流程小demo(jq)[2]
1.2.VUE实现方式:
与jq不同 mvvm框架基本不操作dom节点, 双向绑定使 dom节点跟变量绑定后, 通过修改变量的值控制dom节点的各类属性。所以其实现思路为: 视图层使用一变量控制dom节点显示与否,点击按钮则改变该变量。
实现思路图:
代码: 注册流程小demo(vue)[3]
场景2: 购物列表:本场景主要体现界面交互较多的逻辑处理,...