はじめてのフレームワーク　【Vue.js編】

アプリケーションの骨組みとなり基本的な機能やルールを提供する。
一般的にフレームワークのルールに沿って必要なコードを追加していくため、
少ないコードで効率的に作成することが可能。

UIを構築するためのJavaScriptフレームワーク。
Model、View、 ViewModel の3つでアプリケーションを構築する、MVVMと呼ばれる設計パターンを採用。
公式の拡張ライブラリ「Vue Router」を使用することで、SPA(SinglePageApplication)を構築可能。

データと描画を同期させる仕組み。
データに変更があれば即座に画面にも変更が反映され、画面に変更があればデータにも即座に変更が反映がされる。

• 「v-」から始まるVue.js独自の属性を「ディレクティブ」と呼ぶ
• ディレクティブの値はJavaScriptの単一の式
• ディレクティブは引数、オプションにより動作・役割が異なる
• 独自のディレクティブを作成することも可能（カスタム・ディレクティブ）

v-bind

タグ属性の値をVueインスタンス内で定義した変数で表現する際に使用

<div id="app">  
    <a v-bind:href='url'>中央コンピューターサービス（株） </a>
    <p>{{message}}</p>
</div>

new Vue({
  el: '#app',
  data: {
    url: 'https://www.ccs1981.jp/',
    message:'ようこそ！北海道へ'
  }
})

v-on

イベントのトリガーと呼び出す関数を定義する際に使用。

<div id='app'>
  <p>{{ message }}</p>
  <button v-on:click='reverse'>チェンジ</button>
</div>

new Vue({
  el: '#app',
  data: {
    message: '中央コンピューターサービス'
  },
  methods: {
    reverse: function(){
      this.message = this.message.split('').reverse().join('');
    }
  }
})

v-model

データとフォームの入力項目をバインド（双方向バインディング）

<p>{{message}}</p>
<input v-model="message">

new Vue({
  el: '#app',
  data: {
    message: '中央コンピューターサービス'
  }
})

試してみたい方はこちらから↓
公式サイト：Hello World example

UI部品ごとにテンプレートとJavaScriptを1つのセットにして、
他の機能とは切り離した開発・管理を可能とする仕組み。
「Vue.js」ではUIコンポーネントを組み合わせてページを作成することを前提としている。

• UI部品の「再利用」が容易。
• 1つの機能をメンテナンスする際に、複数のファイルの行き来を削減。
  （Node.jsを使用できる環境であれば、JavaScript、HTML、CSSをまとめて管理することが可能。（単一ファイルコンポーネント））

Node.jsがインストールされていること。
まだの方はこちらから「公式サイト：Node.js」

$ npm install -g @vue/cli

バージョンが表示されれば、Vue CLIが使用できます。

$ vue --version

プロジェクト作成を開始すると、対話形式でいくつかの設定を求められます。

$ vue create [プロジェクト名]

「default」 ： デフォルトを選択した場合、bableとeslineのライブラリが読み込まれます。
「Manually select features」 ： カスタムを選択した場合、読み込むライブラリを選択するメッセージが表示されます。
（まずは触ってみたいという場合は全て「Enter」で進めてもOKです。）

必要なライブラリを選択します。
その後、選択したライブラリごとに設定を求めるメッセージが表示されます。
（ここでは省略。）

インストールが完了すると、作成したプロジェクトのディレクトリへ移動しサーバーを立ち上げるようメッセージが表示されます。

$ npm run serve

http://localhost:8080/へアクセスし起動を確認します。
以下の画面が立ち上がれば完了です。