[javascript] Vue.js vs Angular.js 비교

[javascript] Vue.js vs Angular.js 비교

Modules / Components

모듈은 컨트롤러, 지시어 등과 같은 다른 엔티티를 포함하는 Angular의 컨테이너입니다. Vue에서는 대부분의 구성 요소를 포함합니다.

Angular Modules

angular.module('myModule', [...]);

Vue components

Vue.extend({
  data: function(){ return {...}},
  created: function(){...}
});

directives 지시자

Vue에서는 지시어가 강력하지 않습니다. 그들은 더 집중된 것처럼 보인다. Angular에서는 지시어가 Vue에서 컴포넌트와 매우 흡사 한 많은 것들이 될 수 있습니다.

Angular directives

myModule.directive('directiveName', function(injectables){
  return {
    restrict: 'A',
    template: '<div></div>',
    controller: function(){...},
    compile: function(){...},
    link: function(){...}
    // other props excluded
  }
});

Vue directives

Vue.directive('my-directive', {
  bind: function(){...},
  update: function(newValue, oldValue){...},
  unbind: function(){...}
});

Filter 필터

Vue는 읽기 / 쓰기 옵션을 제공하지만 필터의 차이는 크지 않습니다.

Angular filters

myModule.angular.module('filterName', [])
.filter('reverse', function(){
  return function(input){...};
});

Vue filters

Vue.filter('reserve', function(value){
  return function(value){...};
});

Interpolation

오브젝트 또는 배열 보간은 Vue의 박스에서 즉시 작동하지 않습니다 ([Object]가 표시됩니다). Angular에서 디버깅하는데 유용하다는 것을 알았다. Vue는 json 필터가 내장되어 있습니다.

Angular interpolation

{{myVariable}}

Vue interpolation

{{myVariable}}

Model binding

Angular model binding

<input type="text" ng-model="myVar">
<p ng-bind="myVar"></p>

Vue model binding

<input type="text" v-model="myVar">
<p v-bind="myVar"></p>

Loops

Both support model options (ex. debounce for a loop filter), BTW, we can also assign repeated objects in Vue, like in Angular: v-repeat="item: items"

Angular Loops

<li ng-repeat="item in items" class="item-{{$index}}">
	{{item.myProperty}}
</li>

Vue Loops

<li v-repeat="item in items" class="item-{{$index}}">
	{{item.myProperty}}
</li>

Conditionals

Angular conditionals

<div ng-if="myVar"></div>
<div ng-show="myVar"></div>

Vue conditionals

<div v-if="myVar"></div>
<div v-show="myVar"></div>

Conditional classes

유사점을 보여주는 또 다른 예입니다. 둘 다 v-attr / ng-attr을 지원합니다.

Angular conditonal classes

<div ng-class="{'active': myVar}"></div>

Vue conditional classes

<div v-class="active: myVar"></div>

Event binding

일반적인 v-on 지시문은 Angular보다 일관성있게 만듭니다. 그러나 개인적인 선호도에 따라 달라질 수 있습니다.

Angular event binding

<div ng-click="myMethod($event)"></div>

Vue event binding

<div v-on="click: myMethod($event)"></div>

출처

• https://dzone.com/articles/vuejs-is-good-but-is-it-better-than-angular-or-rea