近年では様々なjavascriptフレームワークが登場していますが、今回はその中でも人気のある「Vue.js」について、導入部分と基本的な構文の例をいくつか挙げていきたいと思います。Vue.jsは主にフロントエンドのUIを構築する時に使われ、PWAなどで推奨されているSPA（シングルページアプリケーション）の構成でサイトを構築する時に便利だそうです。  

Vue.jsを使うための準備

Vue.jsは基本的にライブラリとなるソースコードを読み込むことですぐに使えるようになります。CLIを使ってコンパイルする方式もありますがこちらについては後日まとめていきたいと思います。   下記のコードでスクリプトファイルを読み込みます。ファイルをダウンロードしてプロジェクトに含めるか、CDNで利用していきます。

<script src="./PATH/vue.js"></script>

// CDNで利用する場合
<!-- 開発バージョン -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 本番バージョン -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

   

Vue.jsの基本となる構文例

Vue.jsのスクリプトファイルを読み込めばVue.jsで使われている書き方でコーディングすることが可能です。様々な便利機能があるのですが、今回は基本的なところに焦点を当ててメモしていきたいと思います。   1. データをバインドしてレンダリングする javascript内でデータとして設定された値をHTMLに出力する例です。もっとも基本的な形になります。

// HTML
<div id="app_01">
  {{ message }}
</div>

// JS
var app_01 = new Vue({
  el: '#app_01',
  data: {
    message: 'Hello World!!'
  }
})

// 出力結果
<div id="app_01">Hello World!!
</div>

    2. 条件分岐を使った出力 値を出力する時に条件を設定することも可能です、ここでは値を切り替えることで出力を変えることができます。

// HTML
<div id="app_02" v-if="boolean">値がtrueの場合に内容が表示されます
</div>

// JS
var app_02 = new Vue({
  el: '#app_02',
  data: {
    boolean: false
  }
})

// 出力結果
<!-- 出力されません -->

    3. 配列の値で繰り返す 配列の値から要素を繰り返して表示させることも可能です。

// HTML
<ul id="app_03">
  <li v-for="loop in lists">
    {{ loop.list }}
  </li>
</ul>

// JS
var app_03 = new Vue({
  el: '#app_03',
  data: {
    lists: [
      { list: '項目1' },
      { list: '項目2' },
      { list: '項目3' }
    ]
  }
})

// 出力結果
<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

    4. イベントハンドラの追加 イベントを設定し、関数を実行することも可能です。

// HTML
<div id="app_04">
  <p>{{ message }}
  </p>
  <button v-on:click="changeMessage">Click!!</button>
</div>

// JS
var app_04 = new Vue({
  el: '#app_04',
  data: {
    message: 'Hello World!!'
  },
  methods: {
    changeMessage: function() {
      this.message = 'This message has changed.'
    }
  }
})

    5. コンポーネントの定義とインクルード 要素をコンポーネントと定義して、テンプレートとして呼び出します。コンポーネントはグローバルとローカルで分けられており、ローカルの場合は指定されたインスタンスの中でのみ使うことができます。

// HTML
<div id="app_05">
  <component-global>
  </component-global>
</div>
<div id="app_06">
  <component-global>
  </component-global>
  <component-local>
  </component-local>
</div>

// JS
Vue.component('component-global', {
  template: '<div>グローバルを対象としたコンポーネント</div>'
})
var localComp = {
  template: '<div>ローカルを対象としたコンポーネント</div>'
}
var app_component_01 = new Vue({
  el: '#app_05'
})
var app_component_02 = new Vue({
  el: '#app_06',
  components: {
    'component-local': localComp
  }
})

// 出力結果
<div id="app_05">
  <div>グローバルを対象としたコンポーネント</div>
</div>
<div id="app_06">
  <div>グローバルを対象としたコンポーネント</div>
  <div>ローカルを対象としたコンポーネント</div>
</div>

    今回はVue.jsの基本的なところのみをまとめていきましたが、次回はVue.jsで使える便利な機能やメリットを活かした使用例なども紹介していきたいと思います。   （参考にさせて頂いたサイト） Vue.js はじめに