angular1与vue比较

angular：以‘ng-’开头的指令，都可以用‘data-ng-’开头

控制区域：
angular：根标签加上ng-app
vue：根标签一般加上id='app'(id值可以修改)，再new Vue({el : '#app'});

双向数据绑定：
angular：ng-model
vue：v-model

数据绑定：
angular：ng-bind
vue：v-bind

表达式：
angular和vue：{{ 变量名1+ " " + 变量名2 }}

控制器：
<div ng-app="my_app" ng-controller="my_ctrl">
<button type="button" ng-click="say_hello()">点我</button>
</div>
<script src="./js/angular.min.js"></script>
<script>
let app = angular.module('my_app', []);
app.controller('my_ctrl', function (scope.say_hello = function () {
};
});
</script>

angular的控制器方法：
scope.first_name + ' ' + $scope.last_name;
};
vue的计算属性：
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}

过滤器：
angular和vue：{{ lastName | uppercase }}

自定义过滤器：
angular：
app.filter('reverse', function() { //可以注入依赖
return function(text) {
return text.split("").reverse().join("");
}
});
vue：
Vue.filter('borrowStateFilter', function (data) {
return data;
});

遍历数组：
angular：ng-repeat，索引用$index
vue：v-for

判断是否显示某个元素：
angular：ng-if、ng-show
vue：v-if、v-show
ng-show和v-show是false时，元素都不会被删除，而是设置了display:none;

设置元素的disabled属性：
angular：ng-disabled=
vue：v-bind:disabled=

路由：
angular：angular-route.js
vue：vue-router

页面加载时防止应用闪烁（避免看到原始的‘{{变量名}}’）:
angular：
<div ng-cloak>{{msg}}</div>
<style>
[ng-cloak]{
display: none;
}
</style>
vue：与angular类似，把'ng-cloak'改成'v-cloak'就行了

阻止表单提交，并在点击提交按钮时调用一个函数：
angular：
<form ng-submit="my_func()"></form>
vue：
<form v-on:submit.prevent="onSubmit"></form>

angular所有请求放在一个js文件里： image.png

监听器：
angular：
var mainApp = angular.module("mainApp", []);
mainApp.controller('mainController', function (scope.watch('kilometers', function (newValue, oldValue) {
});