Vue.js（1）Vue.jsの概要

eiji

5年前

Vue.jsの特徴

Vue.jsは、ビューだけを取り扱うシンプルなライブラリで、DOM要素にバインディング指定することで、データ変更を検出する度に、DOM要素が表示内容を自動で更新する「リアクティブなデータバインディング」を提供する。したがって、値を都度算出したり、その値を設定するコードが不要。また反対に、ユーザからの入力を検出する度にJavascriptのデータを更新することもできる。

Vue.jsは、フレームワークはどんな規模でも段階的に柔軟に使えるべきであるという、ブログレッシブフレームワークの思想を基に開発されており、ライブラリを導入するなどすることで、規模や要求に応じた対応が可能である。

またVue.jsは、HTMLライク（HTML, CSS, Javascript）なコンポーネントを単一ファイルに記述できるために非常に学習コストが低い。

Vue.jsの基本

Vue.jsは、イベントと要素との間に状態（State）を持つために、イベントとDOMとの関係を分けて考えることが可能である。UIの状態を担うJavascriptオブジェクトを中心に据え、

UIの状態とJavascriptオブジェクト
UIの状態とDOMツリー
イベントと状態の変更

の3つの視点からコンテンツを制作できる。

Vue.jsの構成

Vueオブジェクト

グローバル変数Vueは、コンストラクタ と モジュールの2つの役割を持つ。コンストラクタに指定する オプションオブジェクト は、以下のプロパティを指定することができる。

名前	内容
data	UIの状態とデータ
el	Vueインスタンスをマウントする要素
filters	データの整形
methods	イベント時の挙動
computed	データから派生して算出する値

elプロパティ もしくは mountメソッド を用いて、マウント対象の要素を指定する。Vueの影響範囲は、このマウントした要素とその子要素に限られる。

var vm = new Vue({
  el: '#app'
})

var vm = new Vue({
})
vm.$mount('#app')

また、これらのプロパティにアクセスするためのインスタンスプロパティが用意されている。詳細は、vue インスタンスプロパティを参照のこと。

インスタンスプロパティの例	内容
vm.$data	データオブジェクト
vm.$props	プロパティオブジェクト
vm.$el	ルートDOM

UIデータの定義

dataプロパティを用いて、データのオブジェクトを指定する。dataプロパティで規定したデータは、更新毎に表示も変化する。この値をHTML上に反映させるためには以下のように記述する。なお、Vueインスタンスの変数名は、ViewModelの略として、慣例的にvmをよく使用する。

var vm = new Vue({
  el: '#app'
  data: {
    key: 'value'
  }
})

<div id="app">
  <p>{{ key }}</p>x
</div>

なお、 {{ key }} は、データをHTMLではなくプレーンテキストとして扱うため、HTMLとして出力する必要がある場合には、 v-html ディレクティブを使用する。また、dataプロパティにはデータのみを置き、値の処理を行う関数などは、methodsプロパティやcomputedプロパティに記載する。

$watchメソッドは、Vueインスタンスの変更を検知し動作を開始するため、デバッグ等に利用できる。第一引数に監視対象の値、第二引数に値が変更した際に事項する処理内容を規定します。

vm.$watch(function(){
  return this.key
},function(){
}

テンプレート

Vue.jsは、データとDOMツリーの関係を定義するテンプレート機能を提供しており、Mustache記法によるデータ展開とディレクティブによるHTML要素の拡張を行うことができる。dataプロパティのデータ だけでなく、 Computed, Method, Filterで定義した関数名 を指定することができる。

詳細は、テンプレート構文 – Vue.jsを参照のこと。

データ展開

v-bindを利用して、属性プロパティに値を適用することができる。

v-bind:属性名="dataのkey"

文字列だけではなく真偽値を適用して、表示を変更することもできる。また、属性名を角括弧で囲うことで、属性名を変数名として定義することもできる。

<div id="app">
  <button v-bind:[attribuiteName]="key">button</button>
</div>
<script>
var attributeName = 'title'
var vm = new Vue({
  el: '#app',
  data: {
    key: 'value'
  }
})
</script>

v-bind:class に配列を渡すこともできる。

<div v-vind:class="[activClass, errorClass"]></div>

フィルタ

filtersプロパティは、テキストのフォーマット処理を行うことができる。関数として定義し、関数名がフィルタ処理後の変数名となる。{{ 値|フィルタ名 }}と記述することで、指定した値にフィルタを適用できる。

<div id="app">
  <p>{{ filteredKey|keyFilter }}</>
</div>
<script>
var vm = new Vue({
  el: '#app',
  data: {
    key: 'value'
  },
  filters: {
    keyFilter: function(){
    }
  }
})
</script>

複数のフィルタを | で連結することもできる。

算出プロパティ

computedプロパティは、派生したデータをプロパティとして公開する仕組みで、データに処理を加えたいときに使用する。 this を用いることで、 Vueインスタンス内の各種プロパティにアクセス できる。

詳細は、算出プロパティとウォッチャ – Vue.jsを参照のこと。

<div id="app">
  <p>{{ computedValue }}</>
