차이점: 1. Angularjs는 "더티 값 감지"를 사용하여 데이터가 변경되었는지 비교하여 양방향 데이터 바인딩을 달성하는 반면 Vue는 "게시자-구독자 모델"과 결합된 "데이터 하이재킹"을 사용하여 양방향 데이터 바인딩을 달성합니다. . 2. vue 명령어는 "v-" 연산자를 사용하고, anglejs 명령어는 "ng-"를 사용합니다.
이 튜토리얼의 운영 환경: windows7 시스템, vue2.9.6&&Angular9 버전, DELL G3 컴퓨터.
이전 프로젝트는 모두 Angularjs를 사용했습니다. (이 글에서는 주로 Angularjs를 다루니 주의하세요. 1) Vue.js를 처음 사용한 후 간단한 비교 노트를 작성해 보세요.
우선 각각의 특성을 이론적으로 간략하게 설명하고 몇 가지 작은 예를 들어 설명하겠습니다.
양방향 데이터 바인딩 구현에서는 더티 $scope 변수를 사용합니다. 값 감지를 위해 $scope.$watch(모델 보기) 및 $scope.$apply(모델 보기)를 사용하여 감지합니다. 물론 Digest 검사를 위해 $scope.$digest를 직접 호출할 수도 있습니다. . 데이터가 매우 자주 변경되는 경우 더티 감지는 많은 브라우저 성능을 소모한다는 점에 주목할 가치가 있습니다. 공식 최대 더티 감지 값은 2000개 데이터입니다.
vue.js 공식 웹사이트: 사용자 인터페이스 구축을 위한 프로그레시브 프레임워크 세트입니다. 다른 헤비급 프레임워크와 달리 Vue는 상향식 증분 개발 설계를 채택합니다. Vue의 핵심 라이브러리는 뷰 레이어에만 중점을 두고 있으며 다른 라이브러리나 기존 프로젝트와 배우고 통합하기가 매우 쉽습니다. 반면 Vue는 Single File Components 및 Vue Ecosystem Supported Libraries로 개발된 복잡한 단일 페이지 애플리케이션을 완벽하게 지원할 수 있습니다. Vue.js의 목표는 가능한 가장 간단한 API를 통해
반응형 데이터 바인딩및 결합된 뷰 구성 요소를 구현하는 것입니다.
(1) 모듈화. 현재 가장 인기 있는 방법은 프로젝트에서 직접 ES6 모듈화를 사용하고 이를 프로젝트 패키징을 위해 Webpack과 결합하는 것입니다.양방향 데이터 바인딩의 원리 Vue와 Angular 사이###
angular.js: dirty value checkangular.js는 더티 값 감지를 사용하여 데이터가 변경되었는지 비교하여 뷰를 업데이트할지 여부를 결정합니다. setInterval()을 통해 정기적으로 데이터 변경을 감지합니다. 물론 Google은 지정된 이벤트에서만 데이터 변경을 감지할 수 있습니다. 대략 다음과 같이 더티 값 감지를 입력합니다. 사용자가 텍스트를 입력하거나 버튼을 클릭하는 등의 작업을 수행합니다. (ng-클릭)
XHR 응답 이벤트($http)
vue.js는 게시자-구독자 모델과 결합된 데이터 하이재킹을 사용하여 Object.defineProperty()를 통해 각 속성의 setter 및 getter를 하이재킹하고 데이터가 변경되면 메시지를 게시합니다. , 해당 청취 콜백을 트리거합니다. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/definePropertydefineProperty코드는 바로 아래에 있습니다
첫 번째는 물론 Hello Worldvue
<div id="app">
{{ message }}
</div>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})<div ng-app="myApp" ng-controller="myCtrl">
{{message}}
</div>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.message = "Hello world";
});<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})Angular의 양방향 데이터 바인딩
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{message}}</p>
<input ng-model="message">
</div>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.message = "Hello world!";
});(1) 이벤트 클릭
<a v-on: click="fn"></a>
简写方式：<a @click="fn"></a>
(2)属性
<a v-bind: href="url"></a>
简写方式：<a :href="url"></a>
<div id="app">
<ul>
<li v-for="name in names">
{{ name.first }}
</li>
</ul>
</div>
new Vue({
el: '#app',
data: {
names: [
{ first: 'summer', last: '7310' },
{ first: 'David', last:'666' },
{ first: 'Json', last:'888' }
]
}
})<div ng-app="myApp" ng-controller="myCtrl">
<li ng-repeat="name in names">{{name.first}}</li>
</div>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = [
{ first: 'summer', last: '7310' },
{ first: 'David', last:'666' },
{ first: 'Json', last:'888' }
]
});<ul>
<li v-for="item in list">
<a :href="item.url">{{item.title}}</a>
</li>
</ul><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><div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ message }}</p>
<button ng-click="reverseMessage()">Reverse Message</button>
</div>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.message = "Hello world!";
$scope.reverseMessage = function() {
this.message = this.message.split('').reverse().join('')
}
});相关推荐：《vue.js教程》
위 내용은 Anglejs와 vuejs의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
