走进前端开发之:Vue.js

上一篇中,探讨了前端框架的前世今生,最后还列举了当前比较火的几个前端框架,比如:Google 的 Angular,老牌的 Backbone , Facebook 的 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 的性能直接排到了第一的位置:

todomvc-perf-Safari

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

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

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

vue-cov

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

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

mvvm

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

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

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

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

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

走进前端开发系列:

  1. 走进前端开发之:Bootstrap
  2. 走进前端开发之:框架的演变
微信扫一扫交流

作者:CoderZh
微信关注:hacker-thinking (一个程序员的思考)
本文出处:https://blog.coderzh.com/2015/11/15/front-end-dev-vuejs/
文章版权归本人所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。