首页手记 angular和vue的对比学习之路

angular和vue的对比学习之路

标签：

AngularJS

打开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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="<%=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-class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="{{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格式书写代码，一直是前端最喜欢的方式。

好了快下班了，明天继续。。。

点击查看更多内容