angularjs と Vue の違いは何ですか? angularjs と Vue の比較の詳細

この記事では、angularjs と vuejs の違いを主に紹介し、angularjs と vue.js の位置合わせの詳細についても説明し、誰でも読みやすいように多くの例も示しています。この記事を一緒に読みましょう。

まず、angularjs と Vue の違いを見てみましょう:

1. vueJS はシンプルで習得が簡単ですが、angularJS は View レイヤーに重点を置いています。 angularJS の機能はより包括的ですが、もちろんサイズも大きく、vue ほど便利ではありません

2. angularJS の命令はすべて ng-xxx ですが、vueJS の命令はすべて v-xxx です。 ;

3. angularJS のすべての命令とメソッド これらはすべて $scope にバインドされており、vueJS はすべてこのインスタンス上にあります。ただし、存在できるのは 1 つのみです。 1 つの angularJS オブジェクト;

4. angularJS は Google によって開発および保守され、vueJS は一般的にモバイル開発に使用されますが、angularJS は一般的に大規模なプロジェクトで使用されます

5. それでは話しましょう。 angularjs と Vue について 比較の詳細:

6. 以前のプロジェクトはすべて Angularjs を使用していました (これは主に Angularjs 1 に関するものであることに注意してください) Vue.js を初めて使用した後、短い比較メモを作成します。

まず最初に、理論的にそれぞれの特徴について簡単に説明し、それからいくつかの小さな例を使用してそれらを説明しましょう。 (angularjs について詳しく知りたい場合は、PHP 中国語 Web サイト

のコラムを参照してください)

1.MVVM (Model) (View) (View-model) 2. モジュールコントローラー (Contoller) の依存性注入:

3. 双方向データバインディング: インターフェースの操作をリアルタイムにデータに反映でき、データの変更をインターフェースにリアルタイムに表示できます。時間。 4. 手順 (ng-click ng-model ng-href ng-src ng-if...)

5. サービス ($compile $filter $interval $timeout $http...)

データ バインディングの実装では、$scope.$watch (ビューからモデル)、$scope.$apply (モデルからビュー) の検出を使用して、$scope 変数のダーティ値検出を使用します。もちろん、内部呼び出しはダイジェストで行うことができます。ダーティ チェックのために $scope.$digest を直接呼び出すこともできます。データが頻繁に変更される場合、ダーティ検出によりブラウザのパフォーマンスが大幅に消費されることに注意してください。公式の最大ダーティ検出値は 2000 データです。

vue.js 公式 Web サイト: ユーザー インターフェイスを構築するための進歩的なフレームワークです。他の重量級フレームワークとは異なり、Vue はボトムアップの増分開発設計を採用しています。 Vue のコア ライブラリはビュー レイヤーのみに焦点を当てており、学習や他のライブラリや既存のプロジェクトとの統合が非常に簡単です。一方、Vue は、Vue エコシステムによってサポートされる単一ファイル コンポーネントとライブラリを使用して開発された複雑な単一ページ アプリケーションを実行する能力を十分に備えています。

Vue.js の目標は、可能な限りシンプルな API を介してレスポンシブなデータ バインディングと合成ビュー コンポーネントを実装することです。

モジュール化、現在最もホットな方法は、プロジェクトで ES6 モジュール化を直接使用し、プロジェクトのパッケージ化に Webpack と組み合わせることです。コンポーネント化、テンプレート (HTML コード)、スクリプト (es6コード)、スタイル (CSS スタイル)

ルーティング、

vue は非常に小さく、最小ソース コードは圧縮後 72.9 kb、gzip 圧縮後はわずか 25.11 kb で、Angular と比較すると 144 kb です。自分で使用できます。必要なライブラリ プラグイン、同様のルーティング プラグイン (Vue-router)、Ajax プラグイン (vue-resource) などを使用します。

コードはそのすぐ下にあります

最初はもちろん Hello World です

<div id="app">
  {{ message }}
</div>
 new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;Hello Vue.js!&#39;
  }
})

<div ng-app="myApp" ng-controller="myCtrl">
 {{message}}
</div>
var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope) {
    $scope.message = "Hello world";
});

それに比べて、Vue は json データ形式を使用して dom と data を記述し、記述スタイルは理解しやすい js データ エンコード形式に基づいています。

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>
new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;Hello Vue.js!&#39;
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
    }
  }
})

<div ng-app="myApp" ng-controller="myCtrl">
 <p>{{ message }}</p>
 <button ng-click="reverseMessage()">Reverse Message</button>
</div>
var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope) {
    $scope.message = "Hello world!";
    $scope.reverseMessage = function() {
        this.message = this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
    }
});

Angularjs レンダリング リスト

<div id="app">
  <ul>
    <li v-for="name in names">
      {{ name.first }}
    </li>
  </ul>
</div>
new Vue({
  el: &#39;#app&#39;,
  data: {
    names: [
      { first: &#39;summer&#39;, last: &#39;7310&#39; },
      { first: &#39;David&#39;, last:&#39;666&#39; },
      { first: &#39;Json&#39;, last:&#39;888&#39; }
    ]
  }
})

angular と vue のレンダリングは似ています。 それでは、angularjs と Vue の違いと比較に関するこの記事は終わりです (PHP 中国語 Web サイトの

列で学ぶことをお勧めします)。ご質問がございましたら、以下にメッセージを残してください。 【編集者のおすすめ】

node.jsは2018年も人気を維持できるのか？ Node.jsの扱いを見てみましょう

以上がangularjs と Vue の違いは何ですか? angularjs と Vue の比較の詳細の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。