違い: 1. Angularjs は始めるのが難しいですが、vuejs はシンプルで習得が簡単です; 2. Angular の命令は「ng-xxx」ですが、vue は「v-xxx」です; 3. angular のすべての命令とメソッドは $scope にバインドされ、vue のすべてのメソッドと命令は vue インスタンスにバインドされます。
このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。
以前のプロジェクトはすべて Angularjs を使用していました (この記事では主に Angularjs 1 について説明していることに注意してください)。 Vue.js の簡単な比較メモ。
まず最初に、理論的にそれぞれの特徴について簡単に説明し、それからいくつかの小さな例を使用してそれらを説明しましょう。
双方向データ バインディングの実装では、$scope.$watch (ビューからモデル)、$scope.$apply (モデルからビュー) 検出、内部を使用した $scope 変数のダーティ値検出が使用されます。すべての呼び出しはダイジェストです。もちろん、ダーティ チェックのために $scope.$digest を直接呼び出すこともできます。データが頻繁に変更される場合、ダーティ検出はブラウザのパフォーマンスを大量に消費することに注意してください。公式の最大ダーティ検出値は 2000 データです。
vue.js 公式 Web サイト: ユーザー インターフェイスを構築するための 進歩的なフレームワークです。他の重量級フレームワークとは異なり、Vue はボトムアップの増分開発設計を採用しています。 Vue のコア ライブラリはビュー レイヤーのみに焦点を当てており、学習や他のライブラリや既存のプロジェクトとの統合が非常に簡単です。一方、Vue は、単一ファイル コンポーネント と Vue エコシステムでサポートされるライブラリ を使用して開発された複雑な単一ページ アプリケーションを駆動する能力を十分に備えています。 Vue.js の目標は、可能な限りシンプルな API を介して
レスポンシブ データ バインディングと 合成ビュー コンポーネントを実装することです。
(1) モジュール化 現在、最も注目されている方法は、ES6 モジュール化をプロジェクト内で直接使用し、それを Webpack と組み合わせてプロジェクトをパッケージ化することです。テンプレート (html コード)、スクリプト (es6 コード)、スタイル (css スタイル) を含む、コンポーネント サフィックス .vue を持つ単一のファイルangular.js はダーティ値検出を通じてデータを比較します変更があった場合にビューを更新するかどうかを決定する最も簡単な方法は、setInterval() を使用して定期的にポーリングしてデータ変更を検出することです。 Google はそれほど遅くはありません。Angular は、指定されたイベント (ユーザー入力テキスト、ボタンのクリックなど)
DOM イベントがトリガーされたときにのみダーティ値検出を開始します。 (ng-click)
データ ハイジャック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!'
}
})<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 と angularjs の違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
