ホームページ > 記事 > ウェブフロントエンド > angularjs と vuejs の違いは何ですか
#このチュートリアルの動作環境: Windows7 システム、vue2.9.6&&Angular9 バージョン、DELL G3 コンピューター。違い: 1. Angularjs は「ダーティ値検出」を使用してデータが変更されたかどうかを比較し、双方向のデータ バインディングを実現しますが、vue は「データ ハイジャック」と「パブリッシャー/サブスクライバー モード」を組み合わせた方法を使用して、双方向のデータ バインディングを実現します。双方向のデータバインディング。 2. vue 命令は「v-」演算子を使用し、angularjs 命令は「ng-」を使用します。
まず最初に、理論的にそれぞれの特徴について簡単に説明し、それからいくつかの小さな例を使用してそれらを説明しましょう。
進歩的なフレームワークです。他の重量級フレームワークとは異なり、Vue はボトムアップの増分開発設計を採用しています。 Vue のコア ライブラリはビュー レイヤーのみに焦点を当てており、学習や他のライブラリや既存のプロジェクトとの統合が非常に簡単です。一方、Vue は、単一ファイル コンポーネント と Vue エコシステムでサポートされるライブラリ を使用して開発された複雑な単一ページ アプリケーションを駆動する能力を十分に備えています。 Vue.js の目標は、可能な限りシンプルな API を介して レスポンシブ データ バインディング
と合成ビュー コンポーネントを実装することです。 (1) モジュール化 現在、最も注目されている方法は、ES6 モジュール化をプロジェクト内で直接使用し、それを Webpack と組み合わせてプロジェクトをパッケージ化することです。テンプレート (html コード)、スクリプト (es6 コード)、スタイル (css スタイル) を含む、コンポーネント サフィックス .vue を持つ単一のファイル
angular .js:
ダーティ値チェックangular.js は、ダーティ値検出を使用して、データが変更されたかどうかを比較し、ビューを更新するかどうかを決定します。最も簡単な方法は、定期的にポーリングすることです。 setInterval() を介してデータ変更を検出します。もちろん、Google はそれほど遅くはありません。Angular は、指定されたイベントでのデータ変更のみを検出できます。トリガーされたときにダーティ値検出を入力します。おおよそ次のようになります:
DOMユーザーによるテキストの入力、ボタンのクリックなどのイベント。 (ng-click)XHR 応答イベント ($http)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"; });
<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
<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教程》
以上がangularjs と vuejs の違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。