집 >웹 프론트엔드 >JS 튜토리얼 >Angularjs와 Vue.js를 사용한 비교

Angularjs와 Vue.js를 사용한 비교

不言원래의: 2018-04-10 10:59:191709검색

이 글의 내용은 Angularjs와 Vue.js를 사용한 비교 내용입니다. 이제 도움이 필요한 친구들이 참고할 수 있습니다.

Angularjs와 Vue.js 사용 비교

이전 프로젝트에서는 모두 Angularjs를 사용했습니다. (이 글에서는 주로 Angularjs를 다루니 참고해주세요. 1) 초기 사용 후 간단한 비교노트를 작성해 보세요. Vue.js.

우선 각각의 특성을 이론적으로 간략하게 설명하고 몇 가지 작은 예를 들어 설명하겠습니다.

Angular

1, MVVM(모델)(뷰)(뷰 모델)

2, 모듈형(모듈) 컨트롤러(컨트롤러) 종속성 주입:

3, 양방향 데이터 바인딩: 인터페이스 작업은 실시간으로 데이터에 반영될 수 있으며, 데이터 변경 사항은 실시간으로 인터페이스에 표시될 수 있습니다.

4, 명령(ng-click ng-bind ng-model ng-href ng-src ng-if/ng-show...)

Vue
프로그레시브 프레임워크
세트입니다. 다른 헤비급 프레임워크와 달리 Vue는 상향식 증분 개발 설계를 채택합니다. Vue의 핵심 라이브러리는 뷰 레이어에만 중점을 두고 있으며 다른 라이브러리나 기존 프로젝트와 배우고 통합하기가 매우 쉽습니다. 반면 Vue는
단일 파일 구성 요소
Vue 생태계 지원 라이브러리
를 사용하여 개발된 복잡한 단일 페이지 애플리케이션을 완벽하게 지원할 수 있습니다.
반응형 데이터 바인딩
및
결합된 뷰 구성 요소

(1) 모듈화 현재 가장 인기 있는 방법은 프로젝트에서 직접 ES6 모듈화를 사용하고 이를 프로젝트 패키징을 위해 Webpack과 결합하는 것입니다.

(2) 컴포넌트화, 접미사 . vue , 템플릿(html 코드), 스크립트(es6 코드), 스타일(css 스타일) 포함

(3) 양방향 데이터 바인딩: 인터페이스의 동작이 실시간으로 데이터에 반영될 수 있으며, 데이터의 변경 사항은 실시간으로 인터페이스에 표시될 수 있습니다. (4) 명령(v-html v-bind v-model v-if/v-show...)

(5) 라우팅(vue-router)
(6) vuex 데이터 공유
(7) Ajax 플러그인(vue-resource, axios)

vue는 압축 후 최소 소스 코드가 72.9kb입니다. gzip 압축 후 Angular에 비해 144kb에 불과합니다. 라우팅 플러그인(Vue-router) 및 Ajax 플러그인(vue -resource, axios) 등

Vue와 Angular 간의 양방향 데이터 바인딩 원칙

angular.js: Dirty 값 check

angular.js는 더티 값 감지를 사용하여 데이터가 변경되었는지 확인합니다. 가장 간단한 방법은 setInterval()을 통해 데이터 변경을 감지하기 위해 정기적으로 폴링하는 것입니다. Angular는 지정된 이벤트가 트리거될 때만 더티 값 감지를 입력합니다. 이는 대략 다음과 같습니다.

DOM 이벤트, 예를 들어 사용자가 텍스트를 입력하거나 버튼을 클릭하는 등입니다. (ng-click)
) 또는 $apply()
vue
Data hijacking
코드는 바로 아래에 있습니다

vue

<p id="app">
  {{ message }}
</p>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

Angular입니다. <p ng-app="myApp" ng-controller="myCtrl"> {{message}} </p> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.message = "Hello world"; });
이에 비해 Vue는 dom과 데이터를 작성하기 위해 json 데이터 형식을 사용합니다. 작성 스타일은 이해하기 쉬운 js 데이터 인코딩 형식에 더 가깝습니다.

Vue의 양방향 데이터 바인딩

<p id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</p>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

Angular의 양방향 데이터 바인딩

<p ng-app="myApp" ng-controller="myCtrl">
  <p>{{message}}</p>
  <input ng-model="message">
</p>

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.message = "Hello world!";
});

Vue는 경량 프레임워크이지만 몇 가지 편리한 지침 및 속성 작업을 포함하여 많은 API를 제공합니다. 지시문 (ng-)를 사용하는 anglejs 지시문과 비교하여 (v-) 연산자를 사용합니다. 그중 vue.js는 지침의 약어도 지원합니다:

(1) 이벤트 클릭

<a v-on: click="fn"></a>

약어:
< ;/a>

(2)속성

<a v-bind: href="url"></a>

약어:
<a :href="url"></a>

vue.渲染列表

<p id="app">
  <ul>
    <li v-for="name in names">
      {{ name.first }}
    </li>
  </ul>
</p>

new Vue({
  el: '#app',
  data: {
    names: [
      { first: 'summer', last: '7310' },
      { first: 'David', last:'666' },
      { first: 'Json', last:'888' }
    ]
  }
})

Angularjs渲染列表

<p ng-app="myApp" ng-controller="myCtrl">
  <li ng-repeat="name in names">{{name.first}}</li>
</p>

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = [
      { first: 'summer', last: '7310' },
      { first: 'David', last:'666' },
      { first: 'Json', last:'888' }
    ]
});

vue的循环

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

angular和vue的渲染差不多

<p class="item" ng-repeat="news in  newsList">
    <a ng-href="#/content/{{news.id}}">
        <img ng-src="{{news.img}}" />
        <p class="item-info">
            <h3 class="item-title">{{news.title}}</h3>
            <p class="item-time">{{news.createTime}}</p>
        </p>
    </a>
</p>

vue和Angular处理用户输入

<p id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</p>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

<p ng-app="myApp" ng-controller="myCtrl">
 <p>{{ message }}</p>
 <button ng-click="reverseMessage()">Reverse Message</button>
</p>

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.message = "Hello world!";
    $scope.reverseMessage = function() {
        this.message = this.message.split('').reverse().join('')
    }
});