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 }}

控制器:





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:

{{msg}}


vue:与angular类似,把'ng-cloak'改成'v-cloak'就行了

阻止表单提交,并在点击提交按钮时调用一个函数:
angular:


vue:

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

监听器:
angular:
var mainApp = angular.module("mainApp", []);
mainApp.controller('mainController', function (scope.watch('msg', function (val) { }); }); vue: 方法1:在组件里: watch : { kilometers:function(val) { this.kilometers = val; this.meters = this.kilometers * 1000 }, } 方法2:在全局里: vm.watch('kilometers', function (newValue, oldValue) {
});

你可能感兴趣的:(angular1与vue比较)