</div>
<script>
var vm = new Vue({
  el: '#app',
  data: {
    key: 'value'
  },
  computed: {
    computedValue: function(){
        return this.key+100
    }
  }
})
</script>

算出プロパティも依存しちえるデータが更新されれば、自動的に更新される。算出プロパティは、算出対象の変数などの依存関係が更新されたときのみ再実行されるのに対して、メソッドは、再描画が発生する度に実行される 。

算出プロパティは、通常getterのみ提供されているが、別途setterを定義することもできる。

ディレクティブ

HTMLに対してディレクティブと呼ばれる独自の属性を追加し、DOMの操作を行うことができる。

条件付きレンダリング

v-ifおよびv-showディレクティブを用いて、これらの属性に真偽値を適用することで、要素の表示非表示を制御することができる。v-ifはDOMの追加削除自体を行うが、v-showはdisplayプロパティの変更を行って表示非表示を行う。頻繁に表示非表示が変更される場合は、v-showを使うほうがレンダリングコストが低い。

v-ifディレクティブと同時に、v-else-ifディレクティブやv-elseディレクティブを使用することもできる。これらのディレクティブを使用した場合、再利用が可能な要素は描画されずにそのまま利用される。明示的に再描画を行う場合には、Key属性を追加して、Vueに別要素として認識させる必要がある。

データ変更時の更新は行わずに展開を1度のみ行う場合は、v-onceディレクティブを使用することもできる。

詳細は、条件付きレンダリング – Vue.jsを参照のこと。

<div id="app">
  <p v-if="isShown">text</>
</div>
<script>
var vm = new Vue({
  el: '#app',
  computed: {
    isShown: function(){
        return true;
    }
  }
})
</script>

クラスとスタイルのバインディング

特定の条件を満たしているときにUIを変更する場合は、v-bindディレクティブを使用する。

また、v-bind:classは、指定された値のうち真のプロパティのみ、Classの属性値に反映する。下の例では、isShownは真のときのみ、error属性がClass属性に反映する。

<div id="app">
  <p v-bind:class="(error: isShown)">text</>
</div>
<script>
var vm = new Vue({
  el: '#app',
  computed: {
    isShown: function(){
        return true;
    }
  }
})
</script>

v-bind:styleは、スタイルプロパティとして要素に反映される。v-bind:属性名は、:属性名と省略して記述することもできる。

詳細は、クラスとスタイルのバインディング – Vue.jsを参照のこと。

リストレンダリング

v-forディレクティブを用いることで、配列もしくはオブジェクトデータを繰り返して表示できる。v-forは、v-bindと共に使用して、v-bindで一意なキーを与えなければならない。

v-for="要素 in 配列"

また、v-forディレクティブは、オブジェクトのプロパティに対しても使用することができる。このとき、オブジェクトの値（Value）だけでなく、キー（key）およびインデックス（index）を指定することもできる。

<ul id="v-for-object" class="demo">
  <div v-for="(value, name, index) in object">
    {{ index }}. {{ name }}: {{ value }}
  </div>
</ul>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

リスト要素に対する画面更新を行うために、push(), pop(), shift(), unshift(), splice(), sort(), reverse()などの変更メソッドがあらかじめ用意されている。

詳細は、リストレンダリング – Vue.jsを参照のこと。

イベントハンドリング

v-onディレクティブを持ちることで、イベントの発生の検知と検知時の実行する動作を記述することができる。v-on:イベント名は、@イベント名と省略して記述することもできる。

v-on:イベント名="式として実行したい属性名"

また、v-onディレクティブとv-bindディレクティブを、v-modelディレクティブとして記述することもできる。これは、DOMで変更があった場合に、その値をVueに反映できるディレクティブである。

<div id="app">
  <input type="number" v-model="key">
</div>
<script>
var vm = new Vue({
  el: '#app',
  data: {
    key: 'value'
  }
})
</script>

詳細は、イベントハンドリング – Vue.jsを参照のこと。

ライフサイクルフック

Vueにはライフサイクルが規定されていて、それぞれの状態に変化した際に、ライフサイクルフックを用いて処理を実行することができる。

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroy

詳細は、ライフサイクルダイアグラム – Vue.jsを参照のこと。

メソッド

methodsディレクティブを用いることで、Vue内のメソッドを定義することができる。v-onディレクティブにメソッド名を指定して、ボタンクリック等のイベント時に処理をするなどが考えられる。メソッド等を定義する際に記述する function(){　は省略できる 。

イベント修飾子

メソッドには、 呼び出し元からeventオブジェクトが渡される。eventオブジェクトが持つ preventDefault() や stopPropagation() を用いることで、イベントを停止したりイベントの伝搬を停止することができる。

ただし、これらのメソッドを使用することで複雑な処理となることを避けるために、イベント修飾子を提供している。

イベント修飾子	動作
.stop	イベントの伝搬を停止する
.prevent	ページリロードの停止
.capture
.self	event.targetが自分自身の場合のみ呼び出し
.once
.passive

キー修飾子

キーボードイベントをサブスクライブするにあたって、処理を容易にするために、キー修飾子も用意されている。

詳細は、イベントハンドリング – Vue.jsを参照のこと。