一入前端深似海，诚不我欺。
去年入坑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-if和v-for了。至此，已然可以用JS的几个参数去操作UI渲染了！紧接着事件v-on、绑定v-bind和模型v-model则直接说明如何从UI到JS传数据。掌握了这几个关键字，就已经可以编写一个逻辑复杂的单页应用(SPA)了！
完全可以满足我的业务需求了！
当时学到这里我差点老泪纵横，单页应用的开发竟然可以这么简单！要知道，被Angular荼毒过以后，我已经不对高效快捷的前端开发抱有希望了啊！
再往后，所有的概念也都是水到渠成。比如component是一个可复用的组件，computed是一系列动态计算的属性，props用于传入属性等等。虽然还有一些偏晦涩的概念，比如directive，mixins，Vuex什么的，完全属于锦上添花的东西，如果不是开发中大型项目，完全没有必要了解这些概念。
Vue另外让我更加惊喜的两个功能，一个是在console里直接对controller的操作，另一个是Chrome的DevTool插件。前者可以变相直接操作controller里的数据，后者则直接把Vue的DOM和对应数据树状呈现出来了！这种傻瓜式的开发体验，真是让人不喜欢都不行。
Vue.js Devtools
这一次用Vue开发单页应用的愉快体验，重新激发起了我web开发的兴趣。感谢Vue，和它的作者尤雨溪(Evan You)
后来，在这个Vue的版本上，我又进一步的尝试了Weex的跨平台web app开发和微信小程序的开发。两个方面都不是很顺利，这是后话，下回再表。
网友评论