解 説

Vue.jsについて

Vue.jsはVue.js公式HPに次のように書かれています。

Vue (発音は / v j u ː / 、 view と同様)はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。

Vue.jsはおそらくAngularやRactよりももっと学習コストが低く、より簡単に便利に使うことができるview層に焦点をあてたフレームワークと言って良いでしょう。

Vue.jsの使い方

Vue.jsの読み込み

Vue.js公式HPインストールのページ
Vue.jsの読み込みには3つの方法があります。

  • CDN
  • ファイルをダウンロードして配置
  • NPMを利用

通常、学習するには1のCDNを使います。

Vue.jsインストールページの#CDNの項目にアドレスが書かれています。

body終了タグの直前にCDNのコードを貼り付けます。

Vue.jsの開発バージョンと本番バージョン

Vue.jsには開発バージョンと本番バージョンがあります。
開発バージョンには警告出力やデバッグモードがあります。
Vue.js公式HPインストールのページに別れてダウンロードできますので、それぞれ必要なバージョンをダウンロードします。

vue.jsファイルは開発バージョン、vue.min.jsが本番バージョンと考えれば良いです。

CDNの場合は最後のvue.jsをvue.min.jsに変更すれば良いです。

ここまでがVue.jsを使う準備になります。

Vueインスタンス作成

Vue インスタンスを生成するには、オプションオブジェクトを渡します。

Vue.jsのまず第一歩はインスタンスの作成から始まる。
var app = new Vue({
//この中にオプションを記述
})

Veuインスタンスを作成します。
これはVue関数をnew演算子でインスタンス化します。
オプションにはeldatamethodsがあります。

主な働きは次の様になります。

  • el:JavaScriptとHTMLを紐付ける記述
  • data:データの登録
  • methodes:関数を記述

インスタンス作成コード

ルートテンプレート作成

JavaScriptとHTMLを紐付ける方法です。

  1. HTML側にdivタグを用意してid名をつけます。
  2. JavaScript側でVueをインスタンス化します。

その際にJavaScriptとHTMLを紐付けるために次の記述をします。

Vue.jsでの紐付けは「el:’id名’」とする決まりです。
Reactではrender関数を使って紐付けを行いましたがVue.jsではこのようにします。

データのバインディング

Vue.jsはデータをリアクティブな状態にしてくれます。
* リアクティブとは値を変更すると表示されている値もリアルタイムに変更される仕組みのことです。

具体的にはマスタッシュ構文「{{}}」がポイントです。

マスタッシュとは口髭のことです。
{ を横向きにすると口髭に似ているからそう呼ばれています。

HTML側でマスタッシュ構文「{{}}」を使います。
マスタッシュ構文を使ってデータバインディングを行います。
そしてこの方法はデータと描画を同期する事ができます。

App.js

マスタッシュ構文は紐付けを行なったid名appの中で行う必要があります。
index.html

さらに表示内容を増やす

App.js

index.html

ディレクティブについて

v-***で始まる特別な属性

ディレクティブについてへ公式ページでは次のように説明されています。

ディレクティブは、それ自身を Vue インスタンスのプロパティやインスタンスの文脈の中で評価される表現にバインドすることができます。配下のプロパティや表現の値が変更されたら、それらのディレクティブの update() 関数が同期的に呼ばれます。
ディレクティブとは、 DOM 要素に対して何かを実行することをライブラリに伝達する、マークアップ中の特別なトークンです。Angular のものと比べ、 Vue.js でのディレクティブのコンセプトは徹底的にシンプルです。

属性のデータバインド

マスタッシュ構文を属性に使用することはできません。
属性に使用する場合は「v-bind:value=”message”」のようにv-bindディレクティブを使用します。

条件分岐 v-if

「v-if」を使うと要素の表示と非表示を切り替えることができます。
表示、非表示の切り替えはDOM自体を書き出したり、書き出さなかったりしています。

v-show

v-showを使うと要素の表示と非表示を切り替えることができます。
こちらはCSSのdisplayプロパティをnoneにするかどうかで行なっています。

v-for

オブジェクトの繰り返し

v-forはオブジェクトを書き出すのにも使えます。keyは第2引数なので注意

イベント

v-onディレクティブ

index.html

App.js

双方向データバイディング

v-modelを使います。双方向データバインディングですから入力内容が元データにも反映されます。そのため、結果としてv-bind:value="message"にも影響が出ます。

コンポーネント

コンポーネントは名前付きの再利用可能な Vue インスタンスです。
詳細は別途記事で説明します。

基本的な書き方
App.js

index.html