页面特效 UI组件库 菜单导航 窗口特效 幻灯片滑动 图像相册 表单 选项卡 表格 评分星级 手风琴 文本链接 布局 日历 颜色选择器 按钮 图表 html5 提示 ExtJS 在线客服 其他特效 地图 树形控件 移动开发 BootStrap 滑动条 文件上传 表单验证 分页 播放器 Angular

轻型高效的MVVM框架Vue.js

Angular UI组件库 HTML我帮您 1年前  次浏览

Vue.js 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来,让数据的变化自动映射为视图的更新。Vue.js在数据绑定的API设计上借鉴了Angular的指令机制:用户可以通过具有特殊前缀的HTML属性来实现数据绑定,也可以使用常见的花括号模板插值,或是在表单元素上使用双向绑定。

轻型高效的MVVM框架Vue.js

优点:
简洁
HTML 模板 + JSON 数据,再创建一个 Vue 实例,就这么简单。

数据驱动
自动追踪依赖的模板表达式和计算属性。

组件化
用解耦、可复用的组件来构造界面。

轻量
~24kb min+gzip,无依赖。

快速
精确有效的异步批量 DOM 更新。

模块友好
通过 NPM 或 Bower 安装,无缝融入你的工作流。


扩展阅读


AngularJS

AngularJS最近很火,追随者也很多。 Superheroic JavaScript MVW Framework
官方说得很朴素:“完全使用JavaScript编写的客户端技术。同其他历史悠久的Web技术(HTML、CSS和JavaScript)配合使用,使Web应用开发比以往更简单、更快捷“。当你学习它的时候,我相信你会被它的很多新特效所吸引。
优点:

    动态视图:以前从来没有想过js可以如此扩展HTML的属性,但是AngularJs做到了,它替我们静态的HTML加了很多扩展性功能,有一种让HTML由死变活的感觉。
    完善:是一个比较完善的前端MVW框架,包含模板,数据双向绑定,路由,模块化,服务,依赖注入等所有功能,模板功能强大丰富,并且是声明式的,自带了丰富的 Angular 指令。
    Google维护:AngularJS有Google来维护,无疑有了一个强大的后台,对于推广和维护明显比Vue.js和avalon有优势,社区也非常活泼,能够很好促进它的发展。
    AngularJS & Ionic:Ionic: Advanced HTML5 Hybrid Mobile App Framework,这俩就是一个好基友,Ionic通过用AngularJS为了创建一个框架,最适合开发的丰富和强大的应用程序。上次于知乎答了一个相关问题做webapp开发,性能和效率最好的框架和打包app平台分别是哪个? - 汤威的回答,详细可以见这里。

缺点:

    大而全:学习起来有难度,对于我来讲学习曲线很曲折,比较难理解一些。
    推翻重写:前段时候逛社区发现AngularJS2.0会把之前的推翻重写,两个框架的改变很大,基本是两个框架了,等于是说等到2.0出来后又需要从头开始,不过又说回来, @徐飞老师的[翻译]有关Angular 2.0的一切 · Issue #8 · xufei/blog · GitHub这篇文章很好说明了AngularJS2.0的变化。
    不支持IE8以下,貌似2.0变得只支持移动端了,等到出来后再看吧。


Avalon.js

Avalon.js是@司徒正美老师所写的个简单易用迷你的MVVM框架,它最早发布于2012.09.15,为解决同一业务逻辑存在各种视图呈现而开发出来的。常常可以看到老师推广他的Avalon.js,出了很多教程,无疑对国内学习Avalon.js的人提供了巨大方便。

优点
    使用简单,在HTML中添加绑定,在JS中用avalon.define定义ViewModel,再调用avalon.scan方法,它就能动了!
    兼容到 IE6 (其他MVVM框架,KnockoutJS(IE6), AngularJS(IE9), EmberJS(IE8), WinJS(IE9) ),另有avalon.mobile,它可以更高效地运行于IE10等新版本浏览器中
    没有任何依赖,不到5000行,压缩后不到50KiB
    支持管道符风格的过滤函数,方便格式化输出
    局部刷新的颗粒度已细化到一个文本节点,特性节点
    要操作的节点,在第一次扫描就与视图刷新函数相绑定,并缓存起来,因此没有选择器出场的余地。
    让DOM操作的代码近乎绝迹
    使用类似CSS的重叠覆盖机制,让各个ViewModel分区交替地渲染页面
    节点移除时,智能卸载对应的视图刷新函数,节约内存
    操作数据即操作DOM,对ViewModel的操作都会同步到View与Model去
    自带AMD模块加载器,省得与其他加载器进行整合。

相关链接

发表评论