Angular1.0和vue的区别
(1)搭建的框架
搭建vue的模板框架
vue-cli脚手架步骤操作简单。
第一步,全局安装cnpm install vue-cli -g;
第二步,vue init webpack my-project;
第三步,cd my-project;
第四步,npm install;
第五步,npm run dev;
angular1.0的框架
angular1.0的框架是手动搭建,到angular2.0就有自己的脚手架了angular-cli
(2)数据的渲染
Vue的数据渲染:
<ul>
<li v-for="item in list">
<a :href="item.url">{{item.title}}</a>
</li>
</ul>
angular的数据渲染:
<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-,风格其实一样的,数据绑定的方式也是一样的两个{}。
(3)Angular\Vue解决页面数据加载时出现{{message}}闪烁的情况
vue使用v-cloak
<style type="text/css">
[v-cloak] { display: none }
</style>
<div v-cloak>{{message}}</div>
angular使用ng-cloak或者是ng-bind代替
<style type="text/css">
[ng-cloak] { display: none }
</style>
<div ng-cloak>{{message}}</div>
<div>
<h1>Hello <span ng-bind="name"></span></h1>
</div>
angular和vue挂载数据和方法
vue挂载数据和方法
var V = new Vue({
el:"#app",
data:{
list:[],
name:''
},
methods:{
method:function(){
console.log("angular");
}
}
})
angular挂载数据和方法
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
$scope.list = [{},{},{}];
$scope.method = function(){
console.log("angular");
}
})
vue的数据和方法都是挂载在vue上,只是数据挂载在vue的data,方法挂载在vue的methods上。
angular1.0 的所有数据和方法都是挂载在$scope上。
vue的代码风格更加优雅。