>  기사  >  웹 프론트엔드  >  Anglejs와 vuejs의 차이점은 무엇입니까

Anglejs와 vuejs의 차이점은 무엇입니까

青灯夜游
青灯夜游원래의
2021-09-24 16:05:081377검색

차이점: 1. Angularjs는 "더티 값 감지"를 사용하여 데이터가 변경되었는지 비교하여 양방향 데이터 바인딩을 달성하는 반면 Vue는 "게시자-구독자 모델"과 결합된 "데이터 하이재킹"을 사용하여 양방향 데이터 바인딩을 달성합니다. . 2. vue 명령어는 "v-" 연산자를 사용하고, anglejs 명령어는 "ng-"를 사용합니다.

Anglejs와 vuejs의 차이점은 무엇입니까

이 튜토리얼의 운영 환경: windows7 시스템, vue2.9.6&&Angular9 버전, DELL G3 컴퓨터.

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...)
  • 5, 서비스 서비스($compile $filter $interval $timeout $http. ..)
  • 6, 라우팅(ng-Route 기본 라우팅), ui-router(라우팅 구성 요소)
  • 7, Ajax 캡슐화($http)

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

Vue

vue.js 공식 웹사이트: 사용자 인터페이스 구축을 위한 프로그레시브 프레임워크 세트입니다. 다른 헤비급 프레임워크와 달리 Vue는 상향식 증분 개발 설계를 채택합니다. Vue의 핵심 라이브러리는 뷰 레이어에만 중점을 두고 있으며 다른 라이브러리나 기존 프로젝트와 배우고 통합하기가 매우 쉽습니다. 반면 Vue는 Single File ComponentsVue Ecosystem Supported Libraries로 개발된 복잡한 단일 페이지 애플리케이션을 완벽하게 지원할 수 있습니다. Vue.js의 목표는 가능한 가장 간단한 API를 통해

반응형 데이터 바인딩

결합된 뷰 구성 요소를 구현하는 것입니다.

(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입니다. Angular에 비해 25.11kb에 불과합니다. 라우팅 플러그인(Vue-router), Ajax 플러그인(vue-resource, axios) 등과 유사한 필수 라이브러리 플러그인을 사용하여 직접 사용하세요.

양방향 데이터 바인딩의 원리 Vue와 Angular 사이###

angular.js

: dirty value checkangular.js는 더티 값 감지를 사용하여 데이터가 변경되었는지 비교하여 뷰를 업데이트할지 여부를 결정합니다. setInterval()을 통해 정기적으로 데이터 변경을 감지합니다. 물론 Google은 지정된 이벤트에서만 데이터 변경을 감지할 수 있습니다. 대략 다음과 같이 더티 값 감지를 입력합니다. 사용자가 텍스트를 입력하거나 버튼을 클릭하는 등의 작업을 수행합니다. (ng-클릭)

XHR 응답 이벤트($http)

    브라우저 위치 변경 이벤트($location)
  • 타이머 이벤트($timeout, $interval)
  • $digest() 또는 $apply() 실행
  • vue
  • :
  • 데이터 하이재킹

vue.js는 게시자-구독자 모델과 결합된 데이터 하이재킹을 사용하여 Object.defineProperty()를 통해 각 속성의 setter 및 getter를 하이재킹하고 데이터가 변경되면 메시지를 게시합니다. , 해당 청취 콜백을 트리거합니다. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/definePropertydefineProperty코드는 바로 아래에 있습니다

첫 번째는 물론 Hello World

vue

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

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

Angular입니다.

<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는 dom과 데이터를 작성하기 위해 json 데이터 형식을 사용합니다. 작성 스타일은 이해하기 쉬운 js 데이터 인코딩 형식에 더 가깝습니다.

vue의 양방향 데이터 바인딩

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

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

Angular의 ​​양방향 데이터 바인딩

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

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

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

(1) 이벤트 클릭

fb18926a59749a682e51d2201c2ba6895db79b134e9f6b82c0b36e0489ee08ed

简写方式:
8159299ceddef3bf00d03ef9f56ad0db5db79b134e9f6b82c0b36e0489ee08ed

  • (2)属性

    f1d426d3654278992adc280d87d5593a5db79b134e9f6b82c0b36e0489ee08ed

    简写方式:
    7e02c3b846c23f3f09a33678d01021f05db79b134e9f6b82c0b36e0489ee08ed

  • vue.渲染列表

    <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; }
        ]
      }
    })

    Angularjs渲染列表

    <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; }
        ]
    });

    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-src="{{news.img}}" />
            <div class="item-info">
                <h3 class="item-title">{{news.title}}</h3>
                <p class="item-time">{{news.createTime}}</p>
            </div>
        </a>
    </div>

    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;)
        }
    });

    相关推荐:《vue.js教程

    위 내용은 Anglejs와 vuejs의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

    성명:
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.