ホームページ > 記事 > ウェブフロントエンド > AngularjsとVue.jsを使用した比較

AngularjsとVue.jsを使用した比較

不言オリジナル: 2018-04-10 10:59:191612ブラウズ

この記事の内容は、Angularjs と Vue.js の使用の比較に関するものです。必要な友達はそれを参考にしてください。

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...)

Vue
進歩的なフレームワーク
のセットです。他の重量級フレームワークとは異なり、Vue はボトムアップの増分開発設計を採用しています。 Vue のコアライブラリはビューレイヤーのみに焦点を当てており、学習や他のライブラリや既存のプロジェクトとの統合が非常に簡単です。一方、Vue は、
単一ファイルコンポーネント
Vue エコシステムでサポートされるライブラリ
を使用して開発された複雑なシングルページアプリケーションを強化することができます。
レスポンシブデータバインディング
と
合成ビューコンポーネント

(1) モジュール化。現在、最もホットな方法は、プロジェクトで ES6 モジュール化を直接使用し、それをプロジェクトのパッケージ化に Webpack と組み合わせることです。

(2) コンポーネント化、接尾辞 . vue 、テンプレート (html コード)、スクリプト (es6 コード)、スタイル (css スタイル) を含む (3) 双方向データバインディング: インターフェイスの操作をリアルタイムでデータに反映でき、データの変化をリアルタイムでインターフェースに表示できます。

(4) コマンド (v-html v-bind v-model v-if/v-show...) (5) ルーティング (vue-router)

(6) vuexデータ共有
(7) Ajaxプラグイン(vue-resource、axios)

vue は非常に小さく、圧縮後の最小ソースコードは 25.11 kb で、必要なライブラリプラグインを使用して自分で使用できます。ルーティングプラグイン (Vue-router) や Ajax プラグイン (vue -resource、axios) など

Vue と Angular 間の双方向データバインディングの原則

angular.js: ダーティ値check

angular.js はダーティ値検出を使用して、ビューを更新するかどうかを判断します。最も簡単な方法は、setInterval() を通じてデータ変更を検出するために定期的にポーリングすることです。 Angular は、指定されたイベントがトリガーされた場合にのみダーティ値検出を開始します。これは、おおよそ次のとおりです:

DOM イベント、たとえば、ユーザーがテキストを入力したり、ボタンをクリックしたりするなど。 (ng-click)
) または $apply()
vue
データハイジャック
コードはすぐ下にあります

vue

<p id="app">
  {{ message }}
</p>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

Angular <p ng-app="myApp" ng-controller="myCtrl"> {{message}} </p> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.message = "Hello world"; });
それに比べて、Vue は json データ形式を使用して dom とデータを記述します。記述スタイルは、理解しやすい js データエンコード形式に基づいています。

Vue の双方向データバインディング

<p id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</p>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

Angular の双方向データバインディング

<p ng-app="myApp" ng-controller="myCtrl">
  <p>{{message}}</p>
  <input ng-model="message">
</p>

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.message = "Hello world!";
});

Vue は軽量のフレームワークですが、いくつかの便利な命令や属性操作を含む多くの API を提供します。ディレクティブ (ng-) を使用する angularjs ディレクティブと比較して、(v-) 演算子を使用します。その中で、vue.js は命令の省略形もサポートしています:

(1) イベント click

<a v-on: click="fn"></a>

略語:
< ;/a>

(2)属性

<a v-bind: href="url"></a>

略語:
<a :href="url"></a>

vue.渲染列表

<p id="app">
  <ul>
    <li v-for="name in names">
      {{ name.first }}
    </li>
  </ul>
</p>

new Vue({
  el: '#app',
  data: {
    names: [
      { first: 'summer', last: '7310' },
      { first: 'David', last:'666' },
      { first: 'Json', last:'888' }
    ]
  }
})

Angularjs渲染列表

<p ng-app="myApp" ng-controller="myCtrl">
  <li ng-repeat="name in names">{{name.first}}</li>
</p>

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的渲染差不多

<p class="item" ng-repeat="news in  newsList">
    <a ng-href="#/content/{{news.id}}">
        <img ng-src="{{news.img}}" />
        <p class="item-info">
            <h3 class="item-title">{{news.title}}</h3>
            <p class="item-time">{{news.createTime}}</p>
        </p>
    </a>
</p>

vue和Angular处理用户输入

<p id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</p>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

<p ng-app="myApp" ng-controller="myCtrl">
 <p>{{ message }}</p>
 <button ng-click="reverseMessage()">Reverse Message</button>
</p>

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.message = "Hello world!";
    $scope.reverseMessage = function() {
        this.message = this.message.split('').reverse().join('')
    }
});