ホームページ > 記事 > ウェブフロントエンド > angularjs と vuejs の違いは何ですか
angularjs と vuejs の違いは何ですか
- 青灯夜游オリジナル
- 2021-09-24 16:05:081384ブラウズ
違い: 1. Angularjs は「ダーティ値検出」を使用してデータが変更されたかどうかを比較し、双方向のデータ バインディングを実現しますが、vue は「データ ハイジャック」と「パブリッシャー/サブスクライバー モード」を組み合わせた方法を使用して、双方向のデータ バインディングを実現します。双方向のデータバインディング。 2. vue 命令は「v-」演算子を使用し、angularjs 命令は「ng-」を使用します。
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)
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 ですWorld
vue
<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 を提供します。一般に、(ng-) を使用する angularjs 命令と比較して、Vue 命令は (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: '#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('')
}
});相关推荐：《vue.js教程》
以上がangularjs と vuejs の違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。