Angular1.0和vue的区别

2019独角兽企业重金招聘Python工程师标准>>>

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的代码风格更加优雅。

转载于:https://my.oschina.net/lixiaoyan/blog/1510446