最近話題のAngularJSですが、学習コストが辛いのが難点です。
チームでのWebアプリ開発に半年ほど利用していましたが、
「難しい」「辛い」「闇」という声が多かったので、
よりシンプルなVue.jsに移行することにしました。
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エクステンションを作っていますので、利用しましょう。