angular和vue的對比學習之路

vue-ng

打開vue的中文官網一段關於vue的描述

HTML 模板 + JSON 數據，再創建一個 Vue 實例，就這么簡單。

那我么再看下angular中文網

AngularJS是為了克服HTML在構建應用上的不足而設計的。HTML是一門很好的為靜態文本展示設計的聲明式語言，但要構建WEB應用的話它就顯得乏力了。所以我做了一些工作（你也可以覺得是小花招）來讓瀏覽器做我想要的事。

看到這兩句引用，心中是否頓時有種感覺，感覺vue會簡單易學，angular難學。其實，你是對的，相對來說，如果我們是jqueryER，學起上面兩個玩意兒會很難，思想上定性思維會讓我們無法擺脫jquery的dom和事件綁定。

所以，讓我們暫時拋棄jquery，安靜的看着vue和angular裝×吧。

先來說下我的經歷，本人14年畢業，一直做着前端的工作，現在杭州宇石網絡科技，內部花名單名一個白，從最開始的java轉到前端，從最基礎的切圖到html到js，時間說長也不長，整整兩年零3個月。說實話，喜歡前端技術的人都是有着年輕的心的人，前端技術更新快，易入門難精通，必須要有一顆年輕的心才能夠在這條路上走的更遠，相信我也正走在前端大牛的路上，應該不遠。

廢話太多了，請注意上面略過

js很難，為什么這么說呢，因為我在開始學js的時候看了一個月的js視頻，居然一頭霧水。然后我不信邪，又重新看了一遍，還是沒有看懂，說實話妙味課堂的js教程我看了不下3遍，每一次都還是會不斷去跟着code。用原生的js寫過幾個輪播和tab切換，之后就轉戰jquery，那個時候感覺jquery好強大，簡直大愛。

當時對前端的技術很是感興趣，每天就看着各種博客論壇，14年和15年的時候網上關於前端兩個詞特別顯眼，node和angular，我自然要去一探究竟，然后就看了很多關於angular的博客，當然都事新手入門什么的，還有菜鳥什么的，反正就是很多，之后就是看api和文檔，然后就是各種對着案例code，不出所料，斷斷續續的幾個月里最終我還是放棄了。

一句話，字都認識，看不懂的滋味真的很難受，曾經一度都認為自己不適合寫代碼，不適合前端。其實，這是必然的，jquery都沒有學好，根本沒有安靜下心來，學習靠的靈感和安靜，只有靜下心來看，才會有靈感，才能去理解代碼。

直到來到杭州宇石網絡，公司之前用的是jquery和require，最近boss說我們開始用下angular，讓我們看下angular的文檔，說實話，我期待和害怕的，我害怕還是看不懂，不過在這之前，我已經看了vue，可能是因為vue真的簡單的原因，一天的時間就看懂的了,然后就是就是深入去看api和實例，然后自己寫demo，做小項目。真的感覺是一種解放。

之前一直用jquery去操作dom，現在終於可以解放dom了，vue的指令和數據綁定，幫我們做了一切。深有體會的就是用jq渲染一個列表，如果列表的item內容非常豐富，那簡直噩夢，js代碼里充斥這各種html標簽，各種單雙引號嵌套。為了解決中問題，不得不去用temple模板插件，讓我們也能優雅的寫代碼比如:

ejs的循環

<%for(var i = 0; i < data.rows.length; i++){%>
    <li>
        <img src="<%=data.rows[i].img%>" style="width:200px;"/>
        <p><a href="/news/<%=data.rows[i].id%>"><%=data.rows[i].title%></a></p>
    </li>
<%}%>

　　

終於可優雅的寫html了，有點像jsp，后端渲染的模板，其實沒錯，node+ejs就是這樣渲染。

我們再來看下更優雅的代碼

vue的循環

<ul>
    <li v-for="item in list">
        <a :href="item.url">{{item.title}}</a>
    </li>
</ul>

 

angular和vue的渲染差不多

<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-，風格其實一樣的，數據綁定的方式也是一樣的兩個{}。

angular和vue掛載數據和方法

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
    $scope.list = [{},{},{}];
    $scope.method = function(){
        console.log("angular");
    }
})
var V = new Vue({
    el:"#app",
    data:{
        list:[{},{},{}]
    },
    methods:{
        method:function(){
            console.log("angular");
        }
    }
})

 

可以看出angular所有的數據和方法都是掛載在$scope上，而vue的數據和方法都是掛載在vue上，只是數據掛載在vue的data,方法掛載在vue的methods上，可以看出來，vue的代碼風格更加優雅，json格式書寫代碼，一直是前端最喜歡的方式。