首页 > 代码库 > angular和vue的对比学习之路

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="http://www.mamicode.com/" style="width:200px;"/>
        <p><a href="http://www.mamicode.com/news/"><%=data.rows[i].title%></a></p>
    </li>
<%}%>

  

终于可优雅的写html了,有点像jsp,后端渲染的模板,其实没错,node+ejs就是这样渲染。

我们再来看下更优雅的代码

vue的循环

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

 

angular和vue的渲染差不多

<div class="item" ng-repeat="news in  newsList">
    <a ng-href="http://www.mamicode.com/#/content/{{news.id}}">
        <img ng-src="http://www.mamicode.com/{{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格式书写代码,一直是前端最喜欢的方式。

angular和vue的对比学习之路