차이점: 1. Angularjs는 시작하기 어렵지만 vuejs는 간단하고 배우기 쉽습니다. 2. Angular의 지침은 "ng-xxx"이고 vue는 "v-xxx"입니다. 각도의 모든 메소드와 명령은 범위의 $에 바인딩되며 vue 인스턴스에 바인딩됩니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, 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과 결합하는 것입니다.angular.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!'
}
})<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!";
}); <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('')
}
});总结：angularjs和vuejs的区别
1、angularJS上手难，而vueJS简单易学；
2、angularJS的指令都是ng-xxx，而vueJS的指令都是v-xxx；
3、angularJS的所有指令和方法都是绑定在$scope上的，而vueJS是new出来一个实例，所有的方法和指令都在这个实例上，一个页面上可以有多个vue实例，但是angularJS的对象只能有一个；
4、angularJS是由google开发和维护的，vueJS是由个人维护的；
5、vueJS一般用于移动端的开发，而angularJS一般应用于大型的项目。
更多编程相关知识，请访问：编程学习！！
위 내용은 vuejs와 anglejs의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
