达维营-前端网之前项目都是使用Angularjs，（注明此处主要讲Angularjs 1）在初步使用Vue.js后做一个简答的对比笔记。
首先从理论上简单说一下各自的特点，之后再用几个小的例子加以说明。
Angular
1，MVVM（Model）(View)(View-model)
2，模块化（Module）控制器（Contoller）依赖注入：
3，双向数据绑定：界面的操作能实时反映到数据，数据的变更能实时展现到界面。
4，指令(ng-click ng-model ng-href ng-src ng-if…)
5，服务Service($compile $filter $interval $timeout $http…)
其中双向数据绑定的实现使用了$scope变量的脏值检测，使用$scope.$watch（视图到模型），$scope.$apply(模型到视图)检测，内部调用的都是digest，当然也可以直接调用$scope.$digest进行脏检查。值得注意的是当数据变化十分频繁时，脏检测对浏览器性能的消耗将会很大，官方注明的最大检测脏值为2000个数据。
Vue
vue.js官网：是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
（1）模块化，目前最热的方式是在项目中直接使用ES6的模块化，结合Webpack进行项目打包
（2）组件化，创造单个component后缀为.vue的文件，包含template(html代码)，script(es6代码),style(css样式)
（3）路由，
vue非常小巧，压缩后min源码为72.9kb，gzip压缩后只有25.11kb，想比Angular为144kb，可以自驾搭配使用需要的库插件，类似路由插件(Vue-router)，Ajax插件(vue-resource)等
下面直接上代码
首先当然是Hello World了
vue
<div id="app">
{{ message }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
Angular
<div ng-app="myApp" ng-controller="myCtrl">
{{message}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.message = "Hello world";
});
</script>
相比较来看，vue采用了json的数据格式进行dom和data的编写，编写风格更加靠进js的数据编码格式，通俗易懂。
vue的双向数据绑定
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
Angular的双向数据绑定
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{message}}</p>
<input ng-model="message">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.message = "Hello world!";
});
</script>
vue虽然是一个轻量级的框架，提供的API确非常多，包括一些便捷的指令和属性操作，一般vue是指令使用(v-)操作符，相比angularjs指令使用（ng-）。其中vue.js还支持指令的简写方式：
(1)事件click简写方式：
(2)属性简写方式：
vue.渲染列表
<div id="app">
<ul>
<li v-for="name in names">
{{ name.first }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
names: [
{first: 'summer', last: '7310'},
{first: 'David', last: '666'},
{first: 'Json', last: '888'}
]
}
})
</script>
Angularjs渲染列表
<div ng-app="myApp" ng-controller="myCtrl">
<li ng-repeat="name in names">{{name.first}}</li>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.names = [
{first: 'summer', last: '7310'},
{first: 'David', last: '666'},
{first: 'Json', last: '888'}
]
});
</script>
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>
vue和Angular处理用户输入
vue
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
angular
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ message }}</p>
<button ng-click="reverseMessage()">Reverse Message</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.message = "Hello world!";
$scope.reverseMessage = function() {
this.message = this.message.split('').reverse().join('')
}
});
</script>