ホームページ > 記事 > ウェブフロントエンド > vuejs と angularjs の違いは何ですか
vuejs と angularjs の違いは何ですか
- 青灯夜游オリジナル
- 2021-10-26 16:31:332625ブラウズ
違い: 1. Angularjs は始めるのが難しいですが、vuejs はシンプルで習得が簡単です; 2. Angular の命令は「ng-xxx」ですが、vue は「v-xxx」です; 3. angular のすべての命令とメソッドは $scope にバインドされ、vue のすべてのメソッドと命令は vue インスタンスにバインドされます。
このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、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, サービス Service($compile $フィルター $interval $timeout $http...)
- 6、ルーティング (ng-Route ネイティブ ルーティング)、ui-router (ルーティング コンポーネント)
- 7、Ajax カプセル化 ($http)
双方向データ バインディングの実装では、$scope.$watch (ビューからモデル)、$scope.$apply (モデルからビュー) 検出、内部を使用した $scope 変数のダーティ値検出が使用されます。すべての呼び出しはダイジェストです。もちろん、ダーティ チェックのために $scope.$digest を直接呼び出すこともできます。データが頻繁に変更される場合、ダーティ検出はブラウザのパフォーマンスを大量に消費することに注意してください。公式の最大ダーティ検出値は 2000 データです。
Vue
vue.js 公式 Web サイト: ユーザー インターフェイスを構築するための 進歩的なフレームワークです。他の重量級フレームワークとは異なり、Vue はボトムアップの増分開発設計を採用しています。 Vue のコア ライブラリはビュー レイヤーのみに焦点を当てており、学習や他のライブラリや既存のプロジェクトとの統合が非常に簡単です。一方、Vue は、単一ファイル コンポーネント と Vue エコシステムでサポートされるライブラリ を使用して開発された複雑な単一ページ アプリケーションを駆動する能力を十分に備えています。 Vue.js の目標は、可能な限りシンプルな API を介して
レスポンシブ データ バインディングと 合成ビュー コンポーネントを実装することです。
(1) モジュール化 現在、最も注目されている方法は、ES6 モジュール化をプロジェクト内で直接使用し、それを Webpack と組み合わせてプロジェクトをパッケージ化することです。テンプレート (html コード)、スクリプト (es6 コード)、スタイル (css スタイル) を含む、コンポーネント サフィックス .vue を持つ単一のファイル- (3) 双方向データ バインディング: インターフェイスの操作を反映できます。リアルタイムでデータを変更し、変更をリアルタイムでインターフェースに表示できます。
- (4) コマンド (v-html v-bind v-model v-if/v-show...)
- (5) ルーティング (vue-router)
- (6) vuex データ共有
- (7) Ajax プラグイン (vue-resource、axios)
- vue は非常に小さく、圧縮後の最小ソース コードは 72.9 gzip圧縮後 kb Angularに比べて144kbの25.11kbしかありません ルーティングプラグイン(Vue-router)、Ajaxプラグイン(vue)など必要なライブラリプラグインを組み合わせてご自身でご利用いただけます-resource、axios) など。
angular.js: ダーティ値チェック
angular.js はダーティ値検出を通じてデータを比較します変更があった場合にビューを更新するかどうかを決定する最も簡単な方法は、setInterval() を使用して定期的にポーリングしてデータ変更を検出することです。 Google はそれほど遅くはありません。Angular は、指定されたイベント (ユーザー入力テキスト、ボタンのクリックなど)
DOM イベントがトリガーされたときにのみダーティ値検出を開始します。 (ng-click)
- XHR 応答イベント ($http)
- ブラウザ位置変更イベント ($location)
- タイマー イベント ($timeout, $interval)
- $digest() または $apply() を実行します
- vue
データ ハイジャックvue.js がデータを使用していますハイジャックとパブリッシャー/サブスクライバー モデルを組み合わせた Object.defineProperty() は、各プロパティのセッターとゲッターをハイジャックし、データが変更されたときにサブスクライバーにメッセージをパブリッシュし、対応するリスニング コールバックをトリガーするために使用されます。 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!'
}
})Angular<div ng-app="myApp" ng-controller="myCtrl">
{{message}}
</div>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.message = "Hello world";
});
これに対して、vue は json データ形式を使用して dom とデータを書き込み、書き込みスタイルは js データ エンコーディングに基づいています。形式で分かりやすいです。 Vue の双方向データ バインディング<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!";
});
vue は軽量のフレームワークですが、次のような多くの API を提供します。一部の便利な命令と属性操作では、一般に、angularjs 命令が (ng-) を使用するのに対し、Vue 命令は (v-) 演算子を使用します。その中で、vue.js は命令の省略形もサポートしています:
(1) イベントクリック-
(2)属性
f1d426d3654278992adc280d87d5593a5db79b134e9f6b82c0b36e0489ee08ed简写方式：
7e02c3b846c23f3f09a33678d01021f05db79b134e9f6b82c0b36e0489ee08ed
fb18926a59749a682e51d2201c2ba6895db79b134e9f6b82c0b36e0489ee08ed
简写方式：8159299ceddef3bf00d03ef9f56ad0db5db79b134e9f6b82c0b36e0489ee08ed
vue.渲染列表
<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' }
]
}
})Angularjs渲染列表
<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' }
]
});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: '#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 と angularjs の違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。