AnglarjsとVue.jsを使って比較します.

AnglarjsとVue.jsを使って比較します.
AnglarjsとVue.jsを使って比較します.
以前のプロジェクトはAnglarjsを使っていました.(ここでは主にAnglarjs 1と明記しています.)Vue.jsを初歩的に使ってから簡単な比較メモを作ります.まず理論的にそれぞれの特徴を簡単に説明してから、いくつかの小さな例で説明します.
アングラー
1,MVVM(Model)2,モジュール化コントローラ依存注入:3,双方向データバインディング:インターフェースの操作はリアルタイムでデータに反映され、データの変更はリアルタイムでインターフェースに表示されます.4,コマンド(ng-click ng-model ng-href ng-src-inf...)5,サービスService($comple$filter$interval$timeout$http...)双方向データバインディングの実装は、$scope変数の汚さ値検出を使用して、$scope.$watchを使用して、scope.$apply検出を行います.内部呼出はdigestです.もちろん、直接に呼び出してもいいです.注意すべきなのはデータの変化が非常に頻繁な時、汚れの検査はブラウザの性能の消耗に対してとても大きくて、公式に明記された最大の汚染値は2000のデータです.
Vue
vue.js公式サイト:ユーザーインタフェースを構築するセットです. インボリュートフレーム.他のヘビー級フレームとは違って、Vueはボトムアップで開発されたデザインを採用しています.Vueのコアライブラリはレイヤーだけを見て勉強しやすく、他のライブラリや既存のプロジェクトと統合しやすいです.一方、Vueは単一ファイルのコンポーネントと Vue生態系がサポートするライブラリ開発の複雑な単ページアプリケーション.
Vue.jsの目標は、できるだけ簡単なAPIを通じて応答のデータバインディングと組み合わせを実現するためのビューコンポーネントである.
(1)モジュール化、現在の最も暑い方式はプロジェクトで直接ES 6を使用するモジュール化であり、Webpackを結合してプロジェクト包装を行う.
(2)コンポーネント化、単一のcomponentを作成して.vueのファイルとして、template(htmlコード)、script(es 6コード)、style(cssスタイル)を含みます.
(3)ルーティング、vueは非常にコンパクトで、圧縮後のminのソースコードは72.9 kbで、gzipの圧縮後は25.1 kbしかなく、Anglarより144 kbとなりたいです.自車で必要なライブラリプラグインを使用できます.ルートプラグイン(Vue-router)、Ajaxプラグイン(vue-recure)などです.
下に直接コードを入れます.
まずもちろんハローワールドです.
vue

"app">
  {{ message }}


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

アングラー

"myApp" ng-controller="myCtrl">
 {{message}}


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

比較的に見ると、evueはjsonのデータフォーマットを採用してdomとdataの作成を行い、編纂スタイルは更にjsのデータコードフォーマットに頼っており、分かりやすいです.
vueの双方向データバインディング

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

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

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

"myApp" ng-controller="myCtrl">
  
{{message}}
  "message">


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

vueはライト級のフレームワークですが、提供されるAPIは確かに多く、いくつかの便利な命令と属性操作を含んでいます.一般的なvueはコマンド使用(v-)オペレータであり、anglarjsコマンド使用(ng-)に比べて.その中で、vue.jsはまたコマンドの書き方をサポートしています.
(1)イベントclick簡略方式:(2)属性略字方式:vue.レンダリングリスト

"app">
  

    
for="name in names">
      {{ name.first }}
    
  


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

Anglarjsレンダリングリスト

"myApp" ng-controller="myCtrl">
  
"name in names">{{name.first}}


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>

angglarと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とAnglarはユーザー入力を処理します.

"app">
  
{{ message }}
  "reverseMessage">Reverse Message


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

"myApp" ng-controller="myCtrl">
 
{{ message }}
 "reverseMessage()">Reverse Message


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