适合新手的前端框架VueJS

一入前端深似海,诚不我欺。

去年入坑Angular 2, 用两个晚上完成教学任务后,又用了将近两周才设置好一个脆弱的开发环境。之所以说脆弱,因为随便加减一个功能就差不多要把整个项目搞坏。

最近想做一个小的网页功能,即希望可以拥有前端的类MVVM开发体验,有不太愿意费太多时间在项目的设置上,VueJS就进入我的视线。

Vue主打的功能是“轻量级”和“渐进式”,非常适合小型web程序开发和原型开发。发布几年来,获得了大量开发者的认可和一个稳定且更新频繁的开源社区。

对于一个只需要简单的前端的小程序,Vue没有让我失望,一个小时入门,两个晚上完成了所需功能。因为是类似POC的小程序原型,所以没有太多关心css和架构,完全以快捷方便为主。基础功能完成后,只有两个文件,一个包含三个组件(component)的js,和一个不到20行的html。当然我的功能简单是一方面(一个计算新西兰技术移民打分的表格),另一方面也完全得益于Vue的这种灵活简单的开发体验。

当今最大的两个UI框架,无疑是Google的Angular,和Facebook的React。经过多年的发展,两者都毫无疑问非常成熟,社区也无比庞大。但Vue的优势,却在于这种渐进式开发体验,非常容易打动我这种前端新手。或许其他框架也可以更加接地气吧,但至少现在还没有这种迹象。

教育和学习都是个循序渐进的过程。Angular牛不牛?当然牛!可是他入门的学习曲线太陡峭了。官方的入门教程,上来就是npm的命令行,初始化后先天就拥有一大堆npm依赖,二话不说先把ng-cli抛给你,让你ng start,ng serve, ng 一大堆。然后你看着茫茫多的未知文件,一个个的去研究琢磨。经常旧的还没弄懂,Google一下又出来一大堆新的名词。更别提,Angular默认支持的是TypeScript。你不仅要先搞清楚TS的语法,还要在编译成JS的路上摔几跤,才能磕磕碰碰的把一个HelloWorld小心翼翼的开发好。

angular-get-started.png

Angular的教学模式,就像是一个高高在上的博士论文,虽然正确,但不免晦涩、生僻,非专业人士难以读懂。或更像是一种填鸭式教育,“不论如何,照我说的做,总有一天你会明白”。但事实是还没等我明白,我就已经放弃了。

与此相反,使用Vue的开发过程,更多以实用、简单为主。开始学习Vue,并不需要node环境,直接创建一个HTML文件,加载Vue的CDN文件,就可以开始入门啦!

<html>  
<head>  
    <script src="https://vuejs.org/js/vue.js"></script>  
</head>  
<body>  
    <div id="app">  
  {{ message }}  
    </div>  
</body>  
<script>  
var app = new Vue({  
  el: '#app',  
  data: {  
    message: 'Hello Vue!'  
  }})  
</script>  
</html>

在Hello Vue之后,教程里没有太多的废话,就直奔最常用的元素v-ifv-for了。至此,已然可以用JS的几个参数去操作UI渲染了!紧接着事件v-on、绑定v-bind和模型v-model则直接说明如何从UI到JS传数据。掌握了这几个关键字,就已经可以编写一个逻辑复杂的单页应用(SPA)了!

完全可以满足我的业务需求了!

当时学到这里我差点老泪纵横,单页应用的开发竟然可以这么简单!要知道,被Angular荼毒过以后,我已经不对高效快捷的前端开发抱有希望了啊!

再往后,所有的概念也都是水到渠成。比如component是一个可复用的组件,computed是一系列动态计算的属性,props用于传入属性等等。虽然还有一些偏晦涩的概念,比如directivemixinsVuex什么的,完全属于锦上添花的东西,如果不是开发中大型项目,完全没有必要了解这些概念。

Vue另外让我更加惊喜的两个功能,一个是在console里直接对controller的操作,另一个是Chrome的DevTool插件。前者可以变相直接操作controller里的数据,后者则直接把Vue的DOM和对应数据树状呈现出来了!这种傻瓜式的开发体验,真是让人不喜欢都不行。

Vue.js Devtools

这一次用Vue开发单页应用的愉快体验,重新激发起了我web开发的兴趣。感谢Vue,和它的作者尤雨溪(Evan You)

后来,在这个Vue的版本上,我又进一步的尝试了Weex的跨平台web app开发和微信小程序的开发。两个方面都不是很顺利,这是后话,下回再表。

You Might Also Like
发表评论