概要

Vue.jsを手軽に導入してみます。

方針は、

WebpackやNode.jsは使わない

ということで、単純なHTMLとJSだけでVue.jsをとりあえず使ってみましょう。

サンプルコード

まずは、サンプルコードです。

<!-- Vue.js(このサンプルではCDNを使用する) -->
<script src='https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js'></script>

<!-- x-templateでテンプレートを定義 -->
<script type='text/x-template' id='app-template'>
  <div>
    <p>sampleNumber: {{ sampleNumber }}</p>
    <p>sampleText: {{ sampleText }}</p>
    <p>sampleComputedNumber: {{ sampleComputedNumber }}</p>
  </div>
</script>

<!-- appのマウント先となるHTML要素 -->
<div id='app-mount-element'>
</div>

<!-- ロード時に実行されるscript -->
<script>
  // Vueインスタンスを生成する
  var app = new Vue({
    // テンプレート
    template: '#app-template',
    // データオブジェクト
    data: {
      sampleNumber: 100,
      sampleText: 'abc'
    },
    // 算出プロパティ
    computed: {
      sampleComputedNumber: function() {
        return (this.sampleNumber * 2);
      }
    }
  });

  // VueインスタンスをHTMLにマウントする
  app.$mount('#app-mount-element');
</script>

See the Pen NYZLgG by pale2f (@pale2f) on CodePen.

最初に知っておくべきこと

最初に、

Vue.jsのテンプレートは(専用の文法に従った)単純な文字列である

ということを理解しておく必要があります。

elオプションを使用すると、指定した要素の内容を置換してくれるので、HTMLに値をバインドしているかのようにみえますが、そうではないのです。

また、以下の制限にも要注意です。

DOM テンプレート解析の注意事項

上記のリンク先に記載されているとおり、HTML上でテンプレートを定義する場合、ブラウザがHTMLを解釈する方法に注意が必要です。

このサンプルコードでは、

x-templateでテンプレートを定義する

という手法で、上記の制限を回避しています。

詳しくは、以下のリンク先をご参照ください。

Vueインスタンスを意識する

Vueのコンストラクタ(new Vue(...))で指定するのは、Vueインスタンス生成のオプション

↑改めて文章にしてみたら当たり前すぎました。
しかし、Vue.jsの場合、この当たり前のことに混乱しがちです。

dataもcomputedも、Vueコンストラクタのオプションに過ぎない

ということを忘れないようにしましょう。

このサンプルコードでは、敢えて変数に代入する事でインスタンスを意識しやすくしています。

また、Vueインスタンスのマウント処理も敢えて明示的に書いています。

API - vm.$mount

最後に

Vue.jsは非常に便利なので色々なシーンで使いたいのですが、最近のフロントエンド界隈は、環境構築のハードルが(いろんな意味で)高いので、手軽に導入するためのサンプルを書いてみました。
これぐらいなら、jQueryぐらいの導入コストで、Vue.jsを使えるのではないかと思っています。

無論、Webpackなどが使える環境であれば、Vue.jsの魅力をもっと引き出せるのはいうまでもありませんが、この程度の使い方でも、Vue.jsは充分便利です。本当に隔世の感があります。