VueJS - 适合新手的前端框架-变化吧

二叶草

1214
文章

0
评论

2020年3月8日16:22:48前端框架评论阅读模式

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

去年入坑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教程

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)

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

本文来源于：VueJS - 适合新手的前端框架-变化吧门户
特别声明：以上文章内容仅代表作者本人观点，不代表变化吧门户观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与变化吧联系。