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

AngularJSよりもお手軽!Vue.jsで超簡単データバインディング

More than 5 years have passed since last update.

Vue.jsとは

Vue.js is a library for building interactive web interfaces.
It provides data-driven components with a simple and flexible API.

vue.js

フォームの操作に合わせてJS側のデータを操作する。JS側のデータ操作の結果をHTMLのあちこちに反映させる。

Vue.jsはこの手の頻発する処理……いわゆるデータバインディングをとても簡単に出来るようにしてくれる。

ざっくり言うと、KnockoutとかAngularJSをよりシンプルにした感じ。

Vue.jsの利点

  • シンプルなAPIでデータバインディングが実現出来る
  • 学習コストがとても少ない
  • 覚えた所から部分的に使うことが可能
  • 他のプラグインと組み合わせが容易
  • 古いIEを捨てた代わりにシンプルになってる

古いIEを捨ててAPIを捨てた上に、データバインディング以上のことをしていないのが、シンプルさに繋ってると思う。

Vue.jsの欠点

  • (特に日本語の)情報がまだまだ少ない
  • 古いIEに未対応
  • 何でもしてくれる訳ではない。(DIとかルーティングとか)

古いIEがうんぬんに関しては↓を参照

AngularJSで良くね?

既に使えるなら別に乗り換える必要はないかもしれない。

AngularJSはかなり幅広く面倒を見てくれるので、学習しきって身を任せるととても快適だと思う。AngularDartとかもあるみたいだし。

ただ、何でもしてくれる代わりに学習コスト高い。

Vue.jsはAngularJSのデータバインディング部分をうまいこと切り出した感じのライブラリなので、とてもシンプルでお手軽だし、何よりコスパのいいライブラリです。

AngularJSのディレクティブとかだけ使いたいなーって人や、これからAngularJSを使おうという人の最初の一歩としてやるのにもVue.jsは最適だと思う。

当然、シンプルな分だけAngularJSに出来てVue.jsで出来ないことも出てくるが、その段階でAngularJSに乗り換えてもいいし、他のライブラリと組み合わせで補ってもいい。

全ての面倒を見てくれる方がいい、という考えもあると思いますが、一つのライブラリであれこれやるよりも、機能の絞られたライブラリを適宜組み合わせる方が健全かなーとも思います。

参考リンク

英語が読めなくても、公式サイトを眺めれば何となく使えるようになる。
多いとは言えないものの、日本語の情報もちらほら増えてきた。

気に入った所

割と言い尽されてるけれど、シンプルなのが本当に良い。

データ部分がピュアなJSなのでとても扱いやすい。特にvue.$data.hogeとして外側から直接中身を変更しても、即座にHTML側に反映されるのは感激ですね。コンソールで直接変数を書き換えてHTMLも変わるのとか、感動しました。

また、Vue.js自体の役割も小さく限定的なので、ちょっとした部分に導入するのにも向いています。

某サイトでリンクをクリックすると表示と非表示を切り替える……という仕組みのために導入しましたが、CoffeeScript側は7行足しただけです。jQueryとかで直接やるよりずっとわかりやすいですね。

作ったもの

ie.png

Vue.js(とCreateJS)の練習のために作ってみた。公開時点でCoffeeScript側は100行。
色の選択や、文字の変更、そして何よりドット絵を描いた際などに、各種previewなどへの伝搬を勝手にやってくれていい感じ。

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