vue-ng
打开vue的中文官网一段关于vue的描述
HTML 模板 + JSON 数据，再创建一个 Vue 实例，就这么简单。
那我么再看下angular中文网
AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。所以我做了一些工作（你也可以觉得是小花招）来让浏览器做我想要的事。
看到这两句引用，心中是否顿时有种感觉，感觉vue会简单易学，angular难学。其实，你是对的，相对来说，如果我们是jqueryER，学起上面两个玩意儿会很难，思想上定性思维会让我们无法摆脱jquery的dom和事件绑定。
所以，让我们暂时抛弃jquery，安静的看着vue和angular装×吧。
先来说下我的经历，本人14年毕业，一直做着前端的工作，现在杭州宇石网络科技，内部花名单名一个白，从最开始的java转到前端，从最基础的切图到html到js，时间说长也不长，整整两年零3个月。说实话，喜欢前端技术的人都是有着年轻的心的人，前端技术更新快，易入门难精通，必须要有一颗年轻的心才能够在这条路上走的更远，相信我也正走在前端大牛的路上，应该不远。
废话太多了，请注意上面略过
js很难，为什么这么说呢，因为我在开始学js的时候看了一个月的js视频，居然一头雾水。然后我不信邪，又重新看了一遍，还是没有看懂，说实话妙味课堂的js教程我看了不下3遍，每一次都还是会不断去跟着code。用原生的js写过几个轮播和tab切换，之后就转战jquery，那个时候感觉jquery好强大，简直大爱。
当时对前端的技术很是感兴趣，每天就看着各种博客论坛，14年和15年的时候网上关于前端两个词特别显眼，node和angular，我自然要去一探究竟，然后就看了很多关于angular的博客，当然都事新手入门什么的，还有菜鸟什么的，反正就是很多，之后就是看api和文档，然后就是各种对着案例code，不出所料，断断续续的几个月里最终我还是放弃了。
一句话，字都认识，看不懂的滋味真的很难受，曾经一度都认为自己不适合写代码，不适合前端。其实，这是必然的，jquery都没有学好，根本没有安静下心来，学习靠的灵感和安静，只有静下心来看，才会有灵感，才能去理解代码。
直到来到杭州宇石网络，公司之前用的是jquery和require，最近boss说我们开始用下angular，让我们看下angular的文档，说实话，我期待和害怕的，我害怕还是看不懂，不过在这之前，我已经看了vue，可能是因为vue真的简单的原因，一天的时间就看懂的了,然后就是就是深入去看api和实例，然后自己写demo，做小项目。真的感觉是一种解放。
之前一直用jquery去操作dom，现在终于可以解放dom了，vue的指令和数据绑定，帮我们做了一切。深有体会的就是用jq渲染一个列表，如果列表的item内容非常丰富，那简直噩梦，js代码里充斥这各种html标签，各种单双引号嵌套。为了解决中问题，不得不去用temple模板插件，让我们也能优雅的写代码比如:
ejs的循环
<%for(var i = 0; i < data.rows.length; i++){%>
<li>
<img src="<%=data.rows[i].img%>" style="width:200px;"/>
<p><a href="/news/<%=data.rows[i].id%>"><%=data.rows[i].title%></a></p>
</li>
<%}%>
终于可优雅的写html了，有点像jsp，后端渲染的模板，其实没错，node+ejs就是这样渲染。
我们再来看下更优雅的代码
vue的循环
<ul>
<li v-for="item in list">
<a :href="item.url">{{item.title}}</a>
</li>
</ul>
angular和vue的渲染差不多
<div class="item" ng-repeat="news in newsList">
<a ng-href="#/content/{{news.id}}">
<img ng-src="{{news.img}}" />
<div class="item-info">
<h3 class="item-title">{{news.title}}</h3>
<p class="item-time">{{news.createTime}}</p>
</div>
</a>
</div>
angular用的指令是ng-前缀的，而vue是v-，风格其实一样的，数据绑定的方式也是一样的两个{}。
angular和vue挂载数据和方法
var app = angular.module(‘myApp‘, []);
app.controller(‘customersCtrl‘, function($scope) {
$scope.list = [{},{},{}];
$scope.method = function(){
console.log("angular");
}
})
var V = new Vue({
el:"#app",
data:{
list:[{},{},{}]
},
methods:{
method:function(){
console.log("angular");
}
}
})
可以看出angular所有的数据和方法都是挂载在$scope上，而vue的数据和方法都是挂载在vue上，只是数据挂载在vue的data,方法挂载在vue的methods上，可以看出来，vue的代码风格更加优雅，json格式书写代码，一直是前端最喜欢的方式。