走进前端开发之:Vue.js

jopen 6年前

上一篇中,探讨了前端框架的前世今生,最后还列举了当前比较火的几个前端框架,比如:Google 的 Angular,老牌的 Backbone , 非死book 的 React 等等。今天,我只想介绍一个小而美的前端框架: Vue.js

为什么说 Vue.js 是一个小而美的前端框架呢?因为它小, min 版本大小是 72K ( gzip 压缩后是23 K),而 min 版本的 Angular 144K,React 132K。说它小而美并不单单指它的体积,因为还有很多体积比它小的框架,小而美主要是它使用起来太 TM 的简单直观了!

Vue.js 的中文主页: http://cn.vuejs.org/

在主页中,号称“10 秒钟看懂 Vue.js”,的确是这么回事:

<div id="demo">    <p>{{message}}</p>    <input v-model="message">  </div>
var demo = new Vue({    el: '#demo',    data: {      message: 'Hello Vue.js!'    }  })

上面例子的效果是在 input 里输入任何内容,会自动出现在 <p> 里。非常简单直观的进行了数据绑定,只要数据发生变化, View 会自动发生变化。这就是数据驱动的。

并不是每个人都需要或者有机会去开发一个大型的 Web 应用,那些流行的框架又需要一定的学习曲线,而且很多功能并不需要使用到。或者说,你只想干一件简单的事情,但是由于引入了那些框架,使得自己不得不按照框架的规定定义一个又一个东西,最后仅仅是为了实现一个简单的功能。

所以, Vue.js 非常适合用于一些小型项目(当然,大型项目也适合。),因为可以快速上手,简单的看下它的文档就可以开始动手了。而且, Vue.js 的执行速度也非常的快。

TodoMVC Benchmark 的评测中,得出的综合评价:Mercury, Vue and Mithril are king.

在 Safari 6.1, OS X 的评测里,Vue.js 的性能直接排到了第一的位置:

走进前端开发之:Vue.js

所以,我现在就有冲动拿 Vue.js 来做点东西了,刚好目前要做的一个项目可以用上,这样可以少写很多烦人的 JavaScript 代码了,简直完美。

Vue.js (读音 /vjuː/, 类似于 view),是一个构建数据驱动的 web 界面的库。它的作者是个中国人:尤小右,真名尤雨溪,之前在 Google Creative Lab 工作过。正是目睹了 Angular 、 Ember 框架的笨重不够灵活,Backbone 不支持数据绑定 , Knockout 和 Ractive 在组件的嵌套和组合上不够理想,于是他决定自己重新设计一个简洁的 MVVM 数据绑定的前端框架。

在 GitHub 上, Vue.js 已经收集了 9500 多个 Star,为了让更多人参与进来贡献代码,作者坚持保持代码测试的覆盖率为 100% 。

走进前端开发之:Vue.js

Vue.js 的目标是通过尽可能简单的 API 实现 响应的数据绑定组合的视图组件

响应的数据绑定就是数据驱动视图的概念。它让你在写 Web 应用界面时,只需要关注两件事:数据如何展示和数据如何变化。一旦数据发生变化时,比如用户输入,或者 ajax 请求返回后数据发现修改,对应的视图界面会自动的进行更新。(之前的做法是使用 jQuery 手动操作 DOM 更新界面元素。)

走进前端开发之:Vue.js

定义好数据如何展示,绑定数据后,就只需要关心数据如何变化的事情了,是不是感觉 So Easy !

组合的视图组件是 Vue.js 的一个重要概念,有了组件系统,可以很好的复用组件,提高效率,从而也为开发一个大型应用提供了很好的技术保证。

本文并不是要详细介绍 Vue.js 的特点及使用方法,因为要学习 Vue.js ,看官方的文档是最好的学习方式。作者是中国人,自带中文文档已经足够方便让你学习起步。本文的目的只是想介绍 Vue.js ,因为我认为它很了不起。

在如此激烈的前端框架竞争环境下, 凭借作者一己之力,用小而美,精简易用,性能还那么好的 Vue.js 直接挑战了像 Google 、 非死book 这样公司开发的前端框架。作者在设计框架时,时时刻刻遵循简单、精巧、易用的设计哲学让人钦佩。为保证代码的质量,获得更多的开发者的信赖,作者的每一行代码都经过单元测试,体现了作者的严谨性。这就是我从他身上学到的东西。

最后,再次给出 Vue.js 的链接: http://cn.vuejs.org/