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:
var mainApp = angular.module("mainApp", []);
mainApp.controller('mainController', function (scope.watch('kilometers', function (newValue, oldValue) {
});