AngularJSからVue.jsに移行するガイド

勉強の為に転載しました。
https://qiita.com/hashrock/items/e31b36248f3011ff7853

hashrock

2014年10月07日に更新

4

 この記事は最終更新日から1年以上が経過しています。

最近話題のAngularJSですが、学習コストが辛いのが難点です。

チームでのWebアプリ開発に半年ほど利用していましたが、
「難しい」「辛い」「闇」という声が多かったので、
よりシンプルなVue.jsに移行することにしました。

http://vuejs.org/

Vue.jsはAngularのコードを一部利用して作成されており、多くの点で共通した書き
方が出来ます。
以下にご紹介します。

（カスタムDirective作るほど使い込んでいなかったので、あくまで初歩的なサンプル
となります。ご容赦ください）

AngularJSの基本形

基本的に、バインドする変数やメソッドを$scopeに生やす形になります。

var Ctrl(function($scope) {

  //バインドする変数宣言
  $scope.message = "Hello, World";

  //メソッド宣言
  $scope.method = function(){/* 処理 */};

  //初期化処理はここにベタ書き
  init();
  hoge();
  huga();
  $scope.method();

});

Vue.jsの基本形

基本的にJSONオブジェクトとして、バインディングする変数やメソッドを渡します。
$scopeに生やしていた変数は、data内に記述します。
また、バインド先の要素をelに指定します（そのためng-controllerやng-app相当の
ディレクティブがない）。

var app = new Vue({
  el: "#main",
  data: {
    message: "Hello, World"
  },
  methods: {
    method: function(){/* 処理 */}
  },
  ready: function(){
    //初期化処理はここに書く
    init();
    hoge();
    huga();
    this.method();
  }
});

Directive

多くの組み込みDirectiveがVueにも用意されており、
基本的に「ng-＊」を「v-＊」に置き換えてヘルプを参照すればいいです。

ng-ifはv-ifに、ng-viewはv-viewに、ng-modelはv-modelに置き換えられます。

例：ng-clickからv-onに置き換え

注意点として、ng-clickはv-onに置き換えられます。

Angular版

<button ng-click="someMethod()">Hey</button>

Vue版

<button v-on="click: someMethod()">Hey</button>

例：ng-repeatからv-repeatに置き換え

ほとんど同じです。ネストも問題なく可能です。

Angular版

<li ng-repeat="user in users">{{user.name}}</li>

Vue版

<li v-repeat="user : users">{{user.name}}</li>

$httpや$q

Vue.jsにはありません。jQueryや同等のライブラリで置き換える事になります。

$qは同等のライブラリ、qを使いましょう。
https://github.com/kriskowal/q

$http置き換えはjQueryのpost,getでもいいですが、superagentが薄くてお勧め
です。
https://github.com/visionmedia/superagent

AngularJS Batarangの代替は？

Vue.jsは、dataに指定したオブジェクトにgetter, setterを生やす仕様のため、
インスペクタで変数の内容を見ようとすると、getterとsetterだらけでひどいこと
になります。

Vue開発者のEvan YouさんがChromeエクステンションを作っていますので、利用
しましょう。

https://github.com/vuejs/vue-devtools

ーーー

Angularより優れたJavaScriptフレームワークとしての

Meteor（ミーティア）のご紹介はこちら