Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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

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

logo

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

参考資料

vue.js book
Vue.js概要? - Qiita
Vue.js note

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away