Anglejs와 Vue의 차이점은 무엇입니까? Anglejs와 Vue의 비교 세부정보

이 글에서는 angularjs와 vuejs의 차이점을 주로 소개하고,angularjs와 vue.js의 정렬에 대한 세부 사항도 설명하므로 누구나 쉽게 읽을 수 있습니다. 이 글을 함께 읽어볼까요?

먼저angularjs와 Vue의 차이점을 살펴보겠습니다.

1. vueJS는 간단하고 배우기 쉬운 반면,angularJS는 시작하기 더 쉽습니다. 속도와 편의성에 초점을 맞춘 반면,angularJS 기능은 더 포괄적이지만 vue만큼 더 크고 편리하지 않습니다.

2. angularJS 명령어는 모두 ng-xxx이고 vueJS 명령어는 모두 v-xxx입니다. ;

3. angularJS의 모든 명령어와 메소드는 모두 $scope에 바인딩되어 있으며 vueJS는 새 인스턴스입니다. 한 페이지에 여러 개의 vue 인스턴스가 있을 수 있습니다. 하나의 angleJS 객체;

4. angularJS는 Google에서 개발하고 유지 관리하며, vueJS는 개인이 유지 관리합니다.

5. vueJS는 일반적으로 모바일 개발에 사용되는 반면, angleJS는 일반적으로 대규모 프로젝트에 사용됩니다

6. angularjs 및 Vue 비교 세부 정보:

이전 프로젝트에서는 모두 Angularjs를 사용했습니다. (주로 Angularjs에 대한 내용임을 참고하세요. 1) Vue.js를 처음 사용한 후 간단한 비교 메모를 작성하세요. 우선 각각의 특성을 이론적으로 간략하게 설명한 후 몇 가지 작은 예를 들어 설명하겠습니다. (Angularjs에 대해 더 알고 싶다면 PHP 중국어 웹사이트

칼럼을 확인하세요)

Angular 소개:

1.MVVM (모델) (뷰) (뷰-모델) 2. 모듈 컨트롤러(Contoller) 종속성 주입:

3. 양방향 데이터 바인딩: 인터페이스의 동작을 실시간으로 데이터에 반영할 수 있고, 데이터의 변경 사항을 인터페이스에 실시간으로 표시할 수 있습니다. 시간.

4. 지침(ng-click ng-model ng-href ng-src ng-if...)

5. 서비스($compile $filter $interval $timeout $http...)

양방향입니다. 데이터 바인딩 구현에서는 $scope.$watch(모델에서 보기), $scope.$apply(모델에서 보기) 감지를 사용하여 $scope 변수의 더티 값 감지를 사용하며 내부 호출은 물론 다이제스트일 수 있습니다. 더티 검사를 위해 $scope.$digest를 직접 호출할 수도 있습니다. 데이터가 매우 자주 변경되는 경우 더티 감지는 많은 브라우저 성능을 소모한다는 점에 주목할 가치가 있습니다. 공식 최대 더티 감지 값은 2000개 데이터입니다.

vue.js 공식 웹사이트: 사용자 인터페이스 구축을 위한 진보적인 프레임워크입니다. 다른 헤비급 프레임워크와 달리 Vue는 상향식 증분 개발 설계를 채택합니다. Vue의 핵심 라이브러리는 뷰 레이어에만 중점을 두고 있으며 다른 라이브러리나 기존 프로젝트와 학습하고 통합하기가 매우 쉽습니다. 반면 Vue는 Vue 생태계에서 지원하는 단일 파일 구성 요소 및 라이브러리로 개발된 복잡한 단일 페이지 애플리케이션을 완벽하게 구동할 수 있습니다. Vue.js의 목표는 가능한 가장 간단한 API를 통해 반응형 데이터 바인딩 및 구성된 뷰 구성 요소를 구현하는 것입니다.

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

라우팅,

vue는 매우 작습니다. 최소 소스 코드는 압축 후 72.9kb이고 gzip 압축 후 25.11kb에 불과해 Angular에 비해 144kb로 직접 사용하실 수 있습니다. 필수 라이브러리 플러그인, 유사한 라우팅 플러그인(Vue-router), Ajax 플러그인(vue-resource) 등을 포함합니다.

코드는 바로 아래에 있습니다.

첫 번째는 물론 Hello World

<div id="app">
  {{ message }}
</div>
 new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;Hello Vue.js!&#39;
  }
})

<div ng-app="myApp" ng-controller="myCtrl">
 {{message}}
</div>
var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope) {
    $scope.message = "Hello world";
});

vue와 Angular는 사용자 입력을 처리합니다

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>
new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;Hello Vue.js!&#39;
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
    }
  }
})

<div ng-app="myApp" ng-controller="myCtrl">
 <p>{{ message }}</p>
 <button ng-click="reverseMessage()">Reverse Message</button>
</div>
var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope) {
    $scope.message = "Hello world!";
    $scope.reverseMessage = function() {
        this.message = this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
    }
});

<div id="app">
  <ul>
    <li v-for="name in names">
      {{ name.first }}
    </li>
  </ul>
</div>
new Vue({
  el: &#39;#app&#39;,
  data: {
    names: [
      { first: &#39;summer&#39;, last: &#39;7310&#39; },
      { first: &#39;David&#39;, last:&#39;666&#39; },
      { first: &#39;Json&#39;, last:&#39;888&#39; }
    ]
  }
})

<div ng-app="myApp" ng-controller="myCtrl">
  <li ng-repeat="name in names">{{name.first}}</li>
</div>
var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope) {
    $scope.names = [
      { first: &#39;summer&#39;, last: &#39;7310&#39; },
      { first: &#39;David&#39;, last:&#39;666&#39; },
      { first: &#39;Json&#39;, last:&#39;888&#39; }
    ]
});