Vue.jsの基本 （JavaScriptでいいんじゃないの？に対する回答）

Vueとは何か？

今月からVueの勉強を始めたばかりの私ですが、

Vue.js はインタラクティブな Web インターフェイスを作るためのライブラリです。
https://012-jp.vuejs.org/guide/

インタラクティブな・・・と言われてもピンと来ませんが、「双方向データバインディング」というものを可能にします。

データに変更を加えると、見た目のUIも変更する。逆も然り。という事ですが、詳しく順序だって見ていきましょう。

Vue.jsを設定する

HTML, CSS JSファイルを作り、HTML内のスクリプトタグは下記の順番で記述します。

1. Vueのスクリプト　https://vuejs.org/
2. JavaScriptのスクリプト

用意が出来たら、実際の定義の仕方を見ていきます。

• HTML
  • UIの領域を定義。

HTML

<div id="app"></div>

• JS
  • UIに結びつくモデルを変数で定義。

JS

var vm = new Vue({
  el: '#app',
  data: {
    name: '〇〇'
  }
})

どの領域と結びつけるのか、エレメント（el）を指定して設定します。ちなみに、既存のDOM要素を新たに作ったVue.jsのDOM要素で置き換えする＝＝＝マウントする。といいます。

その後、データをオブジェクトで指定します。

• HTML
  • データをUIへ反映。{{ }}を使います。

HTML

<div id="app">{{ name }}</div>

• HTML
  • UIの変更をデータへ。HTMLに対して追加する、独自の属性であるディレクティブを用います。今回は双方向データバインディングを実現するv-modelを使用します。こうする事で、inputにタイプした文字そのままにUIの見た目の文字nameも変える事が出来ます。

HTML

<input type="text" v-model="name">

まとめ・参考文献

Vue.jsとは、JavaScriptで書くと長くなってしまうコードを、短く視覚的にすっきり書く事が出来るフレームワークです。独自ディレクティブなど最初はとっつきにくいですが、徐々にレパートリーを増やしていければより短いコードで表現出来るようになります。
この記事が、私のようなVue.jsの勉強を始めたばかりの方の助けとなれば幸いです。

参考文献：
Vue.js入門　基礎から実践アプリケーション開発まで